documentation.html 104 KB

Raw Blame History Permalink

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Documentation - Bootflat</title>
    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- site css -->
    <link rel="stylesheet" href="css/site.min.css">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/site.min.js"></script>
  </head>
  <body style="background-color: #f1f2f6;">
    <div class="docs-header">
      <!--nav-->
      <nav class="navbar navbar-default navbar-custom" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
          </div>
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
              <li><a class="nav-link current" href="documentation.html">Documentation</a></li>
            </ul>
          </div>
        </div>
      </nav>
      <!--header-->
      <div class="topic">
        <div class="container">
          <h3>Documentation</h3>
          <h4>The complete style of the Bootflat Framework</h4>
        </div>
        <div class="topic__infos">
          <div class="container">
            Bootflat offers over a dozen reusable components, which can be combined with each other.
          </div>
        </div>
      </div>
    </div>
    <!--documents-->
    <div class="container documents">
      <!-- Color Swatches
      ================================================== -->
      <div class="example">
        <h2 class="example-title">Color Swatches</h2>
        <div class="row">
          <div class="col-md-2">
            <div class="color-swatches">
              <div class="swatches">
                <div class="clearfix">
                  <div class="pull-left light" style="background-color:#5D9CEC"></div>
                  <div class="pull-right dark" style="background-color:#4A89DC"></div>
                </div>
                <div class="infos">
                  <h4>BLUE JEANS</h4>
                  <p>#5D9CEC, #4A89DC</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-2">
            <div class="color-swatches">
              <div class="swatches">
                <div class="clearfix">
                  <div class="pull-left light" style="background-color:#4FC1E9"></div>
                  <div class="pull-right dark" style="background-color:#3BAFDA"></div>
                </div>
                <div class="infos">
                  <h4>AQUA</h4>
                  <p>#4FC1E9, #3BAFDA</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-2">
            <div class="color-swatches">
              <div class="swatches">
                <div class="clearfix">
                  <div class="pull-left light" style="background-color:#48CFAD"></div>
                  <div class="pull-right dark" style="background-color:#37BC9B"></div>
                </div>
                <div class="infos">
                  <h4>MINT</h4>
                  <p>#48CFAD, #37BC9B</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-2">
            <div class="color-swatches">
              <div class="swatches">
                <div class="clearfix">
                  <div class="pull-left light" style="background-color:#A0D468"></div>
                  <div class="pull-right dark" style="background-color:#8CC152"></div>
                </div>
                <div class="infos">
                  <h4>GRASS</h4>
                  <p>#A0D468, #8CC152</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-2">
            <div class="color-swatches">
              <div class="swatches">
                <div class="clearfix">
                  <div class="pull-left light" style="background-color:#FFCE54"></div>
                  <div class="pull-right dark" style="background-color:#F6BB42"></div>
                </div>
                <div class="infos">
                  <h4>SUNFLOWER</h4>
                  <p>#FFCE54, #F6BB42</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-2">
            <div class="color-swatches">
              <div class="swatches">
                <div class="clearfix">
                  <div class="pull-left light" style="background-color:#FC6E51"></div>
                  <div class="pull-right dark" style="background-color:#E9573F"></div>
                </div>
                <div class="infos">
                  <h4>BITTERSWEET</h4>
                  <p>#FC6E51, #E9573F</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-2">
            <div class="color-swatches">
              <div class="swatches">
                <div class="clearfix">
                  <div class="pull-left light" style="background-color:#ED5565"></div>
                  <div class="pull-right dark" style="background-color:#DA4453"></div>
                </div>
                <div class="infos">
                  <h4>GRAPEFRUIT</h4>
                  <p>#ED5565, #DA4453</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-2">
            <div class="color-swatches">
              <div class="swatches">
                <div class="clearfix">
                  <div class="pull-left light" style="background-color:#AC92EC"></div>
                  <div class="pull-right dark" style="background-color:#967ADC"></div>
                </div>
                <div class="infos">
                  <h4>LAVENDER</h4>
                  <p>#AC92EC, #967ADC</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-2">
            <div class="color-swatches">
              <div class="swatches">
                <div class="clearfix">
                  <div class="pull-left light" style="background-color:#EC87C0"></div>
                  <div class="pull-right dark" style="background-color:#D770AD"></div>
                </div>
                <div class="infos">
                  <h4>PINK ROSE</h4>
                  <p>#EC87C0, #D770AD</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-2">
            <div class="color-swatches">
              <div class="swatches">
                <div class="clearfix">
                  <div class="pull-left light" style="background-color:#F5F7FA"></div>
                  <div class="pull-right dark" style="background-color:#E6E9ED"></div>
                </div>
                <div class="infos">
                  <h4>LIGHT GRAY</h4>
                  <p>#F5F7FA, #E6E9ED</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-2">
            <div class="color-swatches">
              <div class="swatches">
                <div class="clearfix">
                  <div class="pull-left light" style="background-color:#CCD1D9"></div>
                  <div class="pull-right dark" style="background-color:#AAB2BD"></div>
                </div>
                <div class="infos">
                  <h4>MEDIUM GRAY</h4>
                  <p>#CCD1D9, #AAB2BD</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-2">
            <div class="color-swatches">
              <div class="swatches">
                <div class="clearfix">
                  <div class="pull-left light" style="background-color:#656D78"></div>
                  <div class="pull-right dark" style="background-color:#434A54"></div>
                </div>
                <div class="infos">
                  <h4>DARK GRAY</h4>
                  <p>#656D78, #434A54</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Buttons
      ================================================== -->
      <div class="example">
        <h2 class="example-title">Buttons</h2>
        <div class="row">
          <div class="col-md-3">
            <button type="button" class="btn btn-block">Normal</button>
          </div>
          <div class="col-md-3">
            <button type="button" class="btn btn-default btn-block">Default</button>
          </div>
          <div class="col-md-3">
            <button type="button" class="btn btn-primary btn-block">Primary</button>
          </div>
          <div class="col-md-3">
            <button type="button" class="btn btn-success btn-block">Success</button>
          </div>
        </div>
        <div class="row">
          <div class="col-md-3">
            <button type="button" class="btn btn-info btn-block">Info</button>
          </div>
          <div class="col-md-3">
            <button type="button" class="btn btn-warning btn-block">Warning</button>
          </div>
          <div class="col-md-3">
            <button type="button" class="btn btn-danger btn-block">Danger</button>
          </div>
          <div class="col-md-3">
            <button type="button" class="btn btn-link btn-block">Link</button>
          </div>
        </div>
      </div>
      <!-- Button Groups
      ================================================== -->
      <div class="example">
        <h2 class="example-title">Button Groups</h2>
        <div class="row">
          <div class="col-md-6">
            <div class="row">
              <div class="col-md-4">
                <div class="btn-group">
                  <button type="button" class="btn"><i class="glyphicon glyphicon-align-left"></i></button>
                  <button type="button" class="btn"><i class="glyphicon glyphicon-align-center"></i></button>
                  <button type="button" class="btn"><i class="glyphicon glyphicon-align-right"></i></button>
                </div>
              </div>
              <div class="col-md-4">
                <div class="btn-group">
                  <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-left"></i></button>
                  <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-center"></i></button>
                  <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-right"></i></button>
                </div>
              </div>
              <div class="col-md-4">
                <div class="btn-group">
                  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-align-left"></i></button>
                  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-align-center"></i></button>
                  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-align-right"></i></button>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-4">
                <div class="btn-group">
                  <button type="button" class="btn btn-success"><i class="glyphicon glyphicon-align-left"></i></button>
                  <button type="button" class="btn btn-success"><i class="glyphicon glyphicon-align-center"></i></button>
                  <button type="button" class="btn btn-success"><i class="glyphicon glyphicon-align-right"></i></button>
                </div>
              </div>
              <div class="col-md-4">
                <div class="btn-group">
                  <button type="button" class="btn btn-info"><i class="glyphicon glyphicon-align-left"></i></button>
                  <button type="button" class="btn btn-info"><i class="glyphicon glyphicon-align-center"></i></button>
                  <button type="button" class="btn btn-info"><i class="glyphicon glyphicon-align-right"></i></button>
                </div>
              </div>
              <div class="col-md-4">
                <div class="btn-group">
                  <button type="button" class="btn btn-warning"><i class="glyphicon glyphicon-align-left"></i></button>
                  <button type="button" class="btn btn-warning"><i class="glyphicon glyphicon-align-center"></i></button>
                  <button type="button" class="btn btn-warning"><i class="glyphicon glyphicon-align-right"></i></button>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="btn-group">
                  <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-align-left"></i></button>
                  <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-align-center"></i></button>
                  <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-align-right"></i></button>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="row">
              <div class="col-md-2">
                <div class="btn-group-vertical">
                  <button type="button" class="btn btn"><i class="glyphicon glyphicon-home"></i></button>
                  <button type="button" class="btn btn"><i class="glyphicon glyphicon-user"></i></button>
                  <button type="button" class="btn btn"><i class="glyphicon glyphicon-comment"></i></button>
                  <button type="button" class="btn btn"><i class="glyphicon glyphicon-cog"></i></button>
                </div>
              </div>
              <div class="col-md-2">
                <div class="btn-group-vertical">
                  <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-home"></i></button>
                  <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-user"></i></button>
                  <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-comment"></i></button>
                  <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-cog"></i></button>
                </div>
              </div>
              <div class="col-md-2">
                <div class="btn-group-vertical">
                  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-home"></i></button>
                  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-user"></i></button>
                  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-comment"></i></button>
                  <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-cog"></i></button>
                </div>
              </div>
              <div class="col-md-2">
                <div class="btn-group-vertical">
                  <button type="button" class="btn btn-success"><i class="glyphicon glyphicon-home"></i></button>
                  <button type="button" class="btn btn-success"><i class="glyphicon glyphicon-user"></i></button>
                  <button type="button" class="btn btn-success"><i class="glyphicon glyphicon-comment"></i></button>
                  <button type="button" class="btn btn-success"><i class="glyphicon glyphicon-cog"></i></button>
                </div>
              </div>
              <div class="col-md-2">
                <div class="btn-group-vertical">
                  <button type="button" class="btn btn-info"><i class="glyphicon glyphicon-home"></i></button>
                  <button type="button" class="btn btn-info"><i class="glyphicon glyphicon-user"></i></button>
                  <button type="button" class="btn btn-info"><i class="glyphicon glyphicon-comment"></i></button>
                  <button type="button" class="btn btn-info"><i class="glyphicon glyphicon-cog"></i></button>
                </div>
              </div>
              <div class="col-md-2">
                <div class="btn-group-vertical">
                  <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-home"></i></button>
                  <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-user"></i></button>
                  <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-comment"></i></button>
                  <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-cog"></i></button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Button Dropdowns
      ================================================== -->
      <div class="example">
        <h2 class="example-title">Button Dropdowns</h2>
        <div class="row">
          <div class="col-md-12">
            <div class="btn-group">
              <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Normal <span class="caret"></span></button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="btn-group">
              <button type="button" class="btn">Normal</button>
              <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-default">Default</button>
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-primary">Primary</button>
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-success">Success</button>
              <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-info">Info</button>
              <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-warning">Warning</button>
              <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-danger">Danger</button>
              <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- Labels, Badges, Dropdowns, Tooltip and Popover
      ================================================== -->
      <div class="example">
        <div class="row">
          <div class="col-md-5">
            <div class="row">
              <div class="col-md-12">
                <!-- Labels
                ================================================== -->
                <h2 class="example-title">Labels</h2>
                <span class="label">Normal</span>
                <span class="label label-default">Default</span>
                <span class="label label-primary">Primary</span>
                <span class="label label-success">Success</span>
                <span class="label label-info">Info</span>
                <span class="label label-warning">Warning</span>
                <span class="label label-danger">Danger</span>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <!-- Badges
                ================================================== -->
                <h2 class="example-title">Badges</h2>
                <span class="badge">Normal</span>
                <span class="badge badge-default">Default</span>
                <span class="badge badge-primary">Primary</span>
                <span class="badge badge-success">Success</span>
                <span class="badge badge-info">Info</span>
                <span class="badge badge-warning">Warning</span>
                <span class="badge badge-danger">Danger</span>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6 example-dropdown">
                <!-- Dropdowns
                ================================================== -->
                <h2 class="example-title">Dropdowns</h2>
                <ul class="dropdown-menu" role="menu">
                  <li class="dropdown-header">Setting</li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                  <li class="dropdown-submenu">
                      <a href="#">Something else here</a>
                      <ul class="dropdown-menu">
                          <li><a href="#">Action1</a></li>
                          <li><a href="#">Action2</a></li>
                          <li><a href="#">Another action</a></li>
                          <li><a href="#">Something else here</a></li>
                          <li class="divider"></li>
                          <li><a href="#">Separated link</a></li>
                      </ul>
                  </li>
                  <li role="presentation" class="divider"></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
                </ul>
              </div>
              <div class="col-md-6">
                <!-- Tooltips
                ================================================== -->
                <h2 class="example-title">Tooltips</h2>
                <div class="row tooltip-demo">
                  <div class="col-md-12"><button type="button" class="btn btn-info btn-block" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button></div>
                  <div class="col-md-12"><button type="button" class="btn btn-info btn-block" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button></div>
                  <div class="col-md-12"><button type="button" class="btn btn-info btn-block" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button></div>
                  <div class="col-md-12"><button type="button" class="btn btn-info btn-block" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button></div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-7">
            <!-- Popovers
            ================================================== -->
            <h2 class="example-title">Popovers</h2>
            <div class="row example-popover">
              <div class="col-md-6">
                <div class="popover top">
                  <div class="arrow"></div>
                  <h3 class="popover-title">Popover top</h3>
                  <div class="popover-content">
                    <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="popover right">
                  <div class="arrow"></div>
                  <h3 class="popover-title">Popover right</h3>
                  <div class="popover-content">
                    <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="popover bottom">
                  <div class="arrow"></div>
                  <h3 class="popover-title">Popover bottom</h3>
                  <div class="popover-content">
                    <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="popover left">
                  <div class="arrow"></div>
                  <h3 class="popover-title">Popover left</h3>
                  <div class="popover-content">
                    <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Forms
      ================================================== -->
      <div class="example">
        <div class="row">
          <div class="col-md-12">
            <h2 class="example-title">Forms</h2>
            <div class="row">
              <div class="col-md-6">
                <input type="text" class="form-control" placeholder="Text input">
              </div>
              <div class="col-md-6">
                <input type="text" class="form-control" disabled placeholder="Text input">
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <textarea class="form-control" rows="3"></textarea>
              </div>
              <div class="col-md-6">
                <div class="row">
                  <div class="col-md-12">
                    <div class="input-group">
                      <span class="input-group-addon">$</span>
                      <input type="text" class="form-control">
                      <span class="input-group-addon">.00</span>
                    </div>
                  </div>
                  <div class="col-md-12">
                    <div class="input-group">
                      <div class="input-group-btn">
                        <button type="button" class="btn btn-danger" tabindex="-1">Action</button>
                        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                          <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                          <li><a href="#">Action</a></li>
                          <li><a href="#">Another action</a></li>
                          <li><a href="#">Something else here</a></li>
                          <li class="divider"></li>
                          <li><a href="#">Separated link</a></li>
                        </ul>
                      </div>
                      <input type="text" class="form-control">
                      <div class="input-group-btn">
                        <button type="button" class="btn btn-primary" tabindex="-1">Action</button>
                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                          <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                          <li><a href="#">Action</a></li>
                          <li><a href="#">Another action</a></li>
                          <li><a href="#">Something else here</a></li>
                          <li class="divider"></li>
                          <li><a href="#">Separated link</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-search search-only">
                  <i class="search-icon glyphicon glyphicon-search"></i>
                  <input type="text" class="form-control search-query">
                </div>
              </div>
              <div class="col-md-6">
                <div class="input-group form-search">
                  <input type="text" class="form-control search-query">
                  <span class="input-group-btn">
                    <button type="submit" class="btn btn-primary" data-type="last">Search</button>
                  </span>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-4">
                <div class="form-group has-success has-feedback">
                  <label class="control-label" for="inputSuccess2">Input with success</label>
                  <input type="text" class="form-control" id="inputSuccess2">
                  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group has-warning has-feedback">
                  <label class="control-label" for="inputWarning2">Input with warning</label>
                  <input type="text" class="form-control" id="inputWarning2">
                  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group has-error has-feedback">
                  <label class="control-label" for="inputError2">Input with error</label>
                  <input type="text" class="form-control" id="inputError2">
                  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Checkboxes and Radios
      ================================================== -->
      <div class="example">
        <h2 class="example-title">Checkboxes and Radios <span>(<b>How to use</b>: https://github.com/fronteed/iCheck/)</span></h2>
        <div class="row">
          <div class="col-md-6">
            <div class="row">
              <div class="col-md-6">
                <div class="checkbox">
                  <input type="checkbox" id="flat-checkbox-1">
                  <label for="flat-checkbox-1">default</label>
                </div>
              </div>
              <div class="col-md-6">
                <div class="checkbox">
                  <input type="checkbox" id="flat-checkbox-2" checked>
                  <label for="flat-checkbox-2">checked</label>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="checkbox">
                  <input type="checkbox" id="flat-checkbox-3" disabled>
                  <label for="flat-checkbox-3">disabled</label>
                </div>
              </div>
              <div class="col-md-6">
                <div class="checkbox">
                  <input type="checkbox" id="flat-checkbox-4" checked disabled>
                  <label for="flat-checkbox-4">checked & disabled</label>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="row">
              <div class="col-md-6">
                <div class="radio">
                  <input type="radio" id="flat-radio-1">
                  <label for="flat-radio-1">default</label>
                </div>
              </div>
              <div class="col-md-6">
                <div class="radio">
                  <input type="radio" id="flat-radio-2" checked>
                  <label for="flat-radio-2">checked</label>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="radio">
                  <input type="radio" id="flat-radio-3" disabled>
                  <label for="flat-radio-3">disabled</label>
                </div>
              </div>
              <div class="col-md-6">
                <div class="radio">
                  <input type="radio" id="flat-radio-4" checked disabled>
                  <label for="flat-radio-4">checked & disabled</label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Alerts
      ================================================== -->
      <div class="example">
        <h2 class="example-title">Alerts</h2>
        <div class="row">
          <div class="col-md-6">
            <div class="alert alert-warning alert-dismissable">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              <strong>Warning!</strong> Best check yo self, you're not looking too good.
            </div>
            <div class="alert alert-info alert-dismissable">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              <strong>Well done!</strong> You successfully read this important alert message.
            </div>
          </div>
          <div class="col-md-6">
            <div class="alert alert-success alert-dismissable">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
            </div>
            <div class="alert alert-danger">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              <strong>Oh snap!</strong> Change a few things up and try submitting again.
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="alert alert-warning alert-dismissable">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              <h4>Warning!</h4>
              <p>Change this and that and try again. <a class="alert-link">Duis mollis</a>, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
              <p><a class="btn btn-warning" href="#">Take this action</a> <a class="btn btn-link" href="#">Or do this</a></p>
            </div>
            <div class="alert alert-info">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              <h4>Well done!</h4>
              <p>Change this and that and try again. <a class="alert-link">Duis mollis</a>, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
              <p><a class="btn btn-primary" href="#">Take this action</a> <a class="btn btn-link" href="#">Or do this</a></p>
            </div>
          </div>
          <div class="col-md-6">
            <div class="alert alert-success alert-dismissable">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              <h4>Heads up!</h4>
              <p>Change this and that and try again. <a class="alert-link">Duis mollis</a>, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
              <p><a class="btn btn-success" href="#">Take this action</a> <a class="btn btn-link" href="#">Or do this</a></p>
            </div>
            <div class="alert alert-danger alert-dismissable">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              <h4>Oh snap!</h4>
              <p>Change this and that and try again. <a class="alert-link">Duis mollis</a>, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
              <p><a class="btn btn-danger" href="#">Take this action</a> <a class="btn btn-link" href="#">Or do this</a></p>
            </div>
          </div>
        </div>
      </div>
      <!-- Tabs
      ================================================== -->
      <div class="example">
        <h2 class="example-title">Tabs</h2>
        <div class="row">
          <div class="col-md-6">
            <div class="panel">
              <ul id="myTab1" class="nav nav-tabs nav-justified">
                <li class="active"><a href="#home1" data-toggle="tab">Home</a></li>
                <li><a href="#profile1" data-toggle="tab">Profile</a></li>
                <li class="dropdown">
                  <a href="#" id="myTabDrop1-1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                  <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                    <li><a href="#dropdown1-1" tabindex="-1" data-toggle="tab">@fat</a></li>
                    <li><a href="#dropdown1-2" tabindex="-1" data-toggle="tab">@mdo</a></li>
                  </ul>
                </li>
              </ul>
              <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade active in" id="home1">
                  <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
                </div>
                <div class="tab-pane fade" id="profile1">
                  <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.  </p>
                </div>
                <div class="tab-pane fade" id="dropdown1-1">
                  <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone...</p>
                </div>
                <div class="tab-pane fade" id="dropdown1-2">
                  <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche ... </p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="panel">
              <div class="tabbable tabs-below">
                <div id="myTabContent" class="tab-content">
                  <div class="tab-pane fade active in" id="home2">
                    <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. </p>
                  </div>
                  <div class="tab-pane fade" id="profile2">
                    <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.  </p>
                  </div>
                  <div class="tab-pane fade" id="dropdown2-1">
                    <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone...</p>
                  </div>
                  <div class="tab-pane fade" id="dropdown2-2">
                    <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche ... </p>
                  </div>
                </div>
                <ul id="myTab2" class="nav nav-tabs nav-justified">
                  <li class="active"><a href="#home2" data-toggle="tab">Home</a></li>
                  <li><a href="#profile2" data-toggle="tab">Profile</a></li>
                  <li class="dropdown dropup">
                    <a href="#" id="myTabDrop2-1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                      <li><a href="#dropdown2-1" tabindex="-1" data-toggle="tab">@fat</a></li>
                      <li><a href="#dropdown2-2" tabindex="-1" data-toggle="tab">@mdo</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="panel">
              <div class="tabbable tabs-left clearfix">
                <ul id="myTab1" class="nav nav-tabs">
                  <li class="active"><a href="#home3" data-toggle="tab">Home</a></li>
                  <li><a href="#profile3" data-toggle="tab">Profile</a></li>
                  <li><a href="#myTabDrop3" data-toggle="tab">Dropdown</a></li>
                </ul>
                <div id="myTabContent" class="tab-content">
                  <div class="tab-pane fade active in" id="home3">
                    <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
                  </div>
                  <div class="tab-pane fade" id="profile3">
                    <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.  </p>
                  </div>
                  <div class="tab-pane fade" id="myTabDrop3">
                    <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone...</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="panel">
              <div class="tabbable tabs-right clearfix">
                <ul id="myTab1" class="nav nav-tabs">
                  <li class="active"><a href="#home4" data-toggle="tab">Home</a></li>
                  <li><a href="#profile4" data-toggle="tab">Profile</a></li>
                  <li><a href="#myTabDrop4" data-toggle="tab">Dropdown</a></li>
                </ul>
                <div id="myTabContent" class="tab-content">
                  <div class="tab-pane fade active in" id="home4">
                    <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
                  </div>
                  <div class="tab-pane fade" id="profile4">
                    <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.  </p>
                  </div>
                  <div class="tab-pane fade" id="myTabDrop4">
                    <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone...</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Navbars
      ================================================== -->
      <div class="example">
        <h2 class="example-title">Navbars</h2>
        <div class="row">
          <div class="col-md-6">
            <div class="row">
              <div class="col-md-12">
                <nav class="navbar navbar-default" role="navigation">
                  <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                      <a class="navbar-brand" href="#">Bootflat</a>
                    </div>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                      <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Link</a></li>
                        <!-- <li class="disabled"><a href="#">Link</a></li> -->
                        <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                          <ul class="dropdown-menu" role="menu">
                            <li class="dropdown-header">Setting</li>
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li class="active"><a href="#">Separated link</a></li>
                            <li class="divider"></li>
                            <li class="disabled"><a href="#">One more separated link</a></li>
                          </ul>
                        </li>
                      </ul>
                      <form class="navbar-form navbar-right" role="search">
                        <div class="form-search search-only">
                          <i class="search-icon glyphicon glyphicon-search"></i>
                          <input type="text" class="form-control search-query">
                        </div>
                      </form>
                    </div><!-- /.navbar-collapse -->
                  </div><!-- /.container-fluid -->
                </nav>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <nav class="navbar navbar-default" role="navigation">
                  <div class="container-fluid">
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                      <a class="navbar-brand" href="#">Bootflat</a>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
                      <p class="navbar-text">Signed in as Mark Otto</p>
                    </div>
                  </div>
                </nav>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <nav class="navbar navbar-default" role="navigation">
                  <div class="container-fluid">
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                      <a class="navbar-brand" href="#">Bootflat</a>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-3">
                      <p class="navbar-text navbar-right"><a class="navbar-link" href="">Signed in as Mark Otto</a></p>
                    </div>
                  </div>
                </nav>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <nav class="navbar navbar-default" role="navigation">
                  <div class="container-fluid">
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                      <a class="navbar-brand" href="#">Bootflat</a>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-4">
                      <button type="button" class="btn btn-warning navbar-btn">Sign in</button>
                    </div>
                  </div>
                </nav>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="row">
              <div class="col-md-12">
                <nav class="navbar navbar-inverse" role="navigation">
                  <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                      <a class="navbar-brand" href="#">Bootflat</a>
                    </div>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-5">
                      <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Link</a></li>
                        <!-- <li class="disabled"><a href="#">Link</a></li> -->
                        <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                          <ul class="dropdown-menu" role="menu">
                            <li class="dropdown-header">Setting</li>
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li class="active"><a href="#">Separated link</a></li>
                            <li class="divider"></li>
                            <li class="disabled"><a href="#">One more separated link</a></li>
                          </ul>
                        </li>
                      </ul>
                      <form class="navbar-form navbar-right" role="search">
                        <div class="form-search search-only">
                          <i class="search-icon glyphicon glyphicon-search"></i>
                          <input type="text" class="form-control search-query">
                        </div>
                      </form>
                    </div><!-- /.navbar-collapse -->
                  </div><!-- /.container-fluid -->
                </nav>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <nav class="navbar navbar-inverse" role="navigation">
                  <div class="container-fluid">
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                      <a class="navbar-brand" href="#">Bootflat</a>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6">
                      <p class="navbar-text">Signed in as Mark Otto</p>
                    </div>
                  </div>
                </nav>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <nav class="navbar navbar-inverse" role="navigation">
                  <div class="container-fluid">
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-7">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                      <a class="navbar-brand" href="#">Bootflat</a>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-7">
                      <p class="navbar-text navbar-right"><a class="navbar-link" href="">Signed in as Mark Otto</a></p>
                    </div>
                  </div>
                </nav>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <nav class="navbar navbar-inverse" role="navigation">
                  <div class="container-fluid">
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                      <a class="navbar-brand" href="#">Bootflat</a>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8">
                      <button type="button" class="btn btn-danger navbar-btn">Sign in</button>
                    </div>
                  </div>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Pills, Breadcrumbs, Progresses, Paginations and Pagers
      ================================================== -->
      <div class="example">
        <div class="row">
          <div class="col-md-6">
            <h2 class="example-title">Pills</h2>
            <div class="row">
              <div class="col-md-12">
                <ul class="nav nav-pills nav-justified">
                  <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
                  <li><a href="#">Profile <span class="badge badge-danger">42</span></a></li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">@fat</a></li>
                      <li><a href="#">@mdo</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
              <div class="col-md-12">
                <ul id="myTab2" class="nav nav-pills nav-stacked">
                  <li class="active"><a href="#">Home <span class="badge pull-right">42</span></a></li>
                  <li><a href="#">Profile</a></li>
                  <li class="dropdown"><a href="#">Messages <span class="badge badge-danger pull-right">20</span></a></li>
                </ul>
              </div>
            </div>
            <h2 class="example-title">Breadcrumbs</h2>
            <div class="row">
              <div class="col-md-12">
                <ol class="breadcrumb">
                  <li><a href="#">Home</a></li>
                  <li><a href="#">Library</a></li>
                  <li class="active">Data</li>
                </ol>
              </div>
              <div class="col-md-12">
                <ol class="breadcrumb breadcrumb-arrow">
                  <li><a href="#">Home</a></li>
                  <li><a href="#">Library</a></li>
                  <li class="active"><span>Data</span></li>
                </ol>
              </div>
              <div class="col-md-12">
                <ol class="breadcrumb breadcrumb-arrow">
                  <li><a href="#"><i class="glyphicon glyphicon-home"></i> Home</a></li>
                  <li><a href="#"><i class="glyphicon glyphicon-list-alt"></i> Library</a></li>
                  <li class="active"><span><i class="glyphicon glyphicon-calendar"></i> Data</span></li>
                </ol>
              </div>
            </div>
            <h2 class="example-title">Paginations</h2>
            <div class="row example-pagination">
              <div class="col-md-12">
                <ul class="pagination">
                  <li class="active"><a href="#">PREV</a></li>
                  <li><a href="#">1</a></li>
                  <li class="active"><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li class="disabled"><a href="#">5</a></li>
                  <li class="active"><a href="#">NEXT</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <h2 class="example-title">Progresses</h2>
            <div class="row example-progress">
              <div class="col-md-12">
                <div class="progress">
                  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60%</div>
                </div>
              </div>
              <div class="col-md-12">
                <div class="progress">
                  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                    <span class="sr-only">40% Complete (success)</span>
                  </div>
                </div>
              </div>
              <div class="col-md-12">
                <div class="progress">
                  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                    <span class="sr-only">20% Complete</span>
                  </div>
                </div>
              </div>
              <div class="col-md-12">
                <div class="progress">
                  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                    <span class="sr-only">60% Complete (warning)</span>
                  </div>
                </div>
              </div>
              <div class="col-md-12">
                <div class="progress">
                  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                    <span class="sr-only">80% Complete</span>
                  </div>
                </div>
              </div>
              <div class="col-md-12">
                <div class="progress progress-striped active">
                  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                    <span class="sr-only">40% Complete (success)</span>
                  </div>
                </div>
              </div>
              <div class="col-md-12">
                <div class="progress progress-striped active">
                  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                    <span class="sr-only">20% Complete</span>
                  </div>
                </div>
              </div>
              <div class="col-md-12">
                <div class="progress progress-striped active">
                  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                    <span class="sr-only">60% Complete (warning)</span>
                  </div>
                </div>
              </div>
              <div class="col-md-12">
                <div class="progress progress-striped active">
                  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                    <span class="sr-only">80% Complete (danger)</span>
                  </div>
                </div>
              </div>
            </div>
            <h2 class="example-title">Pagers</h2>
            <div class="row example-pagination">
              <div class="col-md-12">
                <ul class="pager">
                  <li class="previous"><a href="#">Previous</a></li>
                  <li class="next disabled"><a href="#">Next</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Accordions
      ================================================== -->
      <div class="example">
        <h2 class="example-title">Accordions</h2>
        <div class="row">
          <div class="col-md-6">
            <div class="panel-group" id="accordion1">
              <div class="panel">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
                      Collapsible Group Item #1
                    </a>
                  </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in">
                  <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div>
                </div>
              </div>
              <div class="panel">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
                      Collapsible Group Item #2
                    </a>
                  </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse">
                  <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div>
                </div>
              </div>
              <div class="panel">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion1" href="#collapseThree">
                      Collapsible Group Item #3
                    </a>
                  </h4>
                </div>
                <div id="collapseThree" class="panel-collapse collapse">
                  <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="panel-group panel-group-lists" id="accordion2">
              <div class="panel">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
                      Collapsible Group Item #1
                    </a>
                  </h4>
                </div>
                <div id="collapseFour" class="panel-collapse collapse in">
                  <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div>
                </div>
              </div>
              <div class="panel">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion2" href="#collapseFive">
                      Collapsible Group Item #2
                    </a>
                  </h4>
                </div>
                <div id="collapseFive" class="panel-collapse collapse">
                  <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div>
                </div>
              </div>
              <div class="panel">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion2" href="#collapseSix">
                      Collapsible Group Item #3
                    </a>
                  </h4>
                </div>
                <div id="collapseSix" class="panel-collapse collapse">
                  <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Lists
      ================================================== -->
      <div class="example">
        <h2 class="example-title">Lists</h2>
        <div class="row">
          <div class="col-md-6">
            <ul class="list-group">
              <li class="list-group-item"><span class="badge">14</span>Cras justo odio</li>
              <li class="list-group-item"><span class="badge badge-default">91</span>Dapibus ac facilisis in</li>
              <li class="list-group-item"><span class="badge badge-primary">38</span>Morbi leo risus</li>
              <li class="list-group-item"><span class="badge badge-success">56</span>Porta ac consectetur ac</li>
              <li class="list-group-item"><span class="badge badge-warning">20</span>Vestibulum at eros</li>
              <li class="list-group-item"><span class="badge badge-danger">99+</span>Dapibus ac facilisis in</li>
            </ul>
          </div>
          <div class="col-md-6">
            <div class="list-group">
              <a href="#" class="list-group-item list-group-item-primary">facilisis in</a>
              <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
              <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
              <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
              <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="list-group">
              <a href="#" class="list-group-item active">Cras justo odio</a>
              <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
              <a href="#" class="list-group-item">Morbi leo risus</a>
              <a href="#" class="list-group-item">Porta ac consectetur ac</a>
              <a href="#" class="list-group-item">Vestibulum at eros</a>
              <a href="#" class="list-group-item"><span class="badge badge-primary">38</span>Morbi leo risus</a>
            </div>
          </div>
          <div class="col-md-6">
            <div class="list-group">
              <a href="#" class="list-group-item active">
                <h4 class="list-group-item-heading">List group item heading</h4>
                <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
              </a>
              <a href="#" class="list-group-item">
                <h4 class="list-group-item-heading">List group item heading</h4>
                <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
              </a>
              <a href="#" class="list-group-item">
                <h4 class="list-group-item-heading">List group item heading</h4>
                <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- Jumbotron
      ================================================== -->
      <div class="example">
        <h2 class="example-title">Jumbotron</h2>
        <div class="row">
          <div class="col-md-6">
            <div class="jumbotron">
              <div class="jumbotron-photo"><img src="img/Jumbotron.jpg" /></div>
              <div class="jumbotron-contents">
                <h1>Implementing the HTML and CSS into your user interface project</h1>
                <h2>HTML Structure</h2>
                <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                <h2>CSS Structure</h2>
                <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="jumbotron">
              <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                  <div class="item active"><img src="img/slider1.jpg"></div>
                  <div class="item"><img src="img/slider2.jpg"></div>
                  <div class="item"><img src="img/slider3.jpg"></div>
                </div>
                <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                  <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                  <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
              </div>
              <div class="jumbotron-contents">
                <h1>Implementing the HTML and CSS into your user interface project</h1>
                <h2>HTML Structure</h2>
                <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                <h2>CSS Structure</h2>
                <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Thumbnails
      ================================================== -->
      <div class="example">
        <h2 class="example-title">Thumbnails</h2>
        <div class="row">
            <div class="col-sm-6 col-md-3">
              <div class="thumbnail">
                <img class="img-rounded" data-src="holder.js/300x200/new" alt="300x200" src="" style="width: 300px; height: 200px; ">
                <div class="caption text-center">
                  <h3>Thumbnail label</h3>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id ...</p>
                  <p><a href="#" class="btn btn-warning" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-md-3">
              <div class="thumbnail">
                <img class="img-rounded" data-src="holder.js/300x200/new" alt="300x200" src="" style="width: 300px; height: 200px; ">
                <div class="caption text-center">
                  <h3>Thumbnail label</h3>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id ...</p>
                  <p><a href="#" class="btn btn-warning" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-md-3">
              <div class="thumbnail">
                <img class="img-rounded" data-src="holder.js/300x200/new" alt="300x200" src="" style="width: 300px; height: 200px; ">
                <div class="caption text-center">
                  <h3>Thumbnail label</h3>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id ...</p>
                  <p><a href="#" class="btn btn-warning" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-md-3">
              <div class="thumbnail">
                <img class="img-rounded" data-src="holder.js/300x200/new" alt="300x200" src="" style="width: 300px; height: 200px; ">
                <div class="caption text-center">
                  <h3>Thumbnail label</h3>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id ...</p>
                  <p><a href="#" class="btn btn-warning" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
              </div>
            </div>
          </div>
      </div>
      <!-- Modals and Wells
      ================================================== -->
      <div class="example">
        <div class="row example-modal">
          <div class="col-md-6">
            <h2 class="example-title">Modals</h2>
            <div class="modal">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Contact</h4>
                  </div>
                  <div class="modal-body">
                    <p>Feel free to contact us for any issues you might have with our products.</p>
                    <div class="row">
                      <div class="col-xs-6">
                        <label>Name</label>
                        <input type="text" class="form-control" placeholder="Name">
                      </div>
                      <div class="col-xs-6">
                        <label>Email</label>
                        <input type="text" class="form-control" placeholder="Email">
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-xs-12">
                        <label>Message</label>
                        <textarea class="form-control" rows="3">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac</textarea>
                      </div>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-success">Send</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <h2 class="example-title">Wells</h2>
            <div class="well">Look, I'm in a well!</div>
          </div>
        </div>
      </div>
      <!-- Panels
      ================================================== -->
      <div class="example">
        <h2 class="example-title">Panels</h2>
        <div class="row">
          <div class="col-md-6">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
              </div>
              <div class="panel-body">
                Panel content
              </div>
            </div>
            <div class="panel panel-primary">
              <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
              </div>
              <div class="panel-body">
                Panel content
              </div>
            </div>
            <div class="panel panel-success">
              <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
              </div>
              <div class="panel-body">
                Panel content
              </div>
            </div>
            <div class="panel panel-warning">
              <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
              </div>
              <div class="panel-body">
                Panel content
              </div>
            </div>
            <div class="panel panel-info">
              <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
              </div>
              <div class="panel-body">
                Panel content
              </div>
            </div>
            <div class="panel panel-danger">
              <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
              </div>
              <div class="panel-body">
                Panel content
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="panel panel-default">
              <div class="panel-heading">Panel heading</div>
              <table class="table">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>1</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">Panel heading</div>
              <div class="panel-body">
                <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              </div>
              <ul class="list-group">
                <li class="list-group-item">Cras justo odio</li>
                <li class="list-group-item">Dapibus ac facilisis in</li>
                <li class="list-group-item">Morbi leo risus</li>
                <li class="list-group-item">Porta ac consectetur ac</li>
                <li class="list-group-item">Vestibulum at eros</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- Media Lists
      ================================================== -->
      <div class="example">
        <div class="row">
          <div class="col-md-12">
            <h2 class="example-title">Media list</h2>
            <ul class="media-list">
              <li class="media">
                <a class="pull-left" href="#"><img class="media-object img-rounded" data-src="holder.js/64x64/new" alt="64x64" src="" style="width: 64px; height: 64px; "></a>
                <div class="media-body">
                  <h4 class="media-heading">Media heading</h4>
                  <p>12 Apr, 2013 at 12:00</p>
                  <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
                  <!-- Nested media object -->
                  <div class="media">
                    <a class="pull-left" href="#"><img class="media-object img-rounded" data-src="holder.js/64x64/new" alt="64x64" src="" style="width: 64px; height: 64px; "></a>
                    <div class="media-body">
                      <h4 class="media-heading">Nested media heading</h4>
                      <p>12 Apr, 2013 at 12:10</p>
                      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
                      <!-- Nested media object -->
                      <div class="media">
                        <a class="pull-left" href="#"><img class="media-object img-rounded" data-src="holder.js/64x64/new" alt="64x64" src="" style="width: 64px; height: 64px; "></a>
                        <div class="media-body">
                          <h4 class="media-heading">Nested media heading</h4>
                          <p>12 Apr, 2013 at 12:20</p>
                          <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- Nested media object -->
                  <div class="media">
                    <a class="pull-left" href="#"><img class="media-object img-rounded" data-src="holder.js/64x64/new" alt="64x64" src="" style="width: 64px; height: 64px; "></a>
                    <div class="media-body">
                      <h4 class="media-heading">Nested media heading</h4>
                      <p>12 Apr, 2013 at 12:30</p>
                      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
                    </div>
                  </div>
                </div>
              </li>
              <li class="media">
                <a class="pull-right" href="#"><img class="media-object img-rounded" data-src="holder.js/64x64/new" alt="64x64" src="" style="width: 64px; height: 64px; "></a>
                <div class="media-body">
                  <h4 class="media-heading">Media heading</h4>
                  <p>12 Apr, 2013 at 12:50</p>
                  <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- Footer
      ================================================== -->
      <div class="example">
        <h2 class="example-title">Footers</h2>
        <div class="row">
          <div class="col-md-12">
            <div class="footer">
              <div class="container">
                <div class="clearfix">
                  <div class="footer-logo"><a href="#"><img src="img/footer-logo.png" />Bootflat</a></div>
                  <dl class="footer-nav">
                    <dt class="nav-title">PORTFOLIO</dt>
                    <dd class="nav-item"><a href="#">Web Design</a></dd>
                    <dd class="nav-item"><a href="#">Branding &amp; Identity</a></dd>
                    <dd class="nav-item"><a href="#">Mobile Design</a></dd>
                    <dd class="nav-item"><a href="#">Print</a></dd>
                    <dd class="nav-item"><a href="#">User Interface</a></dd>
                  </dl>
                  <dl class="footer-nav">
                    <dt class="nav-title">ABOUT</dt>
                    <dd class="nav-item"><a href="#">The Company</a></dd>
                    <dd class="nav-item"><a href="#">History</a></dd>
                    <dd class="nav-item"><a href="#">Vision</a></dd>
                  </dl>
                  <dl class="footer-nav">
                    <dt class="nav-title">GALLERY</dt>
                    <dd class="nav-item"><a href="#">Flickr</a></dd>
                    <dd class="nav-item"><a href="#">Picasa</a></dd>
                    <dd class="nav-item"><a href="#">iStockPhoto</a></dd>
                    <dd class="nav-item"><a href="#">PhotoDune</a></dd>
                  </dl>
                  <dl class="footer-nav">
                    <dt class="nav-title">CONTACT</dt>
                    <dd class="nav-item"><a href="#">Basic Info</a></dd>
                    <dd class="nav-item"><a href="#">Map</a></dd>
                    <dd class="nav-item"><a href="#">Conctact Form</a></dd>
                  </dl>
                </div>
                <div class="footer-copyright text-center">Copyright &copy; 2014 Flathemes.All rights reserved.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Typography
      ================================================== -->
      <div class="example">
        <h2 class="example-title">Typography</h2>
        <div class="row">
          <div class="col-md-12">
              <div class="example-typography">
                <h1><span class="heading-note">Header 1</span>Showers across the W</h1>
              </div>
              <div class="example-typography">
                <h1><span class="heading-note">Header 1</span>Showers across the W</h1>
              </div>
              <div class="example-typography">
                <h2><span class="heading-note">Header 2</span>Give this quartet a few</h2>
              </div>
              <div class="example-typography">
                <h3><span class="heading-note">Header 3</span>The Vatican transitions to a</h3>
              </div>
              <div class="example-typography">
                <h4><span class="heading-note">Header 4</span>Great American Bites: Telluride's Oak, The</h4>
              </div>
              <div class="example-typography">
                <h5><span class="heading-note">Header 5</span>Author Diane Alberts loves her some good</h5>
              </div>
              <div class="example-typography">
                <h6><span class="heading-note">Header 6</span>With the success of young-adult book-to-movie</h6>
              </div>
              <div class="example-typography">
                <span class="text-note">Paragraph</span>
                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <strong>Donec ullamcorper</strong> nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
              </div>
              <div class="example-typography">
                <span class="text-note">Image</span>
                <img src="img/slider1.jpg" alt="exaple-image" class="img-rounded img-responsive">
                <p class="img-comment"><strong>Note:</strong> gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
              </div>
              <div class="example-typography">
                <span class="text-note">Lead Text</span>
                <p class="lead">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
              </div>
              <div class="example-typography">
                <span class="text-note">Quote</span>
                <blockquote>
                  <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus.</p>
                  <small>Steve Jobs, CEO Apple</small>
                </blockquote>
              </div>
              <div class="example-typography">
                <span class="text-note">Small Font</span>
                <p><small>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</small></p>
              </div>
          </div>
        </div>
      </div>
    </div>
    <!--footer-->
    <div class="site-footer">
      <div class="container">
        <div class="download">
          <span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
          <a class="btn" href="documentation.html">Read the Documentation</a>
        </div>
        <hr class="dashed" />
        <div class="row">
          <div class="col-md-4">
            <h3>Get involved</h3>
            <p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
          </div>
          <div class="col-md-4">
            <h3>Contribute</h3>
            <p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/Bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
          </div>
          <div class="col-md-4">
            <h3>Found a bug?</h3>
            <p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
          </div>
        </div>
        <hr class="dashed" />
        <div class="row">
          <div class="col-md-6">
            <h3>Talk to us</h3>
            <ul>
              <li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li>
              <li>
                <a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
                <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
                <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
                <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
              </li>
            </ul>
          </div>
          <div class="col-md-6">
            <!-- Begin MailChimp Signup Form -->
            <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
            <div id="mc_embed_signup">
            <h3 style="margin-bottom: 15px;">Newsletter</h3>
            <form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                <input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
                <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
            </form>
            </div>
            <!--End mc_embed_signup-->
          </div>
        </div>
        <hr class="dashed" />
        <div class="copyright clearfix">
          <p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a><!-- &nbsp;&bull;&nbsp;<a href="examples/">Examples</a> --></p>
          <p>&copy; 2014 FLATHEMES, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
        </div>
      </div>
    </div>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-48721682-1', 'bootflat.github.io');
      ga('send', 'pageview');

    </script>
  </body>
</html>