Creating Forms with Twitter Bootstrap 3

Create Form using Twitter Bootstrap

In this bootstrap tutorial I will explain about different types of form layouts using bootstrap. Bootstrap provides three different types of form layouts:-

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

Vertical form Layout Bootstrap

The following example demonstrates how to work with vertical form in bootstrap.

create login form with bootstrap

<form>

        <div class="form-group">

            <label>Email</label>

            <input type="email" class="form-control" placeholder="Email">

        </div>

        <div class="form-group">

            <label>Password</label>

            <input type="password" class="form-control"

                   placeholder="Password">

        </div>

        <div class="checkbox">

            <label><input type="checkbox"> Remember me</label>

        </div>

        <button type="submit" class="btn btn-primary">Login</button>

</form>

Twitter Bootstrap Form Horizontal

The following example demonstrates how to work with horizontal form in bootstrap.

login form bootstrap example

  <form class="form-horizontal">

        <div class="form-group">

            <label class="control-label col-xs-2">Email</label>

            <div class="col-xs-10">

                <input type="email" class="form-control" placeholder="Email">

            </div>

        </div>

        <div class="form-group">

            <label class="control-label col-xs-2">Password</label>

            <div class="col-xs-10">

                <input type="password" class="form-control" 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>

Inline form in bootstrap 3

The following example demonstrates how to work with Inline form in bootstrap.

Inline form example

<form class="form-inline">

        <div class="form-group">

            <label class="sr-only">Email</label>

            <input type="email" class="form-control" placeholder="Email">

        </div>

        <div class="form-group">

            <label class="sr-only">Password</label>

            <input type="password" class="form-control"

                   placeholder="Password">

        </div>

        <div class="checkbox">

            <label><input type="checkbox"> Remember me</label>

        </div>

        <button type="submit" class="btn btn-primary">Login</button>

</form>

Placing Help Text around Form Controls

<form>

        <input type="text" class="form-control">

        <span class="help-block">

            A block of help text that breaks onto a new line

            and may extend beyond one line.

        </span>

</form>

Twitter Bootstrap Form Validation States
Bootstrap includes validation styles for error, warning, and success messages. To use, just add the appropriate class to the surrounding .form-group. e.g :-
<div class="form-group has-success"></div>

<div class="form-group has-warning"></div>

<div class="form-group has-error"></div>

Panels with Heading

<div class="panel panel-default">

        <div class="panel-heading">This Page is Disabled</div>

        <div class="panel-body">

            This page is temporarily disabled by the site

            administrator for some reason.<br> <a href="#">Click here</a> to

            enable the page.

        </div>

</div>

Bootstrap Panel

Creating Breadcrumbs

<ul class="breadcrumb">

        <li><a href="#">Home</a></li>

        <li><a href="#">Products</a></li>

        <li class="active">Accessories</li>

</ul>

Creating Breadcrumbs with Bootstrap

Styling Images with Twitter Bootstrap

<img src="" class="img-rounded" alt="Rounded Image">

<img src="" class="img-circle" alt="Circular Image">

<img src="" class="img-thumbnail" alt="Thumbnail Image">

Note: The classes .img-rounded and .img-circle do not work in IE8 and lower versions due to lack of support for CSS border-radius property.