<div class="btn-group" role="group">
   <button type="button" class="btn btn-primary">Button 1</button>
   <button type="button" class="btn btn-primary">Button 2</button>
   <button type="button" class="btn btn-danger">Button 3</button>
</div>
<div class="btn-group" role="group">
   <button type="button" class="btn btn-info">Another group</button>
   <button type="button" class="btn btn-info">Another 2</button>
</div>

<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-primary">Button 1</button>
<button type="button" class="btn btn-primary">Button 2</button>
<div class="btn-group" role="group"><button type="button" class="btn btn-primary dropdown-toggle" id="octoml-34" data-toggle="dropdown" aria-expanded="false">Dropdown <span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button><ul class="dropdown-menu" role="menu" aria-labelledby="octoml-34">
   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Link 1</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Link 2</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Link 3</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Link 4</a></li>
</ul></div>
<button type="button" class="btn btn-primary">Button 4</button>
</div>

<div class="btn-group btn-group-justified" role="group">
 <div class="btn-group" role="group"><button type="button" class="btn btn-info">Button 1</button></div>
 <div class="btn-group" role="group"><button type="button" class="btn btn-info">Button 2</button></div>
 <div class="btn-group" role="group"><button type="button" class="btn btn-info">Button 3</button></div>
</div>
<div class="btn-group btn-group-justified" role="group">
 <div class="btn-group" role="group"><a role="button" class="btn btn-success">Button 1</a></div>
 <div class="btn-group" role="group"><a role="button" class="btn btn-success">Button 2</a></div>
 <div class="btn-group" role="group"><a role="button" class="btn btn-success">Button 3</a></div>
</div>

<ul class="nav nav-tabs nav-justified">
   <li role="presentation"><a href="#">Tab 1</a></li>
   <li role="presentation"><a href="#">Tab 2</a></li>
   <li role="presentation"><a href="#">Tab 2</a></li>
</ul>
<ul class="nav nav-tabs" vertical="">
   <li role="presentation"><a href="#"><span class="glyphicon glyphicon-fire" aria-hidden="true"></span>Fire Tab</a></li>
   <li role="presentation"><a href="#"><span class="glyphicon glyphicon-phone" aria-hidden="true"></span>Phone Tab</a></li>
   <li role="presentation"><a href="#"><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>Cloud Tab</a></li>
</ul>

<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Pill Alpha (active)</a></li>
<li role="presentation"><a href="#">Pill Beta</a></li>
<li role="presentation" class="dropdown"><a class="dropdown-toggle" type="button" id="octoml-35" data-toggle="dropdown" aria-expanded="false">Pill dropdown <span class="caret"></span><span class="sr-only">Toggle Dropdown</span></a><ul class="dropdown-menu" role="menu" aria-labelledby="octoml-35">
   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Link 1</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Link 2</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Link 3</a></li>
</ul></li>
</ul>

<nav class="navbar navbar-default"><div class="container-fluid"><div class="navbar-header"><button type="button" class="btn btn-default navbar-toggle collapsed" data-toggle="collapse" data-target="#octoml-26" aria-expanded="false" aria-controls="octoml-26"><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="#">Brand</a></div><div id="octoml-26" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
   <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
   <li><a href="#">Link</a></li>
   <li class="dropdown"><a class="dropdown-toggle" type="button" id="octoml-36" data-toggle="dropdown" aria-expanded="false">Dropdown <span class="caret"></span><span class="sr-only">Toggle Dropdown</span></a><ul class="dropdown-menu" role="menu" aria-labelledby="octoml-36">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
      <li class="divider"></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
      <li class="divider"></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">One more separated link</a></li>
   </ul></li>
</ul>
<form class="navbar-form navbar-left" role="search">
   <div class="form-group"><input type="text" placeholder="Search" id="octoml-90" class="form-control"></div>
   <button type="submit" class="btn btn-default">Submit</button>
