Latest

random

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.
vertical form in bootstrap,vertical form layout bootstrap,vertical form using 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.

No comments:

All Rights Reserved by Etechpulse © 2015 - 2016
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.