Last Updated: February 25, 2016
·
16.95K
· kachar

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

3 Responses
Add your response

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 ·