</form>
<button type="button" class="btn btn-primary navbar-btn">Navbar button</button>
   <ul class="nav navbar-nav active navbar-right "><li class="dropdown"><a class="dropdown-toggle" type="button" id="octoml-37" data-toggle="dropdown" aria-expanded="false">Dropdown <span class="caret"></span><span class="sr-only">Toggle Dropdown</span></a><ul class="dropdown-menu" role="menu" aria-labelledby="octoml-37">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
      <li class="divider"></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
      <li class="divider"></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">One more separated link</a></li>
   </ul></li></ul>
</div></div></nav>

<nav class="navbar navbar-inverse"><div class="container-fluid"><div class="navbar-header"><button type="button" class="btn btn-default navbar-toggle navbar-inverse collapsed" data-toggle="collapse" data-target="#octoml-27" aria-expanded="false" aria-controls="octoml-27"><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="#">Brand</a></div><div id="octoml-27" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
   <li><a href="#">Home</a></li>
   <li><a href="#">Link 1</a></li>
   <li><a href="#">Text?</a></li>
</ul>
<p class="navbar-text navbar-right">Text on the right <a class="navbar-link" href="#">with a link</a></p>
</div></div></nav>

<nav><ul class="pagination">
<li><a aria-label="Previous" href="hello"><span aria-hidden="true">«</span></a></li>
   <li class="active"><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li class="disabled"><a href="#">3</a></li>
   <li><a href="#">4</a></li>
   <li><a href="#">5</a></li>
<li class=""><a aria-label="Next" href="next"><span aria-hidden="true">»</span></a></li>
</ul></nav>
<nav><ul class="pager">
<li><a aria-label="Previous" href="hello"><span aria-hidden="true">«</span></a></li>
<li class=""><a aria-label="Next" href="next"><span aria-hidden="true">»</span></a></li>
</ul></nav>
<nav><ul class="pager">
<li class="previous"><a aria-label="Previous" href="hello"><span aria-hidden="true">Next Page</span></a></li>
<li class="next disabled"><a aria-label="Next" href="next"><span aria-hidden="true">Previous Page (disabled)</span></a></li>
</ul></nav>

<h1>Example label <span class="label label-default">New</span></h1>
<h2>Example label <span class="label label-default">New</span></h2>
<h3>Example label <span class="label label-default">New</span></h3>
<h4>Example label <span class="label label-default">New</span></h4>
<h5>Example label <span class="label label-default">New</span></h5>
<h6>Example label <span class="label label-default">New</span></h6>
<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>

<a href="#">Inbox <span class="badge">42<badge></badge></span></a>
<br><br>
<button type="button" class="btn btn-primary"> Messages <span class="badge">4</span></button>
<br><br>
<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

<div class="jumbotron">
  <h1>Hello, world!</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 role="button" class="btn btn-primary btn-lg" href="#">Learn more</a></p>
</div>

<div class="jumbotron" style="position:relative;">
<div class="hero" style="background:rgba(255,255,255,0.6);padding:20px;">
   <h1>This is a hero unit</h1>
   <h2>Perfectly centered</h2>
   <span class="glyphicon glyphicon-leaf" aria-hidden="true" style="font-size:3em;"></span>
</div>
<img src="img/pic9.jpg" style="width:100%;height:auto;">
</div>

<div class="row">
<div class="col-sm-2 col-md-3"><div class="thumbnail"><img data-src="holder.js/200x200" alt="Placeholder image"></div></div>
<div class="col-sm-2 col-md-3"><div class="thumbnail"><img data-src="holder.js/200x200" alt="Placeholder image"></div></div>
<div class="col-sm-2 col-md-3"><div class="thumbnail"><img data-src="holder.js/200x200" alt="Placeholder image"></div></div>
<div class="col-sm-2 col-md-3"><div class="thumbnail"><img data-src="holder.js/200x200" alt="Placeholder image"></div></div>
</div>

