Form Layouts

Since Bootstrap applies display: block and width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.

Page Demo Bootstrap Doc
Most of the basic form layouts have been upgraded with custom markups and style in order to give a more Material Design friendly outcome. Official Bootstrap figures may not work here.

Form groups

The .form-group class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies margin-bottom, but it picks up additional styles in .form-inline as needed. Use it with <fieldset>s, <div>s, or nearly any other element.

Basic examples

<div class="form-group">
    <label>First Name</label>
    <input type="text" class="form-control" placeholder="e.g: David Smith">
    <i class="form-group__bar"></i>
</div>

Floating label examples

Animated labels which floats when the input is focused.

<div class="form-group form-group--float">
    <input type="text" class="form-control">
    <label>First Name</label>
    <i class="form-group__bar"></i>
</div>

Form Grids

More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.

<form>
    <div class="row">
        <div class="col">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="First Name">
                <i class="form-group__bar"></i>
            </div>

            <div class="form-group">
                <input type="text" class="form-control" placeholder="Last Name">
                <i class="form-group__bar"></i>
            </div>
        </div>
        <div class="col">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Email Address">
                <i class="form-group__bar"></i>
            </div>

            <div class="form-group">
                <input type="text" class="form-control" placeholder="Phone Number">
                <i class="form-group__bar"></i>
            </div>
        </div>
    </div>
</form>

Form Rows

You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.

<form>
    <div class="form-row">
        <div class="col">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="First name">
                <i class="form-group__bar"></i>
            </div>
        </div>
        <div class="col">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Last name">
                <i class="form-group__bar"></i>
            </div>
        </div>
    </div>
</form>

Complex layout

More complex layouts can also be created with the grid system.

<form>
    <div class="form-row">
        <div class="col-md-6">
            <div class="form-group">
                <input type="email" class="form-control" placeholder="First Name">
                <i class="form-group__bar"></i>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <input type="password" class="form-control" placeholder="Last Name">
                <i class="form-group__bar"></i>
            </div>
        </div>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="About yourself...">
        <i class="form-group__bar"></i>
    </div>
    <div class="form-row">
        <div class="col-md-6">
            <div class="form-group">
                <input type="email" class="form-control" placeholder="Email Address">
                <i class="form-group__bar"></i>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <input type="password" class="form-control" placeholder="Password">
                <i class="form-group__bar"></i>
            </div>
        </div>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Address">
        <i class="form-group__bar"></i>
    </div>
    <div class="form-row">
        <div class="col-md-6">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Phone Number">
                <i class="form-group__bar"></i>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <div class="select">
                    <select class="form-control">
                        <option selected>Interests</option>
                        <option>...</option>
                    </select>
                    <i class="form-group__bar"></i>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Other">
                <i class="form-group__bar"></i>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="checkbox">
            <input type="checkbox" id="gridCheck">
            <label class="checkbox__label" for="gridCheck">
                Check me out
            </label>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Create an Account</button>
</form>

Horizontal form

Create horizontal forms with the grid by utilizing the grid classes. Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form controls.

<form>
    <div class="row">
        <label class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
            <div class="form-group">
                <input type="email" class="form-control" placeholder="Email Address">
                <i class="form-group__bar"></i>
            </div>

        </div>
    </div>
    <div class="row">
        <label class="col-sm-2 col-form-label">Password</label>
        <div class="col-sm-10">
            <div class="form-group">
                <input type="password" class="form-control" placeholder="Password">
                <i class="form-group__bar"></i>
            </div>
        </div>
    </div>
    <div class="row">
        <label class="col-sm-2 col-form-label">Radio</label>
        <div class="col-sm-10">
            <div class="form-group">
                <div class="radio">
                    <input type="radio" name="form-horizontal-radio" id="form-horizontal-radio-1">
                    <label class="radio__label" for="form-horizontal-radio-1">First Radio</label>
                </div>

                <div class="radio">
                    <input type="radio" name="form-horizontal-radio" id="form-horizontal-radio-2">
                    <label class="radio__label" for="form-horizontal-radio-2">First Radio</label>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <label class="col-sm-2 col-form-label">Checkbox</label>
        <div class="col-sm-10">
            <div class="form-group">
                <div class="checkbox">
                    <input type="checkbox" name="form-horizontal-radio-1" id="form-horizontal-checkbox-1">
                    <label class="checkbox__label" for="form-horizontal-checkbox-1">Example checkbox</label>
                </div>
            </div>
        </div>
    </div>

    <button type="submit" class="btn btn-primary">Example Button</button>
</form>

Horizontal form label sizing

Be sure to use .col-form-label-sm or .col-form-label-lg to your <label>s or <legend>s to correctly follow the size of .form-control-lg and .form-control-sm.

<form>
    <div class="row">
        <label class="col-sm-2 col-form-label col-form-label-sm">Email</label>
        <div class="col-sm-10">
            <div class="form-group">
                <input type="email" class="form-control form-control-sm" placeholder="col-form-label-sm">
                <i class="form-group__bar"></i>
            </div>
        </div>
    </div>
    <div class="row">
        <label class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
            <div class="form-group">
                <input type="email" class="form-control" placeholder="col-form-label">
                <i class="form-group__bar"></i>
            </div>
        </div>
    </div>
    <div class="row">
        <label class="col-sm-2 col-form-label col-form-label-lg">Email</label>
        <div class="col-sm-10">
            <div class="form-group">
                <input type="email" class="form-control form-control-lg" placeholder="col-form-label-lg">
                <i class="form-group__bar"></i>
            </div>
        </div>
    </div>
</form>

Inline Forms

Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.

<form class="form-inline">
    <div class="form-group mb-4 mr-sm-4">
        <input type="text" class="form-control" placeholder="Jane Doe">
        <i class="form-group__bar"></i>
    </div>

    <div class="input-group mb-4 mr-sm-4">
        <div class="input-group-prepend">
            <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
        <i class="form-group__bar"></i>
    </div>

    <div class="mb-4 mr-sm-4">
        <div class="checkbox">
            <input type="checkbox" id="inlineFormCheck">
            <label class="checkbox__label" for="inlineFormCheck">Remember me</label>
        </div>
    </div>

    <button type="submit" class="btn btn-primary mb-4">Submit</button>
</form>

Help text

Block-level help text in forms can be created using .form-text. Inline help text can be flexibly implemented using any inline HTML element and utility classes like .text-muted.

<div class="form-group">
    <label>Password</label>
    <input type="password" class="form-control" placeholder="Enter your password">
    <i class="form-group__bar"></i>
</div>
<small class="form-text text-muted">
    Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>