Bootstrap

Bootstrap - 06

Context

Ordered and Unordered
Horizontal Definition Lists
List Groups
List Groups with glyphicon
Inline Form Layout
Prepended and Appended Inputs
Disabled and Readonly Inputs and Fieldset
Help Text
Supported Form Controls
Media Objects
Basic Collapsible
Collapsible Panel
Accordion
Fixed Navigation Bar
Collapsing The Navigation Bar
Bootstrap icons are provided by Glyphicons.

Placing Ordered and Unordered List Items Inline

If you want to create a horizontal menu using ordered or unordered list you need to place all list items in a single line i.e. side by side. You can do this by simply applying the Bootstrap's class .list-inline to the respective <ul> or <ol> elements. The .list-inline class also adds some left and right padding (5px by default) to the all list items.

```
<ul class="list-inline">
```
```
    <li>Home</li>
```
```
    <li>Products</li>
```
```
    <li>About Us</li>
```
```
    <li>Contact</li>
```
```
</ul>
```

Creating Horizontal Definition Lists

The terms and descriptions in definition lists can also be placed side-by-side using the Bootstrap's class .dl-horizontal. The terms in horizontal definition lists will be truncated if is too long to fit in the left column (160px by default), however in narrower viewports they will change to the default stacked layout.

```
<dl class="dl-horizontal">
```
```
    <dt>User Agent</dt>
```

    <dd>An HTML user agent is any device that interprets HTML documents.</dd>

```
    <dt>Client-side Scripting</dt>
```

    <dd>Client-side scripting generally refers to the category of computer     programs on the web that are executed client-side i.e. by the user's web browser.</dd>

```
    <dt>Document Tree</dt>
```

    <dd>The tree of elements encoded in the source document.</dd>

```
</dl>
```

Output :

Bootstrap List Groups

The list groups are very useful component for displaying lists of items in a beautiful manner. In most basic form a list group is simply an unordered list with list items and proper classes.

```
<ul class="list-group">
```

    <li class="list-group-item">Pictures</li>

    <li class="list-group-item">Documents</li>

    <li class="list-group-item">Music</li>

    <li class="list-group-item">Videos</li>

```
</ul>
```

Output :

Further you can hyperlink list group items with the little change in HTML markup.

Just replace the <li> with <a> tag and use <div> element as a parent instead of <ul>. You can also add icons and badges to this list group to make it more elegant. The badges component will automatically be positioned on the right.

```
<div class="list-group">
```

    <a href="#" class="list-group-item active">

        <span class="glyphicon glyphicon-camera"></span> Pictures <span class="badge">25</span>

```
    </a>
```

    <a href="#" class="list-group-item">

        <span class="glyphicon glyphicon-file"></span> Documents <span class="badge">145</span>

```
    </a>
```

    <a href="#" class="list-group-item">

        <span class="glyphicon glyphicon-music"></span> Music <span class="badge">50</span>

```
    </a>
```

    <a href="#" class="list-group-item">

        <span class="glyphicon glyphicon-film"></span> Videos <span class="badge">8</span>

```
    </a>
```
```
</div>
```

Creating Inline Form Layout

Sometimes you might require to place the form controls side-by-side to compact the layout. You can do this easily by adding the Bootstrap class .form-inline to the <form> element.

```
<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>
```

Creating Prepended and Appended Inputs

You can add text and icons or buttons before or after any text-based input.

To prepend or append text and icons to an input:

Wrap the text or icon within a <span> element having the class .input-group-addonand place it before or after the <input> element.
Wrap both the <span> and text-based <input> element within a <div> element and apply the class .input-group on it.

```
<div class="row">
```
```
        <div class="col-xs-4">
```
```
            <div class="input-group">
```

                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>

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

```
            </div>
```
```
        </div>
```
```
        <div class="col-xs-4">
```
```
            <div class="input-group">
```

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

                <span class="input-group-addon">.00</span>

```
            </div>
```
```
        </div>
```
```
        <div class="col-xs-4">
```
```
            <div class="input-group">
```

                <span class="input-group-addon">$</span>

                <input type="text" class="form-control" placeholder="US Dollar">

                <span class="input-group-addon">.00</span>

```
            </div>
```
```
        </div>
```
```
    </div>
```

Creating Disabled and Readonly Inputs

To create disabled inputs just add the attributes disabled to the <input> element and Bootstrap will do the rest.

Creating Disabled Fieldsets

Rather than disabling the form controls individually, you can also disable all form controls within a fieldset at once by adding the disabled attribute to the <fieldset> element.

```
<form class="form-horizontal">
```
```
    <fieldset disabled="disabled">
```
```
        <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>
```
```
    </fieldset>
```
```
</form>
```

Placing Help Text around Form Controls

Placing help text for the form controls in an efficient way to guide users to enter the correct data in a form. You can place block level help text for the form controls using the class.help-block. The help text is typically displayed at the bottom of the control.

<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>

Supported Form Controls in Bootstrap

Bootstrap includes support for all standard form controls as well as new HTML5 input typessuch as datetime, number, email, url, search, tel, color etc. The following example will show you the usages of standard form controls with Bootstrap.

```
<form class="form-horizontal">
```
```
    <div class="form-group">
```

        <label class="control-label col-xs-3" for="inputEmail">Email:</label>

```
        <div class="col-xs-9">
```

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

```
        </div>
```
```
    </div>
```
```
    <div class="form-group">
```

        <label class="control-label col-xs-3" for="inputPassword">Password:</label>

