<!-- CORE TYPOGRAPHY
=======================================================-->
<div class="docs-section">

<div class="page-header">
  <h1 id="example-type">Core Typography</h1>
</div>

<!-- Headings -->
<div class="row example-row example-type">

  <div class="col-lg-6">
    <h1>h1. Heading <small>Secondary text</small></h1>
    <h2>h2. Heading <small>Secondary text</small></h2>
    <h3>h3. Heading <small>Secondary text</small></h3>
    <h4>h4. Heading <small>Secondary text</small></h4>
    <h5>h5. Heading <small>Secondary text</small></h5>
    <h6>h6. Heading <small>Secondary text</small></h6>
    <div class="alert alert-warning">
      <p><strong>TIPS:</strong>  Create lighter, secondary text in any heading with a generic <code>&lt;small&gt;</code> tag or the <code>.small</code> class.</p>
    </div>
  </div>

  <div class="col-lg-6">
    <h2>Example body text</h2>
    <p class="lead">This is a <strong>lead paragraph</strong>. Make a paragraph stand out by adding <code>.lead</code>.</p>
    <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.</p>
    <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
    <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
    <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
    <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
  </div>

</div>  
<!-- //Headings -->

<!-- Address & Emphasis -->
<div class="row example-row example-type">

  <div class="col-lg-4">
    <h2>Address</h2>
    <address>
      <strong>Company Name</strong><br />
      795 Folsom Ave, Suite 600<br />
      San Francisco, CA 94107<br />
      <abbr title="Phone">P:</abbr> (123) 456-7890
    </address>
    <address>
      <strong>Full Name</strong><br />
      <abbr title="Phone">P:</abbr> (123) 456-7890<br />
      <a href="mailto:#">first.last@example.com</a>
    </address>
  </div>

  <div class="col-lg-4">
    <h2>Emphasis classes</h2>
    <p class="text-muted">This is a <code>.mute</code> paragraph.</p>
    <p class="text-primary">This is a <code>.text-primary</code> paragraph.</p>
    <p class="text-warning">This is a <code>.text-warning</code> paragraph.</p>
    <p class="text-danger">This is a <code>.text-danger</code> paragraph.</p>
    <p class="text-success">This is a <code>.text-success</code> paragraph.</p>
    <p class="text-info">This is a <code>.text-info</code> paragraph.</p>
  </div>

  <div class="col-lg-4">
    <h2>Alignment classes</h2>
    <p class="text-left">This is a left aligned text <code>.text-left</code></p>
    <p class="text-center">This is a center aligned text <code>.text-center</code></p>
    <p class="text-right">This is a right aligned text <code>.text-right</code></p>
    <p class="text-justify">This is a justify aligned text which is often used in Book Design, Magazine or special Typo Pages.
    Create a justify aligned text with <code>.text-justify</code> class.</p>
  </div>

</div>
<!-- //Address & Emphasis -->

<!-- Blockquotes -->
<h2>Blockquotes</h2>

<div class="row example-row example-type">

  <div class="col-lg-12">
    <div class="well">
      <blockquote class="text-jutify" style="margin-bottom: 0;">
        <p>This is a <code>&lt;blockquote&gt;</code> in a <code>&lt;.well&gt;</code>.</p>
        <small>Quote's author in <cite title="Source Title">Source Title</cite></small>
      </blockquote>
    </div>
  </div>

</div>

<div class="row example-row example-type">

  <div class="col-lg-6">
    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <small>Quote's author in <cite title="Source Title">Source Title</cite></small>
    </blockquote>
  </div>

  <div class="col-lg-6">
    <blockquote class="pull-right">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <small>Quote's author in <cite title="Source Title">Source Title</cite></small>
    </blockquote>
  </div>

</div>
<!-- //Blockquotes -->

</div>
<!-- //CORE TYPOGRAPHY -->



<!-- COLOR SWATCHES
=======================================================-->
<div class="docs-section">

