< Bootstrap Tutorial

Bootstrap forms

← Previous Next →


Bootstrap Forms

HTML forms are an integral part of the web pages and applications. Bootstrap greatly simplifies the process of styling and alignment of form controls like labels, input fields, selectboxes, textareas, buttons, etc. through predefined set of classes.

Bootstrap provides three different types of form layouts:

  • Vertical Form (default)
  • Horizontal Form
  • Inline Form

Vertical Form

This is the default Bootstrap form layout in which styles are applied to form controls without adding any base class to the <form> element or any large changes in the markup. The form controls in this layout are stacked with left-aligned labels on the top.

To create a Vertical form:

  1. Add a role form to the parent <form> element.
  2. Wrap labels and controls in a <div> with class .form-group. This is needed for optimum spacing.
  3. Add a class of .form-control to all textual <input>, <textarea>, and <select> elements.

The following example shows how to do this:

<form>
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-primary">Login</button>
</form>

The above code creates the following form:

Horizontal Form

In horizontal form layout labels are right aligned and floated to left to make them appear on the same line as form controls. The horizontal form layout requires the various markup changes from a default form layout.

To create a Horizontal form:

  1. Add the class .form-horizontal to the <form> element.
  2. Wrap labels and form controls in a <div> element and apply the class .form-group.
  3. Use Bootstrap's predefined grid classes to align labels and form controls.
  4. Add the class .control-label to the <label> element.

The following code shows how to create a Horizontal form:

<form class="form-horizontal">
    <div class="form-group">
        <label for="inputEmail" class="control-label col-xs-2">Email</label>
        <div class="col-xs-10">
            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword" class="control-label col-xs-2">Password</label>
        <div class="col-xs-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-offset-2 col-xs-10">
            <div class="checkbox">
                <label><input type="checkbox"> Remember me</label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-offset-2 col-xs-10">
            <button type="submit" class="btn btn-primary">Login</button>
        </div>
    </div>
</form>

The above code creates a form like this:

Inline Form

To create a form where all of the elements are inline, left aligned and labels are alongside, add the class .form-inline to the <form> tag.

The following code shows how to do this:

<form class="form-inline">
    <div class="form-group">
        <label class="sr-only" for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <label class="sr-only" for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-primary">Login</button>
</form>

The above code creates a form like this:

← Previous Next →