Leandro Tupone Leandro Tupone - 4 months ago 22
CSS Question

Bootstrap 3 - input-xs (smaller than sm)

I wasted a lot of time searching a way to make my own xs size (smaller than the small) for input and input group, so here's the code!




Update 2014/11/14



Peter Butkovic upload the bug/request to the bootstrap github:

https://github.com/twbs/bootstrap/issues/15107

with the following response from theirs:


We won't be adding it to v3 and I don't think we'll have the xs
buttons even in v4, but I'll keep it in mind for that if we opt to
keep it around.

Answer

For inputs smallers:

    .input-xs {
    height: 22px;
    padding: 2px 5px;
    font-size: 12px;
    line-height: 1.5; //If Placeholder of the input is moved up, rem/modify this.
    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;
}

and use:

<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>