<div class="page-header">
  <h1 id="example-colors">Color Swatches</h1>
</div>

<!-- Brand Colors -->
<h2>Brand Colors</h2>

<div class="row example-row example-colors">

  <div class="col-xs-5 col-md-4 col-lg-2">
    <div class="swatch-item color-brand-primary">
      <dl>
        <dt>#0077bb</dt>
        <dd>Brand Primary</dd>
      </dl>
    </div>
  </div>

  <div class="col-xs-5 col-md-4 col-lg-2">
    <div class="swatch-item color-brand-secondary">
      <dl>
        <dt>#669900</dt>
        <dd>Brand Secondary</dd>
      </dl>
    </div>
  </div>

  <div class="col-xs-5 col-md-4 col-lg-2">
    <div class="swatch-item color-brand-warning">
      <dl >
        <dt>#ff8800</dt>
        <dd>Brand Warning</dd>
      </dl>
    </div>
  </div>

  <div class="col-xs-5 col-md-4 col-lg-2">
    <div class="swatch-item color-brand-danger">
      <dl>
        <dt>#cc0000</dt>
        <dd>Brand Danger</dd>
      </dl>
    </div>
  </div>

  <div class="col-xs-5 col-md-4 col-lg-2">
    <div class="swatch-item color-brand-info">
      <dl>
        <dt>#0099cc</dt>
        <dd>Brand Info</dd>
      </dl>
    </div>
  </div>

  <div class="col-xs-5 col-md-4 col-lg-2">
    <div class="swatch-item color-brand-success">
      <dl>
        <dt>#669900</dt>
        <dd>Brand Success</dd>
      </dl>
    </div>
  </div>

</div>
<!-- Brand Colors -->

<!-- Grayscale -->
<h2>Grayscale Levels</h2>

<div class="row example-row example-colors">

  <div class="col-xs-5 col-md-4 col-lg-2">
    <div class="swatch-item color-gray-darker">
      <dl>
        <dt>#222222</dt>
        <dd>Gray Darker</dd>
      </dl>
    </div>
  </div>

  <div class="col-xs-5 col-md-4 col-lg-2">
    <div class="swatch-item color-gray-dark">
      <dl>
        <dt>#444444</dt>
        <dd>Gray Dark</dd>
      </dl>
    </div>
  </div>

  <div class="col-xs-5 col-md-4 col-lg-2">
    <div class="swatch-item color-gray">
      <dl >
        <dt>#666666</dt>
        <dd>Gray</dd>
      </dl>
    </div>
  </div>

  <div class="col-xs-5 col-md-4 col-lg-2">
    <div class="swatch-item color-gray-light">
      <dl>
        <dt>#999999</dt>
        <dd>Gray Light</dd>
      </dl>
    </div>
  </div>

  <div class="col-xs-5 col-md-4 col-lg-2">
    <div class="swatch-item color-gray-lighter">
      <dl>
        <dt>#eeeeee</dt>
        <dd>Gray Lighter</dd>
      </dl>
    </div>
  </div>

  <div class="col-xs-5 col-md-4 col-lg-2">
    <div class="swatch-item color-gray-lightest">
      <dl>
        <dt>#f7f7f7</dt>
        <dd>Gray Lightest</dd>
      </dl>
    </div>
  </div>

</div>
<!-- //Grayscale -->

</div>
<!-- //COLOR SWATCHES -->



<!-- NAVIGATIONS
================================================== -->
<div class="docs-section">

<div class="page-header">
  <h1 id=" example-navigation">Navigations</h1>
</div>

<!-- Horizontal Navbar -->
<div class="row example-row example-navigation">

  <div class="col-lg-12">
    <h2>Horizontal Navbar</h2>
    <nav class="navbar navbar-default" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <i class="fa fa-bars"></i>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link</a></li>
          <li><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">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-right" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
      </div><!-- /.navbar-collapse -->
    </nav>
  </div>

