Bootstrap Input Sizing

To set the input height, you can use classes like .input-lg and .input-small. Likewise, to set input width, you can use grid column like .col-lg-*, .col-sm-* etc.

Input Height Sizing

Code Structure

<div class="container">
    <form action="#" role="form">
        <div class="form-group">
            <label for="defaultinput">Default input</label>
            <input type="text" id="defaultinput" class="form-control">
        </div>
        <div class="form-group">
            <label for="smallinput">Small input</label>
            <input type="text" id="smallinput" class="form-control input-sm">
        </div>
        <div class="form-group">
            <label for="largeinput">Large input</label>
            <input type="text" id="largeinput" class="form-control input-lg">
        </div>
    </form>
</div>

Input Column Sizing

Code Structure

<div class="container">
    <form action="#" role="form">
        <div class="form-group">
            <div class="col-sm-2">
                <label for="defaultinput1">Default input</label>
                <input type="text" id="defaultinput1" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-4">
                <label for="defaultinput2">Default input</label>
                <input type="text" id="defaultinput2" class="form-control">
            </div>
        </div>
    </form>
</div>

Help Text

Code Structure

<div class="container">
    <form action="#" role="form">
        <div class="form-group">
            <label for="user">User Name</label>
            <input type="text" id="user" class="form-control">
             <span class="help-block">This is some help text.</span>
        </div>
    </form>
</div>