Bootstrap 3 .input-xs, since it doesn't exists.
.input-xs {
height: 22px;
padding: 5px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
Sample usage in input-group
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-xs btn-success">
<i class="glyphicon glyphicon-plus"></i>
</button>
</span>
<input type="text" class="form-control input-xs" />
<span class="input-group-btn">
<button class="btn btn-xs btn-danger">
<i class="glyphicon glyphicon-minus"></i>
</button>
</span>
</div>
Alternatively you can add class to the input-group
like this one:
.input-group-xs>.form-control,
.input-group-xs>.input-group-addon,
.input-group-xs>.input-group-btn>.btn {
height: 22px;
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
}
<div class="input-group input-group-xs">
<span class="input-group-btn">
<button class="btn btn-success">
<i class="glyphicon glyphicon-plus"></i>
</button>
</span>
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-danger">
<i class="glyphicon glyphicon-minus"></i>
</button>
</span>
</div>
Whichever suits you best
Written by Ilko
Related protips
3 Responses
nice! totally needed an input to go with the xs button.
over 1 year ago
·
But... you can do the same in a input-group if you use the class input-sm in the input and btn-sm.. you can also play with form-group-sm
over 1 year ago
·
This causes the placeholder nearly hidden.
To avoid this problem, you must change a property of padding as like this:
padding: 0 5px;
over 1 year ago
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Bootstrap
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#