</div>
<!-- //Horizontal Navbar -->

<!-- Tabs & Vertical Menus -->
<div class="row example-row example-navigation">

  <!-- Tabs -->
  <div class="col-lg-8">
    <h2>Tabs</h2>
    <ul class="nav nav-tabs" style="margin-bottom: 15px;">
      <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
      <li><a href="#profile" data-toggle="tab">Profile</a></li>
      <li class="disabled"><a>Disabled</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#dropdown1" data-toggle="tab">Action</a></li>
          <li><a href="#dropdown2" data-toggle="tab">Another action</a></li>
          <li><a href="#dropdown2" data-toggle="tab">Another action</a></li>
        </ul>
      </li>
    </ul>
    <div id="myTabContent" class="tab-content">
      <div class="tab-pane fade active in" id="home">
        <p>In the area of graphical user interfaces (GUI), a <strong>tabbed document interface</strong> (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.</p>
        <p>GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).</p>
      </div>
      <div class="tab-pane fade" id="profile">
        <p>In the area of graphical user interfaces (GUI), a <strong>tabbed document interface</strong> (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.</p>
        <p>GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).</p>
      </div>
      <div class="tab-pane fade" id="dropdown1">
        <p>In the area of graphical user interfaces (GUI), a <strong>tabbed document interface</strong> (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.</p>
        <p>GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).</p>
      </div>
      <div class="tab-pane fade" id="dropdown2">
        <p>In the area of graphical user interfaces (GUI), a <strong>tabbed document interface</strong> (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.</p>
        <p>GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).</p>
      </div>
    </div>
  </div>
  <!-- //Tabs -->

  <!-- Vertical Menus -->
  <div class="col-lg-4">
    <h2>Vertical Menus</h2>
    <ul class="nav nav-pills nav-stacked">
      <li class="active"><a href="#">Active Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li class="disabled"><a href="#">Disabled Menu Item</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          Dropdown <span class="caret"></span>
        </a>
        <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><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- Vertical Menus -->

</div>
<!-- Tabs & Vertical Menus -->

</div>
<!-- //NAVIGATIONS -->



<!-- FORMS
================================================== -->
<div class="docs-section">

<div class="page-header">
  <h1 id="example-forms">Forms</h1>
</div>

<!-- Buttons -->
<h2>Buttons</h2>

<div class="row example-row example-forms example-buttons">

  <div class="col-md-3">
    <a href="#" class="btn btn-block btn-lg btn-default">Default Button</a>
  </div>

  <div class="col-md-3">
    <a href="#" class="btn btn-block btn-lg btn-primary">Primary Button</a>
  </div>

  <div class="col-md-3">
    <a href="#" class="btn btn-block btn-lg btn-success">Success Button</a>
  </div>

  <div class="col-md-3">
    <a href="#" class="btn btn-block btn-lg btn-inverse">Inverse Button</a>
  </div>

</div>

<div class="row example-row example-forms example-buttons">

  <div class="col-md-3">
    <a href="#" class="btn btn-block btn-lg btn-info">Info Button</a>
  </div>

  <div class="col-md-3">
    <a href="#" class="btn btn-block btn-lg btn-warning">Warning Button</a>
  </div>

  <div class="col-md-3">
    <a href="#" class="btn btn-block btn-lg btn-danger">Danger Button</a>
  </div>

  <div class="col-md-3">
    <a href="#" class="btn btn-block btn-lg btn-default disabled">Disabled Button</a>
  </div>

</div>
<!-- //Buttons -->

<!-- Inputs -->
<h2>Inputs</h2>

