Bootstrap 

Grids
 Bootstrap Grid System
 Bootstrap's grid system allows up to 12 columns across the page.
 If you do not want to use all 12 columns individually, you can group the columns
together to create wider columns

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1

 span 4  span 4  span 4

span 4 span 8

span 6 span 6

span 12

Bootstrap's grid system is responsive, and the columns will re-arrange

automatically depending on the screen size.
 Grid Classes
The Bootstrap grid system has four classes:

 xs (for phones - screens less than 768px wide)

 sm (for tablets - screens equal to or greater than 768px wide)
 md (for small laptops - screens equal to or greater than 992px wide)
 lg (for laptops and desktops - screens equal to or greater than 1200px wide)

The classes above can be combined to create more

dynamic and flexible layouts.
Basic Structure of a Bootstrap Grid

The following is a basic structure of a Bootstrap grid:

<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>

First; create a row (<div class="row">). Then, add the desired number of
columns (tags with appropriate .col-*-* classes). Note that numbers in .col-
*-* should always add up to 12 for each row.
Three Equal Columns

<div class="row">

  <div class="col-sm-4">.col-sm-4</div>

  <div class="col-sm-4">.col-sm-4</div>

  <div class="col-sm-4">.col-sm-4</div>

</div>
Two Unequal Columns

<div class="row">

  <div class="col-sm-4">.col-sm-4</div>

  <div class="col-sm-8">.col-sm-8</div>

</div>
 Navbar

The navbar is one of the prominent features of Bootstrap sites.

Navbars are responsive 'meta' components that serve as

navigation headers for your application or site. Navbars

collapse in mobile views and become horizontal as the

available viewport width increases. At its core, the navbar

includes styling for site names and basic navigation.

To create a default navbar
 Add the classes .navbar, .navbar-default to the <nav> tag.

 Add role = "navigation" to the above element, to help with accessibility.

 Add a header class .navbar-header to the <div> element. Include an <a>

element with class navbar-brand. This will give the text a slightly larger

size.

 To add links to the navbar, simply add an unordered list with the classes

of .nav, .navbar-nav.
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </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>
</nav>
 Inverted Navigation Bar
 If you don't like the style of the default navigation bar, Bootstrap provides
an alternative, black navbar:
 Just change the .navbar-default class into .navbar-inverse:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </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>
</nav>
Navigation Bar With Dropdown
 Navigation bars can also hold dropdown menus.
 The following example adds a dropdown menu for the
"Page 1" button:
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
 Right-Aligned Navigation Bar

 The .navbar-right class is used to right-align navigation bar buttons.

 In the following example we insert a "Sign Up" button and a "Login" button
to the right in the navigation bar. We also add a glyphicon on each of the two
new buttons: navbar-inverse">
<nav class="navbar
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </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>
    </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>
</nav>