<div class="alert alert-success alert-dismissible fade in" role="alert"><button type="button" class="close" aria-label="Close" data-dismiss="alert"><span aria-hidden="true">×</span></button>Well done! You successfully read this important alert message.</div>
<div class="alert alert-info alert-dismissible fade in" role="alert"><button type="button" class="close" aria-label="Close" data-dismiss="alert"><span aria-hidden="true">×</span></button>Heads up! <a class="alert-link" href="#">This alert</a> needs your attention, but it's not super important.</div>
<div class="alert alert-warning alert-dismissible fade in" role="alert"><button type="button" class="close" aria-label="Close" data-dismiss="alert"><span aria-hidden="true">×</span></button>Warning! Better check yourself, you're not looking too good.</div>
<div class="alert alert-danger alert-dismissible fade in" role="alert"><button type="button" class="close" aria-label="Close" data-dismiss="alert"><span aria-hidden="true">×</span></button>Oh snap! This is an error, still I have a groovy <a class="alert-link" href="#">link</a></div>

<media-list>
   <div class="media"><div class="media-left"><img data-src="holder.js/64x64" alt="Placeholder image" class="media-object"></div><div class="media-body">
      
      <h3>Default Media (left top)</h3>
      <p> Aperiam impedit ad mea, his quot novum id, at eam novum omnesque rationibus. Elit labores ea est, vim ad sanctus pericula concludaturque. Nusquam partiendo scripserit ne has, sed eleifend indoctum at. Molestie reprehendunt usu ut. Sit ei quis quot molestie. Ne eos assum legimus officiis, ex ancillae patrioque intellegam duo..</p>
   </div></div>
   <div class="media"><div class="media-left media-middle"><img data-src="holder.js/64x64" alt="Placeholder image" class="media-object"></div><div class="media-body">
      
      <h3>Middle Media</h3>
      <p> Sonet doming detracto cu mea. Vim no antiopam explicari. Ut eius solum appareat vim, ut dicta singulis indoctum sed, no esse omnis verterem mei. Per at simul graecis lucilius, nec stet brute voluptatibus ad. Vel tale consectetuer ei, his reque impetus in. Ne meis graeco mandamus qui, ad everti probatus.</p>
   </div></div>
   <div class="media"><div class="media-left media-bottom"><img data-src="holder.js/64x64" alt="Placeholder image" class="media-object"></div><div class="media-body">
      
      <h3>Bottom Media</h3>
      <p> Vix constituto signiferumque ex, alia legimus id vim. Has eu nonumy possit patrioque. Usu ne porro congue lobortis. Quo cu esse dolor, mei salutandi tincidunt constituto an, usu ea assum viderer. Ei vel sapientem similique. At dicam senserit eam. Altera labitur lucilius ea nec, soleat nominati ne qui. Ea mel.</p>
   </div></div>
   <div class="media"><div class="media-body">
      
      <h3>Right Media</h3>
      <p> Eam ex enim pertinax, in has vivendum pertinacia, tota utinam usu in. Nibh falli qui et, eum natum causae te, mea tation possit abhorreant te. Labore senserit accusamus cu vim, at his viris utroque. Saepe euripidis referrentur his te, his eu nusquam mandamus. Ignota regione urbanitas nec in, eam id.</p>
   </div><div class="media-right"><img data-src="holder.js/64x64" alt="Placeholder image" class="media-object"></div></div>