<div class="row example-row example-forms example-inputs">

  <div class="col-md-3">
    <div class="form-group has-success">
      <label class="control-label" for="inputSuccess">Input success</label>
      <input type="text" class="form-control input-lg" id="inputSuccess">
    </div>
  </div>

  <div class="col-md-3">
    <div class="form-group has-error">
      <label class="control-label" for="inputError">Input error</label>
      <input type="text" class="form-control input-lg" id="inputError">
    </div>
  </div>

  <div class="col-md-3">
    <div class="form-group has-warning">
      <label class="control-label" for="inputWarning">Input warning</label>
      <input type="text" class="form-control input-lg" id="inputWarning">
    </div>
  </div>

  <div class="col-md-3">
    <div class="form-group">
      <label class="control-label" for="disabledInput">Disabled input</label>
      <input class="form-control input-lg" id="disabledInput" type="text" placeholder="Disabled input here..." disabled="">
    </div>
  </div>

</div>
<!-- //Inputs -->

<!-- Example Form -->
<div class="row example-row example-forms">

  <div class="col-lg-12">
    <h2>Sample Basic Form</h2>
    <div class="well">
      <form class="form-horizontal">
        <fieldset>
          <legend>Legend</legend>
          <div class="form-group">
            <label for="inputEmail" class="col-lg-2 control-label">Email</label>
            <div class="col-lg-10">
              <input type="text" class="form-control" id="inputEmail" placeholder="Email">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword" class="col-lg-2 control-label">Password</label>
            <div class="col-lg-10">
              <input type="password" class="form-control" id="inputPassword" placeholder="Password">
              <div class="checkbox">
                <label>
                  <input type="checkbox"> Checkbox
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="textArea" class="col-lg-2 control-label">Textarea</label>
            <div class="col-lg-10">
              <textarea class="form-control" rows="3" id="textArea"></textarea>
              <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
            </div>
          </div>
          <div class="form-group">
            <label class="col-lg-2 control-label">Radios</label>
            <div class="col-lg-10">
              <div class="radio">
                <label>
                  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
                  Option one is this
                </label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                  Option two can be something else
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="select" class="col-lg-2 control-label">Selects</label>
            <div class="col-lg-10">
              <select class="form-control" id="select">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
              <br>
              <select multiple="" class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <div class="col-lg-10 col-lg-offset-2">
              <button class="btn btn-default">Cancel</button> 
              <button type="submit" class="btn btn-primary">Submit</button> 
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>

</div>
<!-- //Example Form -->

</div>
<!-- //FORMS -->



<!-- HERO UNITS
=======================================================-->
<div class="docs-section">

<div class="page-header">
  <h1 id="example-herounit">Hero Units</h1>
</div>

<div class="row example-row example-herounit">

  <div class="col-lg-12">
    <div class="jumbotron">
      <h1>Jumbotron</h1>
      <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
      <p><a class="btn btn-primary btn-lg">Call to Action</a></p>
    </div>
    <div class="jumbotron jumbotron-primary">
      <h1>Primary Jumbotron</h1>
      <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
      <p><a class="btn btn-primary btn-lg">Call to Action</a></p>
    </div>
    <div class="jumbotron masthead">
      <h1>Masthead</h1>
      <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
      <p><a class="btn btn-primary btn-lg">Call to Action</a></p>
    </div>
    <div class="jumbotron jumbotron-primary masthead">
      <h1>Primary Masthead</h1>
      <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
      <p><a class="btn btn-primary btn-lg">Call to Action</a></p>
    </div>
  </div>

</div>

</div>
<!-- //HERO UNITS -->



<!-- THUMBNAILS
=======================================================-->
<div class="docs-section">

<div class="page-header">
  <h1 id="example-thumbnails">Thumbnails</h1>
</div>

<!-- Default Thumnails -->
<p class="lead">Extend Bootstrap's <a href="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>

<h2>Default example</h2>
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>

<div class="row example-row example-thumbnails">

  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/100%x180">
    </a>
  </div>

  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/100%x180">
    </a>
  </div>

  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/100%x180">
    </a>
  </div>

  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/100%x180">
    </a>
  </div>