```
        <div class="col-xs-9">
```

            <input type="password" class="form-control" id="inputPassword" placeholder="Password">

```
        </div>
```
```
    </div>
```
```
    <div class="form-group">
```

        <label class="control-label col-xs-3" for="confirmPassword">Confirm Password:</label>

```
        <div class="col-xs-9">
```

            <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm Password">

```
        </div>
```
```
    </div>
```
```
    <div class="form-group">
```

        <label class="control-label col-xs-3" for="firstName">First Name:</label>

```
        <div class="col-xs-9">
```

            <input type="text" class="form-control" id="firstName" placeholder="First Name">

```
        </div>
```
```
    </div>
```
```
    <div class="form-group">
```

        <label class="control-label col-xs-3" for="lastName">Last Name:</label>

```
        <div class="col-xs-9">
```

            <input type="text" class="form-control" id="lastName" placeholder="Last Name">

```
        </div>
```
```
    </div>
```
```
    <div class="form-group">
```

        <label class="control-label col-xs-3" for="phoneNumber">Phone:</label>

```
        <div class="col-xs-9">
```

            <input type="tel" class="form-control" id="phoneNumber" placeholder="Phone Number">

```
        </div>
```
```
    </div>
```
```
    <div class="form-group">
```

        <label class="control-label col-xs-3">Date of Birth:</label>

```
        <div class="col-xs-3">
```

            <select class="form-control">

```
                <option>Date</option>
```
```
            </select>
```
```
        </div>
```
```
        <div class="col-xs-3">
```

            <select class="form-control">

```
                <option>Month</option>
```
```
            </select>
```
```
        </div>
```
```
        <div class="col-xs-3">
```

            <select class="form-control">

```
                <option>Year</option>
```
```
            </select>
```
```
        </div>
```
```
    </div>
```
```
    <div class="form-group">
```

        <label class="control-label col-xs-3" for="postalAddress">Address:</label>

```
        <div class="col-xs-9">
```

            <textarea rows="3" class="form-control" id="postalAddress" placeholder="Postal Address"></textarea>

```
        </div>
```
```
    </div>
```
```
    <div class="form-group">
```

        <label class="control-label col-xs-3" for="ZipCode">Zip Code:</label>

```
        <div class="col-xs-9">
```

            <input type="text" class="form-control" id="ZipCode" placeholder="Zip Code">

```
        </div>
```
```
    </div>
```
```
    <div class="form-group">
```

        <label class="control-label col-xs-3">Gender:</label>

```
        <div class="col-xs-2">
```

            <label class="radio-inline">

                <input type="radio" name="genderRadios" value="male"> Male

```
            </label>
```
```
        </div>
```
```
        <div class="col-xs-2">
```

            <label class="radio-inline">

                <input type="radio" name="genderRadios" value="female"> Female

```
            </label>
```
```
        </div>
```
```
    </div>
```
```
    <div class="form-group">
```

        <div class="col-xs-offset-3 col-xs-9">

            <label class="checkbox-inline">

                <input type="checkbox" value="news"> Send me latest news and updates.

```
            </label>
```
```
        </div>
```
```
    </div>
```
```
    <div class="form-group">
```

        <div class="col-xs-offset-3 col-xs-9">

            <label class="checkbox-inline">

                <input type="checkbox" value="agree">  I agree to the <a href="#">Terms and Conditions</a>.

```
            </label>
```
```
        </div>
```
```
    </div>
```
```
    <br>
```
```
    <div class="form-group">
```

        <div class="col-xs-offset-3 col-xs-9">

            <input type="submit" class="btn btn-primary" value="Submit">

            <input type="reset" class="btn btn-default" value="Reset">

```
        </div>
```
```
    </div>
```
```
</form>
```

Bootstrap Media Objects

Sometimes you may want to create a layout that contains left- or right-aligned image along with the textual content like blog comments. You can do this easily through the newly introduced Bootstrap media component, like this.

```
<div class="media">
```
```
    <a href="#" class="pull-left">
```

        <img src="avatar-tiny.jpg" class="media-object" alt="Sample Image">

```
    </a>
```
```
    <div class="media-body">
```

        <h4 class="media-heading">Jhon Carter <small><i>Posted on January 10, 2014</i></small></h4>

        <p>Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I'll let you know once I do.</p>

```
    </div>
```
```
</div>
```

Basic Collapsible

Collapsibles are useful when you want to hide and show large amount of content:

<button data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

The .collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button.

To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element. Then add the data-target="#id" attribute to connect the button with the collapsible content (<div id="demo">).

Note: For <a> elements, you can use the href attribute instead of the data-target attribute:

Collapsible Panel

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>

Accordion

The following example shows a simple accordion by extending the panel component.

Note: Use the data-parent attribute to make sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
  <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
  <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
  </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
</div>

Fixed Navigation Bar

The navigation bar can also be fixed at the top or at the bottom of the page.

A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.

The .navbar-fixed-top class makes the navigation bar fixed at the top

The .navbar-fixed-bottom class makes the navigation bar stay at the bottom

<nav class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </div>
</nav>

Collapsing The Navigation Bar

The navigation bar takes up too much space on a small screen.

We should hide the navigation bar; and only show it when it is needed.

In the following example the navigation bar is replaced by a button in the top right corner. Only when the button is clicked, the navigation bar will be displayed:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

Bootstrap icons are provided by Glyphicons. However you are free to use these icons in your project but as a courtesy you can consider to include a link back to Glyphicons whenever practical.

http://glyphicons.com/

Deepan's Tech

Search This Blog