</media-list>

   <media-list left="">
   <div class="media"><div class="media-left"><img data-src="holder.js/64x64" alt="Placeholder image" class="media-object"></div><div class="media-body"><p> Cu ubique nusquam sea, duo eu veniam facilisi. Cum aeque laboramus evertitur in, corrumpit ullamcorper mel no. Vidit abhorreant no vel, ius dicta persecuti ne, pri clita impetus bonorum eu. Sea in commodo feugiat quaestio, an per nibh viris facilisis. Vocibus propriae pri ne. Mea et percipit recusabo facilisis, ea.</p></div></div>
   <div class="media"><div class="media-left"><img data-src="holder.js/64x64" alt="Placeholder image" class="media-object"></div><div class="media-body"><p> Ei sit facilisi democritum, alia interesset has ut. Natum laoreet expetendis vim at, audiam sensibus sapientem mei ne. Dictas diceret repudiare ea pro, modus nihil mea ei, ad eam agam vidit. Ex suas unum aperiri sea, dico cibo consectetuer sit at, vix sumo oratio quidam no. Qui et dolores urbanitas..</p>
      <media-list>
         <div class="media"><div class="media-left"><img data-src="holder.js/64x64" alt="Placeholder image" class="media-object"></div><div class="media-body"><p> In has tollit tempor. Abhorreant ullamcorper an mei. Eam brute legere sapientem in, harum volutpat no sea. Ne nec utinam suscipit expetenda. Dicant torquatos ad quo, ius habeo expetendis suscipiantur cu. Ex sea maiorum argumentum, ne eam veri forensibus persequeris. Et est scaevola nominati, te blandit accusamus mei. No nec.</p></div></div>
         <div class="media"><div class="media-left"><img data-src="holder.js/64x64" alt="Placeholder image" class="media-object"></div><div class="media-body"><p> Inani platonem pro te, eum ad sumo definiebas persequeris. Posse dolore salutandi usu ei, nulla persius cu eum. Pro no fabellas scribentur, nam et partiendo elaboraret necessitatibus. Eros gubergren an sit. Lorem ipsum dolor sit amet, sea ea sint minimum eligendi. Ea nisl errem est, ex vel eripuit placerat urbanitas..</p>
            <media-list>
               <div class="media"><div class="media-left"><img data-src="holder.js/64x64" alt="Placeholder image" class="media-object"></div><div class="media-body"><p> Cu diam blandit efficiantur mea, ocurreret laboramus intellegebat cu quo, malis facer graece id mea. Praesent electram duo an, malis elaboraret has ne. Nonumy disputando dissentiet ea eos, ei eos quod case reprimique, an ius sumo nostrud omittam. An vim impetus molestie, vix ipsum exerci delicata ad, elitr laudem rationibus.</p></div></div>
            </media-list>
         </div></div>
         <div class="media"><div class="media-left"><img data-src="holder.js/64x64" alt="Placeholder image" class="media-object"></div><div class="media-body"><p> Ius illud consulatu te, eu veniam soluta detraxit vim, at pri harum omittam. Cu his noster volutpat, vel cu solet delectus atomorum, has audire admodum et. At nam inani everti equidem, ut has regione aliquam. Has habemus mediocrem facilisis id, ferri fuisset efficiendi sea te, ne nam dicit mundi omnes..</p></div></div>
      </media-list>      
   </div></div>
   <div class="media"><div class="media-left"><img data-src="holder.js/64x64" alt="Placeholder image" class="media-object"></div><div class="media-body"><p> Vim stet ipsum iuvaret ut, no nam alterum euismod admodum. Clita prodesset id eam, doctus latine scriptorem qui ne. Eum libris causae diceret eu. In simul accusata sed. Ei sit facilisi democritum, alia interesset has ut. Natum laoreet expetendis vim at, audiam sensibus sapientem mei ne. Dictas diceret repudiare ea.</p></div></div>
</media-list>

<div class="list-group">
   <a class="list-group-item active" href="#"><span class="badge">New</span> Et mea choro appellantur consequuntur, sit inciderint contentiones ei, cum.</a>
   <a class="list-group-item" href="#"><span class="badge">Old</span> Vis nominavi luptatum atomorum ne, te ignota regione nam. Nonumy.</a>
   <a class="list-group-item" href="#"><span class="badge">Antique</span> Vis nominavi luptatum atomorum ne, te ignota regione nam. Nonumy.</a>
   <a class="list-group-item disabled" href="#"><span class="badge">Prehistoric</span> Pro diam persius at, an possim inciderint vel. Te utinam.</a>
</div>

<ul class="list-group">
   <li class="list-group-item active"><span class="badge">Hi There!</span>List item 1</li>
   <li class="list-group-item"><span class="badge">New</span>List item 2</li>
   <li class="list-group-item disabled">List item 3</li>
   <li class="list-group-item"><span class="badge">Old</span>List item 4</li>
   <li class="list-group-item"><span class="badge">Antique</span>List item 5</li>