</div>
<!-- //Default Thumnails -->

<!-- Custom Content Thumnails -->
<h2>Custom content</h3>
<p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>

<div class="row example-row example-thumbnails">

  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img data-src="holder.js/100%x220">
      <div class="caption">
        <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 dolor id nibh ultricies vehicula ut id elit.</p>
        <p><a href="#" class="btn btn-primary" 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-4">
    <div class="thumbnail">
      <img data-src="holder.js/100%x220">
      <div class="caption">
        <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 dolor id nibh ultricies vehicula ut id elit.</p>
        <p><a href="#" class="btn btn-primary" 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-4">
    <div class="thumbnail">
      <img data-src="holder.js/100%x220">
      <div class="caption">
        <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 dolor id nibh ultricies vehicula ut id elit.</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>

</div>
<!-- //Custom Content Thumnails -->

</div>



<!-- MEDIA OBJECT
=======================================================-->
<div class="docs-section">

<div class="page-header">
  <h1>Media Object</h1>
</div>

<div class="row example-row example-media">

  <div class="col-lg-12">
    <div class="media">
      <a class="pull-left" href="#">
        <img class="media-object" data-src="holder.js/64x64">
      </a>
      <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
        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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
    <div class="media">
      <a class="pull-left" href="#">
        <img class="media-object" data-src="holder.js/64x64">
      </a>
      <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
        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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        <div class="media">
          <a class="pull-left" href="#">
            <img class="media-object" data-src="holder.js/64x64">
          </a>
          <div class="media-body">
            <h4 class="media-heading">Nested media heading</h4>
            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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
            <div class="media">
              <a class="pull-left" href="#">
                <img class="media-object" data-src="holder.js/64x64">
              </a>
              <div class="media-body">
                <h4 class="media-heading">More nested media heading</h4>
                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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

</div>
<!-- //MEDIA OBJECT -->


<!-- TABLES
================================================== -->
<div class="docs-section">

<div class="page-header">
  <h1 id="example-tables">Tables</h1>
</div>

<!-- Basic Tables -->
<h2>Basic Tables</h2>

<div class="row example-row example-tables">

  <div class="col-lg-6">
    <div class="table-responsive">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>#</th>
            <th>Column heading</th>
            <th>Column heading</th>
            <th>Column heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>5</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>6</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>7</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="col-lg-6">
    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>#</th>
            <th>Column heading</th>
            <th>Column heading</th>
            <th>Column heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>5</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>6</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>7</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</div>
<!-- Basic Tables -->

<!-- Bordered Tables -->
<h2>Bordered Tables</h2>

<div class="row example-row example-tables">

  <div class="col-lg-6">
    <div class="example table-responsive">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>Column heading</th>
            <th>Column heading</th>
            <th>Column heading</th>
          </tr>
        </thead>
        <tbody>
          <tr class="active">
            <td>1</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr class="success">
            <td>3</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr class="warning">
            <td>5</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>6</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr class="danger">
            <td>7</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="col-lg-6">
    <div class="table-responsive">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th>#</th>
            <th>Column heading</th>
            <th>Column heading</th>
            <th>Column heading</th>
          </tr>
        </thead>
        <tbody>
          <tr class="active">
            <td>1</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr class="success">
            <td>3</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr class="warning">
            <td>5</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>6</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr class="danger">
            <td>7</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</div>
<!-- //Bordered Tables -->

</div>
<!-- //TABLES -->



<!-- INDICATORS
================================================== -->
<div class="docs-section">

<div class="page-header">
  <h1 id="example-indicators">Indicators</h1>
</div>

<!-- Alerts -->
<h2>Alerts and Notifications</h2>

<div class="row example-row example-indicators">

  <div class="col-lg-6">
    <div class="alert alert-dismissable alert-danger">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
    </div>
  </div>

  <div class="col-lg-6">
    <div class="alert alert-dismissable alert-success">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
    </div>
  </div>