</ul>

<div class="list-group">
<a class="list-group-item active" href="#"><h4 class="list-group-item-header">Hello World</h4><p class="list-group-item-text" short=""> An qui similique dissentiunt. Et nonumes petentium pro, usu option volumus ne, per no ridens inciderint. Te duo viris senserit volutpat. At periculis sententiae nec. Per illud tamquam splendide ei, ne vix vero tamquam euismod. In has tollit tempor. Abhorreant ullamcorper an mei. Eam brute legere sapientem in, harum volutpat no sea. Ne nec utinam suscipit expetenda. Dicant torquatos ad quo, ius habeo expetendis suscipiantur cu. Ex sea maiorum argumentum, ne eam veri forensibus persequeris. Et est scaevola nominati, te blandit accusamus mei. No nec fuisset pertinacia scriptorem, dicta novum salutatus no his. Quaeque ornatus praesent sit ex. Pro id.</p></a>
<a class="list-group-item" href="#"><h4 class="list-group-item-header">Hello World</h4><p class="list-group-item-text" short=""> Suas zril vitae et cum. Est ne diam viris intellegam. Vim ne alii autem, stet inani tibique ei qui. Sit scaevola adolescens inciderint ad, convenire deseruisse pri at, nisl labores explicari at his. Vel errem similique id, at per pertinax corrumpit complectitur. Iracundia intellegat ad pro, eam affert aliquip antiopam cu. Vis id harum oportere, vel ne nullam sapientem. Vel at everti audiam, ne pro quod verear suscipit, commodo posidonium incorrupte in pro. Duo an hinc nobis hendrerit, amet constituam ex quo. Adhuc laboramus complectitur cu sed, vix illud integre expetenda ad. Et mel meis debitis phaedrum. Sonet doming detracto.</p></a>
<a class="list-group-item disabled" href="#"><h4 class="list-group-item-header">Hello World</h4><p class="list-group-item-text" short=""> Elit docendi conceptam ea vix, id vocent aliquid persecuti eos. Nisl offendit in sea, est quem vitae ne, fastidii appareat accusamus pro an. Per at percipit petentium voluptaria. Ne nec atqui impetus, ius te diam tation everti. Nemore perfecto eu nec, eam adolescens quaerendum in, usu ceteros pertinax ut. His modus melius at, ei vix atqui liber theophrastus. Pri eu zril vivendo, audiam rationibus vituperatoribus no duo, in ullum vivendo duo. Eligendi molestiae eam no, cu feugiat commune reprehendunt per. Tollit numquam per ne, saepe admodum iracundia eu mel, vix at legimus philosophia consequuntur. Quem nusquam no mei, an legendos.</p></a>
</div>

<ul class="list-group">
   <li class="list-group-item list-group-item-success"> Ferri euismod cotidieque et his, id soluta quodsi facilisi eam..</li>
   <li class="list-group-item list-group-item-info"> Vix ex dicta diceret alterum, id accumsan detracto theophrastus nec..</li>
   <li class="list-group-item list-group-item-warning"> Nam ne iuvaret oportere, dolore oporteat ex vis. Adhuc brute.</li>
   <li class="list-group-item list-group-item-danger"> Eu elit intellegam cum, erat bonorum inciderint id per. Magna.</li>
</ul>
<div class="list-group">
   <a class="list-group-item list-group-item-success" href="#"> Graece corrumpit qui no, et deserunt democritum per. Sea te.</a>
   <a class="list-group-item list-group-item-info" href="#"> Et mel meis debitis phaedrum. Sonet doming detracto cu mea..</a>
   <a class="list-group-item list-group-item-warning" href="#"> Nam id summo moderatius. Vel assum impetus et. At habeo.</a>
   <a class="list-group-item list-group-item-danger" href="#"> Dicit iriure postulant no quo, mei id inani minim nostrud,.</a>
</div>