</div>

<div class="row example-row example-indicators">

  <div class="col-lg-6">
    <div class="alert alert-dismissable alert-info">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
    </div>
  </div>

  <div class="col-lg-6">
    <div class="alert alert-dismissable alert-warning">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      <strong>Warning!</strong> Best check yo self, you're not looking too good.
    </div>
  </div>

</div>
<!-- Alerts -->

<!-- Labels & Badges -->
<div class="row example-row example-indicators">

  <div class="col-lg-6">
    <h2>Badges</h2>
    <div class="example">
      <ul class="nav nav-pills">
        <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
        <li><a href="#">Profile <span class="badge"></span></a></li>
        <li><a href="#">Messages <span class="badge">25</span></a></li>
        <li><a href="#">Notices <span class="badge">2</span></a></li>
        <li><a href="#">Friends <span class="badge">15</span></a></li>
      </ul>
    </div>
  </div>

  <div class="col-lg-6">
    <h2>Labels</h2>
    <div class="example">
      <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>
<!-- Labels & Badges -->

</div>
<!-- //INDICATORS -->



<!-- MISC
================================================== -->
<div class="docs-section">

<div class="page-header">
  <h1 id="example-misc">Other useful components</h1>
</div>

<!-- List Groups -->
<h2>List groups</h2>

<div class="row example-row example-misc">

  <div class="col-lg-4">
    <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">2</span>
        Dapibus ac facilisis in
      </li>
      <li class="list-group-item">
        Morbi leo risus
      </li>
      <li class="list-group-item">
        Morbi leo risus
      </li>
      <li class="list-group-item">
        <span class="badge">1</span>
        Morbi leo risus
      </li>
    </ul>
  </div>

  <div class="col-lg-4">
    <div class="list-group">
      <a href="#" class="list-group-item active"><span class="badge">9</span> 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>
    </div>
  </div>

  <div class="col-lg-4">
    <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.</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.</p>
      </a>
    </div>
  </div>

</div>
<!-- //List Groups -->

<!-- Panels -->
<h2>Panels</h2>

<div class="row example-row example-misc">

  <div class="col-lg-4">        
    <div class="panel panel-default">
      <div class="panel-heading">Panel heading</div>
      <div class="panel-body">
        Panel content
      </div>
    </div>
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">Panel primary</h3>
      </div>
      <div class="panel-body">
        Panel content
      </div>
    </div>
  </div>

  <div class="col-lg-4">
    <div class="panel panel-success">
      <div class="panel-heading">
        <h3 class="panel-title">Panel success</h3>
      </div>
      <div class="panel-body">
        Panel content
      </div>
    </div>
    <div class="panel panel-warning">
      <div class="panel-heading">
        <h3 class="panel-title">Panel warning</h3>
      </div>
      <div class="panel-body">
        Panel content
      </div>
    </div>
  </div>

  <div class="col-lg-4">
    <div class="panel panel-danger">
      <div class="panel-heading">
        <h3 class="panel-title">Panel danger</h3>
      </div>
      <div class="panel-body">
        Panel content
      </div>
    </div>
    <div class="panel panel-info">
      <div class="panel-heading">
        <h3 class="panel-title">Panel info</h3>
      </div>
      <div class="panel-body">
        Panel content
      </div>
    </div>
  </div>

</div>
<!-- //Panels -->

<!-- Wells -->
<h2>Wells</h2>

<div class="row example-row example-misc">

  <div class="col-lg-4">
    <div class="well well-sm">
      Look, I'm in a small well!
    </div>
  </div>

  <div class="col-lg-4">
    <div class="well">
      Look, I'm in a well!
    </div>
  </div>

  <div class="col-lg-4">
    <div class="well well-lg">
      Look, I'm in a large well!
    </div>
  </div>

</div>
<!-- //Wells -->

</div>
<!-- // MISC -->