<modal close no-fade lg|sm></modal>

You can create a modal box using the <modal> tag. Add a close attribute to put a × icon into the top right corner, and no-fade to remove the animation. The modal size can be set to large (lg), small (sm) or left as the default size.

In order to refer to the modal later, you'll also need to give it an id. You can launch the modal from a <btn> or <a> using modal="#id"


<btn primary modal="#modal1">Modal Button</btn>
<br><br>
<a modal="#modal1">Modal Link</a>
<modal id="modal1" close>
   <h4>Modal Title</h4>
   <lorem>
   <footer>
      <a btn close>Close</a>
   </footer>
</modal>


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">Modal Button</button>
<br><br>
<a data-toggle="modal" data-target="#modal1">Modal Link</a>
<div class="modal fade" id="modal1" role="dialog" tabindex="-1" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title"><button type="button" class="close" aria-label="Close" data-dismiss="modal"><span aria-hidden="true">×</span></button>Modal Title</h4></div><div class="modal-body">
   
   <p> Audiam persequeris at pri. Ne modo omittantur est. Epicurei vituperatoribus cum id, id vim quot aperiri salutandi. Te pro illum utinam, at eos legimus menandri maluisset. Docendi lucilius mel eu, id mea dicta interpretaris. In electram vituperata vis, corpora consulatu vis an, ut sea quot nostrum vulputate. Nam ne iuvaret oportere, dolore oporteat ex vis. Adhuc brute facilis duo ad, eum eu percipitur signiferumque. An mea justo iuvaret, dolore virtute legimus mel ea, eius posse scriptorem nec ea. Ex dicat minim disputando est, noluisse urbanitas torquatos sed id. In mazim deterruisset sea. Te zril expetenda consulatu his, falli munere mel.</p>
   
</div><div class="modal-footer">
      <a role="button" class="btn btn-default" data-dismiss="modal">Close</a>
   </div></div></div></div>


Modal Link

Inside the <modal>, the first header tag (<h1>-<h6>,<hgroup> or <header>) is set as the modal header. The last <footer> is made into the modal footer.


<btn info modal="#modal2">Large Modal (no fade)</btn>
<modal id="modal2" lg no-fade close>
   <h4>Large Title</h4>
   <lorem>
</modal>
<btn success modal="#modal3">Small Modal</btn>
<modal id="modal3" sm close>
   <lorem>
   <footer>
      Small Modal
   </footer>
</modal>


<button type="button" class="btn btn-info" data-toggle="modal" data-target="#modal2">Large Modal (no fade)</button>
<div class="modal" id="modal2" role="dialog" tabindex="-1" aria-hidden="true"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header"><h4 class="modal-title"><button type="button" class="close" aria-label="Close" data-dismiss="modal"><span aria-hidden="true">×</span></button>Large Title</h4></div><div class="modal-body">
   
   <p> Eu harum tamquam expetendis nam. Primis singulis pro ei, at eam dolores omittam voluptatum, an viris consul causae pri. Vim at sapientem salutandi, id vide fugit scribentur vel. No case signiferumque nam, id atqui prompta detracto vel. Has quot eius scripta in, pri in esse essent, scribentur mediocritatem no nec. Graeco inimicus intellegam cu usu. Vix ne quod volumus deserunt, verear delectus no has. Audire forensibus duo no, wisi reque velit ea mea, ad eirmod bonorum mea. Cum in sapientem pertinacia. Graeci dicunt mediocritatem at sed, wisi prima integre nec cu, at eos clita saperet. No quo sensibus similique. Quo.</p>
</div></div></div></div>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal3">Small Modal</button>
<div class="modal fade" id="modal3" role="dialog" tabindex="-1" aria-hidden="true"><div class="modal-dialog modal-sm"><div class="modal-content"><div class="modal-header"><h4 class="modal-title"><button type="button" class="close" aria-label="Close" data-dismiss="modal"><span aria-hidden="true">×</span></button> &nbsp; </h4></div><div class="modal-body">
   <p> Ut homero contentiones qui, ne sea atomorum voluptatum, eruditi nominati dissentiet qui at. Ius movet signiferumque ut, ad utamur quaestio vim. Ius id vidit dicant. Mei no melius utroque aliquando. Audiam persequeris at pri. Ne modo omittantur est. Epicurei vituperatoribus cum id, id vim quot aperiri salutandi. Te pro illum utinam, at eos legimus menandri maluisset. Docendi lucilius mel eu, id mea dicta interpretaris. In electram vituperata vis, corpora consulatu vis an, ut sea quot nostrum vulputate. Nam ne iuvaret oportere, dolore oporteat ex vis. Adhuc brute facilis duo ad, eum eu percipitur signiferumque. An mea justo iuvaret, dolore virtute.</p>
   
</div><div class="modal-footer">
      Small Modal
   </div></div></div></div>
<dropdown title="..."></dropdown>

<dropdown>s can be placed inside Navs. For a <navbar>, either inside a <ul> or just on its own.


<navbar>
   <dropdown title="Dropdown 1">
      <a href="#">Item 1</a><a href="#">Item 2</a><a href="#">Item 3</a><a href="#">Item 4</a>
   </dropdown>
   <ul>
      <li><a href="#">Link 1</a></li>
      <dropdown title="Dropdown 2">
         <a href="#">Item 1</a><a href="#">Item 2</a><a href="#">Item 3</a><a href="#">Item 4</a>
      </dropdown>
   </ul>
</navbar>


<nav class="navbar navbar-default"><div class="container">
   <ul class="nav navbar-nav"><li class="dropdown"><a class="dropdown-toggle" type="button" id="octoml-16" data-toggle="dropdown" aria-expanded="false">Dropdown 1 <span class="caret"></span><span class="sr-only">Toggle Dropdown</span></a><ul class="dropdown-menu" role="menu" aria-labelledby="octoml-16">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 1</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 2</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 3</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 4</a></li>
   </ul></li></ul>
   <ul class="nav navbar-nav">
      <li><a href="#">Link 1</a></li>
      <li class="dropdown"><a class="dropdown-toggle" type="button" id="octoml-17" data-toggle="dropdown" aria-expanded="false">Dropdown 2 <span class="caret"></span><span class="sr-only">Toggle Dropdown</span></a><ul class="dropdown-menu" role="menu" aria-labelledby="octoml-17">
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 1</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 2</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 3</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 4</a></li>
      </ul></li>
   </ul>
</div></nav>

For <pills> or <tabs> Nav, place the dropdown amongst your list of links:


<pills>
   <a href="#" active>Active Pill</a>
   <dropdown title="Dropdown">
      <a href="#">Item 1</a><a href="#">Item 2</a><a href="#">Item 3</a><a href="#">Item 4</a>
   </dropdown>
   <a href="#">Pill</a>
</pills>
<tabs>
   <dropdown title="Dropdown 1">
      <a href="#">Item 1</a><a href="#">Item 2</a><a href="#">Item 3</a><a href="#">Item 4</a>
   </dropdown>
   <dropdown title="Dropdown 2">
      <a href="#">Item 1</a><a href="#">Item 2</a><a href="#">Item 3</a><a href="#">Item 4</a>
   </dropdown>
</tabs>


<ul class="nav nav-pills">
   <li role="presentation" class="active"><a href="#">Active Pill</a></li>
   <li role="presentation" class="dropdown"><a class="dropdown-toggle" type="button" id="octoml-18" 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-18">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 1</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 2</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 3</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 4</a></li>
   </ul></li>
   <li role="presentation"><a href="#">Pill</a></li>
</ul>
<ul class="nav nav-tabs">
   <li role="presentation" class="dropdown"><a class="dropdown-toggle" type="button" id="octoml-19" data-toggle="dropdown" aria-expanded="false">Dropdown 1 <span class="caret"></span><span class="sr-only">Toggle Dropdown</span></a><ul class="dropdown-menu" role="menu" aria-labelledby="octoml-19">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 1</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 2</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 3</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 4</a></li>
   </ul></li>
   <li role="presentation" class="dropdown"><a class="dropdown-toggle" type="button" id="octoml-20" data-toggle="dropdown" aria-expanded="false">Dropdown 2 <span class="caret"></span><span class="sr-only">Toggle Dropdown</span></a><ul class="dropdown-menu" role="menu" aria-labelledby="octoml-20">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 1</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 2</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 3</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 4</a></li>
   </ul></li>
</ul>

ScrollSpy

<pills spy="..."> <tabs spy="...">

You can convert any Nav to spy on the scroll position by using the spy attribute. You can optionally give spy a selector, to tell it which element's scrollbar to spy on. If no option is given, the page <body> will be spied on. *Whatever element is spied on, its CSS must include position:relative;

Inside the Nav must contain links to sections within the page (or wherever is being spied on). In the example below, the Nav is auto populated using the populate library function.


<pills spy="#scroll-example" populate="#scroll-example > h4"></pills>
<div id="scroll-example" style="max-height:200px;overflow-y:scroll;position:relative;">
   <h4>Section 1</h4>
   <lorem><lorem>
   <h4>Section 2</h4>
   <lorem><lorem>
   <h4>Section 3</h4>
   <lorem><lorem>
   <h4>Section 4</h4>
   <lorem><lorem>
   <h4>Section 5</h4>
   <lorem><lorem>
</div>


<div id="octoml-71-spy"><ul class="nav nav-pills"><li role="presentation"><a href="#section-">Section 1</a></li><li role="presentation"><a href="#section--1">Section 2</a></li><li role="presentation"><a href="#section--2">Section 3</a></li><li role="presentation"><a href="#section--3">Section 4</a></li><li role="presentation"><a href="#section--4">Section 5</a></li></ul></div>
<div id="scroll-example" style="max-height:200px;overflow-y:scroll;position:relative;" data-spy="scroll" data-target="#octoml-71-spy">
   <h4 id="section-">Section 1</h4>
   <p> Eu facer neglegentur sea. Eu vim quem blandit. Nobis accusata pertinacia ei pro, sit oratio epicuri lobortis ea, vix ei oblique mediocrem. No soleat feugiat efficiantur per, his eripuit inermis intellegat ei, sed eu noster labitur aliquando. Partem facete audiam nec id, pri augue bonorum legimus an. Has ludus ridens ut, ut vim simul constituam. Usu vocent offendit principes eu, posse postulant disputationi ex sit, qui ea mutat brute menandri. Eu consequat posidonium qui. Veniam bonorum at his, cu menandri suavitate efficiantur sed. Doming nostro suavitate qui te, pri id causae menandri. Ex quot case malis cum, qui ei ipsum.</p><p> Te utinam vivendo mei. Quodsi suscipiantur ei vim, sea ridens pericula scribentur ea. Ei modus veniam praesent quo, in eam possit temporibus, rebum idque phaedrum usu cu. Novum veniam alienum sed id. Iusto persius maiorum ex sea, his posidonium scripserit vituperatoribus eu. Possim maiestatis in vis. Quo an stet voluptua facilisis, at eos vocibus scaevola ponderum. Vim affert homero et. Et eum stet civibus, ei rebum sapientem gubergren nam. Ne mei odio delectus, eam id aperiri impedit incorrupte. Pri impedit patrioque philosophia ut, sea iisque detraxit adipisci in, odio ipsum voluptaria at sea. Mei ei homero iuvaret abhorreant, inermis persecuti.</p>
   <h4 id="section--1">Section 2</h4>
   <p> Vim ei aliquip luptatum, utamur fabulas abhorreant has te. Deserunt mediocritatem vis id, pro suas graeci aeterno no, mazim elitr noster id quo. Ut mea nemore vocibus. Nec at odio percipit. Dico alterum referrentur ad nam, duo posse saepe cu. In duo agam vidisse debitis. Prompta suscipit necessitatibus et vim, id nusquam copiosae eos. Ut eam ludus antiopam patrioque. Eius ipsum senserit id per. Mazim aliquip apeirian mei in, no usu iuvaret petentium euripidis, ea nec docendi iudicabit definitiones. Vis summo recteque ut, liber eloquentiam delicatissimi cu pri, ex usu habeo appareat persecuti. Vim eleifend salutatus delicatissimi ad, sea nostro.</p><p> His tempor accumsan id, pri eu utamur assueverit. Ferri omnis percipit est ne. Mel ne iuvaret equidem constituto. Sint vero legendos eu vim, pro expetenda similique vituperata ea. Quis electram ei qui, ei debet tamquam perpetua sea. Ipsum senserit sea id, eam vocent referrentur an, id vivendum delicata ius. Ex liber splendide constituam vis. Dicit iriure postulant no quo, mei id inani minim nostrud, meliore euripidis ex vis. Putant vivendo perpetua vim te, sea augue tincidunt appellantur at, labore aliquam volutpat mel te. Cum aeque aliquid dissentiunt te. Mea adhuc aliquam te, sea equidem commune ei. Vel in amet similique.</p>
   <h4 id="section--2">Section 3</h4>
   <p> Mel no elitr liberavisse. Facer persequeris eum ut. Mutat qualisque appellantur quo ei, per porro iusto appetere cu, ius quod verear at. Per ex putant civibus blandit, assum delectus imperdiet ex eam. Nibh epicurei eleifend per no. Nibh vocent consectetuer pro et. Ut his debitis appareat, delenit albucius maluisset eu his. Minim dicit salutandi ei usu. Eos ad corpora scripserit, ex possit inermis pertinax nec, an qui eius signiferumque. Amet tritani sed ne, vix eu alterum scriptorem. Vim justo suscipit ei, pri eu elit adipisci. Duo ne alia graeci. Ad dolore delicatissimi mei, solum velit pericula pri ne. Reque platonem.</p><p> In pri alia tamquam laoreet, amet theophrastus at est. Ut usu oratio homero, ad discere accusamus similique eum. Graece corrumpit qui no, et deserunt democritum per. Sea te liber aliquam, te debitis disputando pro, vis ea veniam assentior. Dico timeam expetendis te mel, vel solum liber tantas in. Cibo legimus concludaturque ne mea, te sea mollis laoreet. Ne soluta semper deseruisse vel, sea nusquam partiendo molestiae ad, eu oratio iriure assueverit vis. Eu vidit aliquando usu. Te mea quem efficiantur. Eu case quodsi eum, nec in debet insolens moderatius. Saepe euismod pertinacia et sea, ad vix mundi nullam salutatus. Probo.</p>
   <h4 id="section--3">Section 4</h4>
   <p> Prompta suscipit necessitatibus et vim, id nusquam copiosae eos. Ut eam ludus antiopam patrioque. Eius ipsum senserit id per. Mazim aliquip apeirian mei in, no usu iuvaret petentium euripidis, ea nec docendi iudicabit definitiones. Vis summo recteque ut, liber eloquentiam delicatissimi cu pri, ex usu habeo appareat persecuti. Vim eleifend salutatus delicatissimi ad, sea nostro consulatu in. Legere putent temporibus per id, et qui dolorem voluptatum. Scripta gubergren referrentur vim te. 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.</p><p> Usu vocent offendit principes eu, posse postulant disputationi ex sit, qui ea mutat brute menandri. Eu consequat posidonium qui. Veniam bonorum at his, cu menandri suavitate efficiantur sed. Doming nostro suavitate qui te, pri id causae menandri. Ex quot case malis cum, qui ei ipsum labitur urbanitas, mei putent sensibus maluisset ei. Scripta temporibus mea no. Cu augue volumus eam, purto simul malorum no sit. Pro eu laudem percipit facilisis, has semper habemus appareat no. Est te delenit antiopam, atqui nusquam officiis nam te. Ne sea iriure suavitate definitiones, persius placerat at quo, inani debet mundi vix no. Sed ne.</p>
   <h4 id="section--4">Section 5</h4>
   <p> Ea eam copiosae tractatos, vis an aperiam delicata interpretaris, in usu summo molestiae. Te iudico impetus regione qui, ius cu partem consetetur conclusionemque. Sit doctus evertitur ad. Id tale suavitate his, per similique maiestatis interpretaris an. Liber propriae sit et, eos vidit aperiri inimicus et. Mundi ludus populo et mei, ne wisi appareat vix, an inimicus oportere eam. Ex harum comprehensam quo, in vix ullum mentitum appareat. Eu harum tamquam expetendis nam. Primis singulis pro ei, at eam dolores omittam voluptatum, an viris consul causae pri. Vim at sapientem salutandi, id vide fugit scribentur vel. No case signiferumque nam, id.</p><p> An postulant elaboraret sea. Autem pertinacia sententiae at quo, in quo posse omnium, in sit duis aliquam. Zril altera putent usu eu, quidam omittantur reformidans sit no. Id vel novum splendide intellegebat, ne natum iudicabit eum, ut per doctus deleniti suavitate. Dictas percipit at duo. 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,.</p>
</div>

Section 1

Eu facer neglegentur sea. Eu vim quem blandit. Nobis accusata pertinacia ei pro, sit oratio epicuri lobortis ea, vix ei oblique mediocrem. No soleat feugiat efficiantur per, his eripuit inermis intellegat ei, sed eu noster labitur aliquando. Partem facete audiam nec id, pri augue bonorum legimus an. Has ludus ridens ut, ut vim simul constituam. Usu vocent offendit principes eu, posse postulant disputationi ex sit, qui ea mutat brute menandri. Eu consequat posidonium qui. Veniam bonorum at his, cu menandri suavitate efficiantur sed. Doming nostro suavitate qui te, pri id causae menandri. Ex quot case malis cum, qui ei ipsum.

Te utinam vivendo mei. Quodsi suscipiantur ei vim, sea ridens pericula scribentur ea. Ei modus veniam praesent quo, in eam possit temporibus, rebum idque phaedrum usu cu. Novum veniam alienum sed id. Iusto persius maiorum ex sea, his posidonium scripserit vituperatoribus eu. Possim maiestatis in vis. Quo an stet voluptua facilisis, at eos vocibus scaevola ponderum. Vim affert homero et. Et eum stet civibus, ei rebum sapientem gubergren nam. Ne mei odio delectus, eam id aperiri impedit incorrupte. Pri impedit patrioque philosophia ut, sea iisque detraxit adipisci in, odio ipsum voluptaria at sea. Mei ei homero iuvaret abhorreant, inermis persecuti.

Section 2

Vim ei aliquip luptatum, utamur fabulas abhorreant has te. Deserunt mediocritatem vis id, pro suas graeci aeterno no, mazim elitr noster id quo. Ut mea nemore vocibus. Nec at odio percipit. Dico alterum referrentur ad nam, duo posse saepe cu. In duo agam vidisse debitis. Prompta suscipit necessitatibus et vim, id nusquam copiosae eos. Ut eam ludus antiopam patrioque. Eius ipsum senserit id per. Mazim aliquip apeirian mei in, no usu iuvaret petentium euripidis, ea nec docendi iudicabit definitiones. Vis summo recteque ut, liber eloquentiam delicatissimi cu pri, ex usu habeo appareat persecuti. Vim eleifend salutatus delicatissimi ad, sea nostro.

His tempor accumsan id, pri eu utamur assueverit. Ferri omnis percipit est ne. Mel ne iuvaret equidem constituto. Sint vero legendos eu vim, pro expetenda similique vituperata ea. Quis electram ei qui, ei debet tamquam perpetua sea. Ipsum senserit sea id, eam vocent referrentur an, id vivendum delicata ius. Ex liber splendide constituam vis. Dicit iriure postulant no quo, mei id inani minim nostrud, meliore euripidis ex vis. Putant vivendo perpetua vim te, sea augue tincidunt appellantur at, labore aliquam volutpat mel te. Cum aeque aliquid dissentiunt te. Mea adhuc aliquam te, sea equidem commune ei. Vel in amet similique.

Section 3

Mel no elitr liberavisse. Facer persequeris eum ut. Mutat qualisque appellantur quo ei, per porro iusto appetere cu, ius quod verear at. Per ex putant civibus blandit, assum delectus imperdiet ex eam. Nibh epicurei eleifend per no. Nibh vocent consectetuer pro et. Ut his debitis appareat, delenit albucius maluisset eu his. Minim dicit salutandi ei usu. Eos ad corpora scripserit, ex possit inermis pertinax nec, an qui eius signiferumque. Amet tritani sed ne, vix eu alterum scriptorem. Vim justo suscipit ei, pri eu elit adipisci. Duo ne alia graeci. Ad dolore delicatissimi mei, solum velit pericula pri ne. Reque platonem.

In pri alia tamquam laoreet, amet theophrastus at est. Ut usu oratio homero, ad discere accusamus similique eum. Graece corrumpit qui no, et deserunt democritum per. Sea te liber aliquam, te debitis disputando pro, vis ea veniam assentior. Dico timeam expetendis te mel, vel solum liber tantas in. Cibo legimus concludaturque ne mea, te sea mollis laoreet. Ne soluta semper deseruisse vel, sea nusquam partiendo molestiae ad, eu oratio iriure assueverit vis. Eu vidit aliquando usu. Te mea quem efficiantur. Eu case quodsi eum, nec in debet insolens moderatius. Saepe euismod pertinacia et sea, ad vix mundi nullam salutatus. Probo.

Section 4

Prompta suscipit necessitatibus et vim, id nusquam copiosae eos. Ut eam ludus antiopam patrioque. Eius ipsum senserit id per. Mazim aliquip apeirian mei in, no usu iuvaret petentium euripidis, ea nec docendi iudicabit definitiones. Vis summo recteque ut, liber eloquentiam delicatissimi cu pri, ex usu habeo appareat persecuti. Vim eleifend salutatus delicatissimi ad, sea nostro consulatu in. Legere putent temporibus per id, et qui dolorem voluptatum. Scripta gubergren referrentur vim te. 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.

Usu vocent offendit principes eu, posse postulant disputationi ex sit, qui ea mutat brute menandri. Eu consequat posidonium qui. Veniam bonorum at his, cu menandri suavitate efficiantur sed. Doming nostro suavitate qui te, pri id causae menandri. Ex quot case malis cum, qui ei ipsum labitur urbanitas, mei putent sensibus maluisset ei. Scripta temporibus mea no. Cu augue volumus eam, purto simul malorum no sit. Pro eu laudem percipit facilisis, has semper habemus appareat no. Est te delenit antiopam, atqui nusquam officiis nam te. Ne sea iriure suavitate definitiones, persius placerat at quo, inani debet mundi vix no. Sed ne.

Section 5

Ea eam copiosae tractatos, vis an aperiam delicata interpretaris, in usu summo molestiae. Te iudico impetus regione qui, ius cu partem consetetur conclusionemque. Sit doctus evertitur ad. Id tale suavitate his, per similique maiestatis interpretaris an. Liber propriae sit et, eos vidit aperiri inimicus et. Mundi ludus populo et mei, ne wisi appareat vix, an inimicus oportere eam. Ex harum comprehensam quo, in vix ullum mentitum appareat. Eu harum tamquam expetendis nam. Primis singulis pro ei, at eam dolores omittam voluptatum, an viris consul causae pri. Vim at sapientem salutandi, id vide fugit scribentur vel. No case signiferumque nam, id.

An postulant elaboraret sea. Autem pertinacia sententiae at quo, in quo posse omnium, in sit duis aliquam. Zril altera putent usu eu, quidam omittantur reformidans sit no. Id vel novum splendide intellegebat, ne natum iudicabit eum, ut per doctus deleniti suavitate. Dictas percipit at duo. 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,.

You can apply the spy to an arbitrary list (<ul> or <ol>), but you'll need to set your own stylings for .active to highlight which element is active.


<css>
.spy-nav li {display:inline-block;width:33%;}
.spy-nav li.active a {background:purple;color:white;}
</css>
<ul class="spy-nav" spy="#scroll-example2" populate="#scroll-example2 > h4"></ul>
<div id="scroll-example2" style="max-height:200px;overflow-y:scroll;position:relative;">
   <h4>Section 1</h4>
   <lorem><lorem>
   <h4>Section 2</h4>
   <lorem><lorem>
   <h4>Section 3</h4>
   <lorem><lorem>
</div>


<div id="octoml-72-spy"><ul class="nav spy-nav"><li><a href="#section--5">Section 1</a></li><li><a href="#section--6">Section 2</a></li><li><a href="#section--7">Section 3</a></li></ul></div>
<div id="scroll-example2" style="max-height:200px;overflow-y:scroll;position:relative;" data-spy="scroll" data-target="#octoml-72-spy">
   <h4 id="section--5">Section 1</h4>
   <p> Pro no labitur vivendo minimum. Elit conclusionemque cum et, per ut dico consul omnesque, eum ipsum euismod ei. Id quot neglegentur usu, pri nostrum scripserit no. 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 utroque civibus atomorum. Quo saepe praesent ei. Aperiam dissentiunt an nam. In pri alia tamquam laoreet, amet theophrastus at est. Ut usu oratio homero,.</p><p> Probo mazim audiam ea duo, tale putant omnesque vis eu. Eu facer neglegentur sea. Eu vim quem blandit. Nobis accusata pertinacia ei pro, sit oratio epicuri lobortis ea, vix ei oblique mediocrem. No soleat feugiat efficiantur per, his eripuit inermis intellegat ei, sed eu noster labitur aliquando. Partem facete audiam nec id, pri augue bonorum legimus an. Has ludus ridens ut, ut vim simul constituam. Usu vocent offendit principes eu, posse postulant disputationi ex sit, qui ea mutat brute menandri. Eu consequat posidonium qui. Veniam bonorum at his, cu menandri suavitate efficiantur sed. Doming nostro suavitate qui te, pri id.</p>
   <h4 id="section--6">Section 2</h4>
   <p> Ei modus veniam praesent quo, in eam possit temporibus, rebum idque phaedrum usu cu. Novum veniam alienum sed id. Iusto persius maiorum ex sea, his posidonium scripserit vituperatoribus eu. Possim maiestatis in vis. Quo an stet voluptua facilisis, at eos vocibus scaevola ponderum. Vim affert homero et. Et eum stet civibus, ei rebum sapientem gubergren nam. Ne mei odio delectus, eam id aperiri impedit incorrupte. Pri impedit patrioque philosophia ut, sea iisque detraxit adipisci in, odio ipsum voluptaria at sea. Mei ei homero iuvaret abhorreant, inermis persecuti at mea. Soluta eripuit eu eam. Eirmod epicuri at his, latine euripidis no.</p><p> Eu facer neglegentur sea. Eu vim quem blandit. Nobis accusata pertinacia ei pro, sit oratio epicuri lobortis ea, vix ei oblique mediocrem. No soleat feugiat efficiantur per, his eripuit inermis intellegat ei, sed eu noster labitur aliquando. Partem facete audiam nec id, pri augue bonorum legimus an. Has ludus ridens ut, ut vim simul constituam. Usu vocent offendit principes eu, posse postulant disputationi ex sit, qui ea mutat brute menandri. Eu consequat posidonium qui. Veniam bonorum at his, cu menandri suavitate efficiantur sed. Doming nostro suavitate qui te, pri id causae menandri. Ex quot case malis cum, qui ei ipsum.</p>
   <h4 id="section--7">Section 3</h4>
   <p> Eu quaeque perfecto appellantur mea, ex cum porro populo. Ex diam cetero abhorreant pro, sit tritani ullamcorper complectitur ex, an quo ceteros accusata incorrupte. Labores tibique theophrastus nec te, eam an tale erat ullum, eum id nobis oratio officiis. Id duo reque decore appetere, his vocent consequat voluptatibus ne, meis recteque eu sed. Ei eum fugit iriure, sit ex ipsum oporteat. At vel illud tollit populo, malis dissentias sadipscing nam eu. Eu elit intellegam cum, erat bonorum inciderint id per. Magna veritus propriae his ei. Mel facer oblique ne, eum cu quod semper, duo ei causae concludaturque. Hinc facer duo.</p><p> Labores tibique theophrastus nec te, eam an tale erat ullum, eum id nobis oratio officiis. Id duo reque decore appetere, his vocent consequat voluptatibus ne, meis recteque eu sed. Ei eum fugit iriure, sit ex ipsum oporteat. At vel illud tollit populo, malis dissentias sadipscing nam eu. Eu elit intellegam cum, erat bonorum inciderint id per. Magna veritus propriae his ei. Mel facer oblique ne, eum cu quod semper, duo ei causae concludaturque. Hinc facer duo ut, mazim quidam ius ad. Mel no modo movet, ne dolor epicurei vel. Id dicant mentitum suscipit ius, id singulis deserunt reprimique cum. Labore.</p>
</div>

Section 1

Pro no labitur vivendo minimum. Elit conclusionemque cum et, per ut dico consul omnesque, eum ipsum euismod ei. Id quot neglegentur usu, pri nostrum scripserit no. 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 utroque civibus atomorum. Quo saepe praesent ei. Aperiam dissentiunt an nam. In pri alia tamquam laoreet, amet theophrastus at est. Ut usu oratio homero,.

Probo mazim audiam ea duo, tale putant omnesque vis eu. Eu facer neglegentur sea. Eu vim quem blandit. Nobis accusata pertinacia ei pro, sit oratio epicuri lobortis ea, vix ei oblique mediocrem. No soleat feugiat efficiantur per, his eripuit inermis intellegat ei, sed eu noster labitur aliquando. Partem facete audiam nec id, pri augue bonorum legimus an. Has ludus ridens ut, ut vim simul constituam. Usu vocent offendit principes eu, posse postulant disputationi ex sit, qui ea mutat brute menandri. Eu consequat posidonium qui. Veniam bonorum at his, cu menandri suavitate efficiantur sed. Doming nostro suavitate qui te, pri id.

Section 2

Ei modus veniam praesent quo, in eam possit temporibus, rebum idque phaedrum usu cu. Novum veniam alienum sed id. Iusto persius maiorum ex sea, his posidonium scripserit vituperatoribus eu. Possim maiestatis in vis. Quo an stet voluptua facilisis, at eos vocibus scaevola ponderum. Vim affert homero et. Et eum stet civibus, ei rebum sapientem gubergren nam. Ne mei odio delectus, eam id aperiri impedit incorrupte. Pri impedit patrioque philosophia ut, sea iisque detraxit adipisci in, odio ipsum voluptaria at sea. Mei ei homero iuvaret abhorreant, inermis persecuti at mea. Soluta eripuit eu eam. Eirmod epicuri at his, latine euripidis no.

Eu facer neglegentur sea. Eu vim quem blandit. Nobis accusata pertinacia ei pro, sit oratio epicuri lobortis ea, vix ei oblique mediocrem. No soleat feugiat efficiantur per, his eripuit inermis intellegat ei, sed eu noster labitur aliquando. Partem facete audiam nec id, pri augue bonorum legimus an. Has ludus ridens ut, ut vim simul constituam. Usu vocent offendit principes eu, posse postulant disputationi ex sit, qui ea mutat brute menandri. Eu consequat posidonium qui. Veniam bonorum at his, cu menandri suavitate efficiantur sed. Doming nostro suavitate qui te, pri id causae menandri. Ex quot case malis cum, qui ei ipsum.

Section 3

Eu quaeque perfecto appellantur mea, ex cum porro populo. Ex diam cetero abhorreant pro, sit tritani ullamcorper complectitur ex, an quo ceteros accusata incorrupte. Labores tibique theophrastus nec te, eam an tale erat ullum, eum id nobis oratio officiis. Id duo reque decore appetere, his vocent consequat voluptatibus ne, meis recteque eu sed. Ei eum fugit iriure, sit ex ipsum oporteat. At vel illud tollit populo, malis dissentias sadipscing nam eu. Eu elit intellegam cum, erat bonorum inciderint id per. Magna veritus propriae his ei. Mel facer oblique ne, eum cu quod semper, duo ei causae concludaturque. Hinc facer duo.

Labores tibique theophrastus nec te, eam an tale erat ullum, eum id nobis oratio officiis. Id duo reque decore appetere, his vocent consequat voluptatibus ne, meis recteque eu sed. Ei eum fugit iriure, sit ex ipsum oporteat. At vel illud tollit populo, malis dissentias sadipscing nam eu. Eu elit intellegam cum, erat bonorum inciderint id per. Magna veritus propriae his ei. Mel facer oblique ne, eum cu quod semper, duo ei causae concludaturque. Hinc facer duo ut, mazim quidam ius ad. Mel no modo movet, ne dolor epicurei vel. Id dicant mentitum suscipit ius, id singulis deserunt reprimique cum. Labore.

Tabs

<tab-group>  <tab></tab>  ... </tab-group>

Divide sections of a document into a group of tabs using the <tab-group> tag. This will contain one or more <tab>s.

The <tab-group> can be set to have pills instead of tabs. Add in a fade effect, or make the tabs/pills fully justified


<tab-group fade justified>
   <tab>
      <h2>Title 1</h2>
      <lorem>
   </tab>
   <tab>
      <h2>Title 2</h2>
      <lorem>
   </tab>
   <tab>
      <h2>Title 3</h2>
      <lorem>
   </tab>
   <tab>
      <h2>Title 4</h2>
      <lorem>
   </tab>
</tab-group>


<div role="tabpanel">
<ul class="nav nav-tabs nav-justified" role="tablist">
   <li role="presentation"><a href="#octoml-35" aria-controls="octoml-35" role="tab" data-toggle="tab">Title 1</a></li>
   <li role="presentation"><a href="#octoml-36" aria-controls="octoml-36" role="tab" data-toggle="tab">Title 2</a></li>
   <li role="presentation"><a href="#octoml-37" aria-controls="octoml-37" role="tab" data-toggle="tab">Title 3</a></li>
   <li role="presentation"><a href="#octoml-38" aria-controls="octoml-38" role="tab" data-toggle="tab">Title 4</a></li>
</ul>
<div class="tab-content">
   <div role="tabpanel" class="tab-pane fade in active" id="octoml-35">
      <h2>Title 1</h2>
      <p> Equidem voluptaria id cum. Nam id summo moderatius. Vel assum impetus et. At habeo utamur usu, error salutandi qui te. Stet tritani duo ne, eius phaedrum signiferumque eum ad. Docendi postulant et vim, id eam conceptam consequuntur. Eu harum omnium delicatissimi per. Ad voluptaria rationibus honestatis vel. Cum cu meliore evertitur, mei at natum nemore honestatis. Utinam nominavi fabellas eos ex, id sit nostrud quaeque verterem. Pri ad eros eruditi, hinc legimus iracundia eam ad. Usu natum iudico vocibus ut, omnis nulla et sed. Cum eu tota nonumes, diam solum illum pri at. Animal ceteros ea eum, stet iisque appareat.</p>
   </div>
   <div role="tabpanel" class="tab-pane fade" id="octoml-36">
      <h2>Title 2</h2>
      <p> Vix ex dicta diceret alterum, id accumsan detracto theophrastus nec. Quando placerat temporibus est in. Ignota ornatus at mel. Elitr dolorem facilisis id his, causae verterem quo no. Dolorum indoctum reformidans eos et, cu eam partem impedit. Vix ea porro possim prompta, vide utinam an eos. Cu qui tritani deseruisse, at tritani expetenda conceptam sed, te his iriure aliquando. Ne vocent corrumpit accommodare vis. Doctus iriure intellegam nec in, homero adolescens conclusionemque quo ut, magna semper democritum mel eu. In graece graecis nec, sit te ornatus epicurei, ludus similique ex nam. Duo et habemus scribentur, ne libris omnium consetetur pri,.</p>
   </div>
   <div role="tabpanel" class="tab-pane fade" id="octoml-37">
      <h2>Title 3</h2>
      <p> Saepe euismod pertinacia et sea, ad vix mundi nullam salutatus. Probo mazim audiam ea duo, tale putant omnesque vis eu. Eu facer neglegentur sea. Eu vim quem blandit. Nobis accusata pertinacia ei pro, sit oratio epicuri lobortis ea, vix ei oblique mediocrem. No soleat feugiat efficiantur per, his eripuit inermis intellegat ei, sed eu noster labitur aliquando. Partem facete audiam nec id, pri augue bonorum legimus an. Has ludus ridens ut, ut vim simul constituam. Usu vocent offendit principes eu, posse postulant disputationi ex sit, qui ea mutat brute menandri. Eu consequat posidonium qui. Veniam bonorum at his, cu menandri.</p>
   </div>
   <div role="tabpanel" class="tab-pane fade" id="octoml-38">
      <h2>Title 4</h2>
      <p> 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 sadipscing persequeris, autem etiam vivendum vis ut. Et mei aliquam veritus, affert audiam quaestio at vix. At dolor doming reformidans est, duo vidisse volumus dolores ne. Nam ut solum lobortis laboramus, quem dolorem ancillae ei ius, ut movet tempor argumentum mea. Oblique euripidis sententiae cu vim. Ad pro cetero vocibus temporibus. Cum audiam facilis facilisis ad. Quod tempor constituto ad pri. Qui aliquid legimus id, ius sale simul.</p>
   </div>
</div>
</div>

Title 1

Equidem voluptaria id cum. Nam id summo moderatius. Vel assum impetus et. At habeo utamur usu, error salutandi qui te. Stet tritani duo ne, eius phaedrum signiferumque eum ad. Docendi postulant et vim, id eam conceptam consequuntur. Eu harum omnium delicatissimi per. Ad voluptaria rationibus honestatis vel. Cum cu meliore evertitur, mei at natum nemore honestatis. Utinam nominavi fabellas eos ex, id sit nostrud quaeque verterem. Pri ad eros eruditi, hinc legimus iracundia eam ad. Usu natum iudico vocibus ut, omnis nulla et sed. Cum eu tota nonumes, diam solum illum pri at. Animal ceteros ea eum, stet iisque appareat.

Title 2

Vix ex dicta diceret alterum, id accumsan detracto theophrastus nec. Quando placerat temporibus est in. Ignota ornatus at mel. Elitr dolorem facilisis id his, causae verterem quo no. Dolorum indoctum reformidans eos et, cu eam partem impedit. Vix ea porro possim prompta, vide utinam an eos. Cu qui tritani deseruisse, at tritani expetenda conceptam sed, te his iriure aliquando. Ne vocent corrumpit accommodare vis. Doctus iriure intellegam nec in, homero adolescens conclusionemque quo ut, magna semper democritum mel eu. In graece graecis nec, sit te ornatus epicurei, ludus similique ex nam. Duo et habemus scribentur, ne libris omnium consetetur pri,.

Title 3

Saepe euismod pertinacia et sea, ad vix mundi nullam salutatus. Probo mazim audiam ea duo, tale putant omnesque vis eu. Eu facer neglegentur sea. Eu vim quem blandit. Nobis accusata pertinacia ei pro, sit oratio epicuri lobortis ea, vix ei oblique mediocrem. No soleat feugiat efficiantur per, his eripuit inermis intellegat ei, sed eu noster labitur aliquando. Partem facete audiam nec id, pri augue bonorum legimus an. Has ludus ridens ut, ut vim simul constituam. Usu vocent offendit principes eu, posse postulant disputationi ex sit, qui ea mutat brute menandri. Eu consequat posidonium qui. Veniam bonorum at his, cu menandri.

Title 4

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 sadipscing persequeris, autem etiam vivendum vis ut. Et mei aliquam veritus, affert audiam quaestio at vix. At dolor doming reformidans est, duo vidisse volumus dolores ne. Nam ut solum lobortis laboramus, quem dolorem ancillae ei ius, ut movet tempor argumentum mea. Oblique euripidis sententiae cu vim. Ad pro cetero vocibus temporibus. Cum audiam facilis facilisis ad. Quod tempor constituto ad pri. Qui aliquid legimus id, ius sale simul.

In the above example, the titles for each tab is taken from the first title tag (<h1-6>,<hgroup> or <header>) found in the tab body. This can be replaced for any <tab>, using the title attribute (this is also required if the tab body doesn't have a title).


<tab-group pills>
   <tab title="Title from attribute">
      <p>No title tags in body</p>
      <lorem>
   </tab>
   <tab>
      <h2>Tab title taken from tab body</h2>
      <lorem>
   </tab>
   <tab title="Tab title overwritten by attribute">
      <h2>Tab title not taken from here</h2>
      <lorem>
   </tab>
   <tab>
      <p>Default (no title)</p>
      <lorem>
   </tab>
</tab-group>


<div role="tabpanel">
<ul class="nav nav-pills" role="tablist">
   <li role="presentation"><a href="#octoml-41" aria-controls="octoml-41" role="tab" data-toggle="tab">Title from attribute</a></li>
   <li role="presentation"><a href="#octoml-42" aria-controls="octoml-42" role="tab" data-toggle="tab">Tab title taken from tab body</a></li>
   <li role="presentation"><a href="#octoml-43" aria-controls="octoml-43" role="tab" data-toggle="tab">Tab title overwritten by attribute</a></li>
   <li role="presentation"><a href="#octoml-44" aria-controls="octoml-44" role="tab" data-toggle="tab">Tab 4</a></li>
</ul>
<div class="tab-content">
   <div role="tabpanel" class="tab-pane active" id="octoml-41">
      <p>No title tags in body</p>
      <p> Quando placerat temporibus est in. Ignota ornatus at mel. Elitr dolorem facilisis id his, causae verterem quo no. Dolorum indoctum reformidans eos et, cu eam partem impedit. Vix ea porro possim prompta, vide utinam an eos. Cu qui tritani deseruisse, at tritani expetenda conceptam sed, te his iriure aliquando. Ne vocent corrumpit accommodare vis. Doctus iriure intellegam nec in, homero adolescens conclusionemque quo ut, magna semper democritum mel eu. In graece graecis nec, sit te ornatus epicurei, ludus similique ex nam. Duo et habemus scribentur, ne libris omnium consetetur pri, ei solum brute vim. No vim dicam dolorum pertinacia. Equidem.</p>
   </div>
   <div role="tabpanel" class="tab-pane" id="octoml-42">
      <h2>Tab title taken from tab body</h2>
      <p> Dictas percipit at duo. 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.</p>
   </div>
   <div role="tabpanel" class="tab-pane" id="octoml-43">
      <h2>Tab title not taken from here</h2>
      <p> Ignota ornatus at mel. Elitr dolorem facilisis id his, causae verterem quo no. Dolorum indoctum reformidans eos et, cu eam partem impedit. Vix ea porro possim prompta, vide utinam an eos. Cu qui tritani deseruisse, at tritani expetenda conceptam sed, te his iriure aliquando. Ne vocent corrumpit accommodare vis. Doctus iriure intellegam nec in, homero adolescens conclusionemque quo ut, magna semper democritum mel eu. In graece graecis nec, sit te ornatus epicurei, ludus similique ex nam. Duo et habemus scribentur, ne libris omnium consetetur pri, ei solum brute vim. No vim dicam dolorum pertinacia. Equidem voluptaria id cum. Nam id.</p>
   </div>
   <div role="tabpanel" class="tab-pane" id="octoml-44">
      <p>Default (no title)</p>
      <p> Ne soluta semper deseruisse vel, sea nusquam partiendo molestiae ad, eu oratio iriure assueverit vis. Eu vidit aliquando usu. Te mea quem efficiantur. Eu case quodsi eum, nec in debet insolens moderatius. Saepe euismod pertinacia et sea, ad vix mundi nullam salutatus. Probo mazim audiam ea duo, tale putant omnesque vis eu. Eu facer neglegentur sea. Eu vim quem blandit. Nobis accusata pertinacia ei pro, sit oratio epicuri lobortis ea, vix ei oblique mediocrem. No soleat feugiat efficiantur per, his eripuit inermis intellegat ei, sed eu noster labitur aliquando. Partem facete audiam nec id, pri augue bonorum legimus an. Has.</p>
   </div>
</div>
</div>

No title tags in body

Quando placerat temporibus est in. Ignota ornatus at mel. Elitr dolorem facilisis id his, causae verterem quo no. Dolorum indoctum reformidans eos et, cu eam partem impedit. Vix ea porro possim prompta, vide utinam an eos. Cu qui tritani deseruisse, at tritani expetenda conceptam sed, te his iriure aliquando. Ne vocent corrumpit accommodare vis. Doctus iriure intellegam nec in, homero adolescens conclusionemque quo ut, magna semper democritum mel eu. In graece graecis nec, sit te ornatus epicurei, ludus similique ex nam. Duo et habemus scribentur, ne libris omnium consetetur pri, ei solum brute vim. No vim dicam dolorum pertinacia. Equidem.

Tab title taken from tab body

Dictas percipit at duo. 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.

Tab title not taken from here

Ignota ornatus at mel. Elitr dolorem facilisis id his, causae verterem quo no. Dolorum indoctum reformidans eos et, cu eam partem impedit. Vix ea porro possim prompta, vide utinam an eos. Cu qui tritani deseruisse, at tritani expetenda conceptam sed, te his iriure aliquando. Ne vocent corrumpit accommodare vis. Doctus iriure intellegam nec in, homero adolescens conclusionemque quo ut, magna semper democritum mel eu. In graece graecis nec, sit te ornatus epicurei, ludus similique ex nam. Duo et habemus scribentur, ne libris omnium consetetur pri, ei solum brute vim. No vim dicam dolorum pertinacia. Equidem voluptaria id cum. Nam id.

Default (no title)

Ne soluta semper deseruisse vel, sea nusquam partiendo molestiae ad, eu oratio iriure assueverit vis. Eu vidit aliquando usu. Te mea quem efficiantur. Eu case quodsi eum, nec in debet insolens moderatius. Saepe euismod pertinacia et sea, ad vix mundi nullam salutatus. Probo mazim audiam ea duo, tale putant omnesque vis eu. Eu facer neglegentur sea. Eu vim quem blandit. Nobis accusata pertinacia ei pro, sit oratio epicuri lobortis ea, vix ei oblique mediocrem. No soleat feugiat efficiantur per, his eripuit inermis intellegat ei, sed eu noster labitur aliquando. Partem facete audiam nec id, pri augue bonorum legimus an. Has.

Tooltip

<a|btn tooltip="..." left|right|top|bottom|auto></a|btn>

Add tooltips to <a> and <btn> elements using the tooltip attribute. You can set the placement using the attributes left, right, bottom or top (which is the default). Add auto to get the tooltip to automatically move placement to stay on screen.


<btn left tooltip="Left Tooltip (may go off screen)">Default</btn>
<btn primary auto left tooltip="Auto Left Tooltip (should stay on screen)">Primary</btn>
<btn success tooltip="Top Tooltip (Default)">Success</btn>
<btn info tooltip="Bottom Tooltip" bottom>Info</btn>
<btn danger tooltip="Right Tooltip" right>Danger</btn>
<btn success tooltip="Left Tooltip" left>Success</btn>


<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Left Tooltip (may go off screen)">Default</button>
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="auto left" title="Auto Left Tooltip (should stay on screen)">Primary</button>
<button type="button" class="btn btn-success" data-toggle="tooltip" title="Top Tooltip (Default)">Success</button>
<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="bottom" title="Bottom Tooltip">Info</button>
<button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="right" title="Right Tooltip">Danger</button>
<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="left" title="Left Tooltip">Success</button>

Popover

<a|btn popover="..." title="..." top|bottom|right|left></a|btn>

Popovers can be created for <btn>s and <a>s using the popover attribute. You can optionally add a title with the title attribute.

To make the popovers dismissable, add the attribute close. For proper cross-browser behaviour, use an <a> tag.


<btn primary title="Popover Title" popover="Default Popover">Primary</btn>
<btn info popover="Bottom Popover" bottom>Info</btn>
<btn success popover="Top Popover" top>Success</btn>
<btn danger popover="Right Popover" right>Danger</btn>
<btn success popover="Left Popover" left>Success</btn>
<h3>Dismissable Popovers:</h3>
<a btn primary close title="Title 1" popover="Default Popover">Primary</a>
<a btn info close title="Title 2" popover="Bottom Popover" bottom>Info</a>
<a btn success close title="Title 3" popover="Top Popover" top>Success</a>
<a btn danger close popover="Right Popover" right>Danger</a>
<a btn success close popover="Left Popover" left>Success</a>


<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" title="Popover Title" data-content="Default Popover">Primary</button>
<button type="button" class="btn btn-info" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom Popover">Info</button>
<button type="button" class="btn btn-success" data-container="body" data-toggle="popover" data-placement="top" data-content="Top Popover">Success</button>
<button type="button" class="btn btn-danger" data-container="body" data-toggle="popover" data-placement="right" data-content="Right Popover">Danger</button>
<button type="button" class="btn btn-success" data-container="body" data-toggle="popover" data-placement="left" data-content="Left Popover">Success</button>
<h3>Dismissable Popovers:</h3>
<a role="button" class="btn btn-primary" tabindex="0" data-container="body" data-toggle="popover" data-trigger="focus" title="Title 1" data-content="Default Popover">Primary</a>
<a role="button" class="btn btn-info" tabindex="0" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="bottom" title="Title 2" data-content="Bottom Popover">Info</a>
<a role="button" class="btn btn-success" tabindex="0" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="top" title="Title 3" data-content="Top Popover">Success</a>
<a role="button" class="btn btn-danger" tabindex="0" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="right" title="Danger" data-content="Right Popover">Danger</a>
<a role="button" class="btn btn-success" tabindex="0" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="left" title="Success" data-content="Left Popover">Success</a>

Dismissable Popovers:

Primary Info Success Danger Success

Alert

<alert></alert>

Wrap alert text in the <alert> tag. Add an attribute for the chosen brand color, excluding primary. Add a close attribute to make the alert dismissable. All links will be styled accordings


<alert danger close>
   <h4>This is an alert</h4>
   <p>But you can dismiss it if you like</p>
</alert>
<alert warning close>
   <p>I can be closed too</p>
   <p>It also contains a <a href="#">Link</a></p>
</alert>


<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>
   <h4>This is an alert</h4>
   <p>But you can dismiss it if you like</p>
</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>
   <p>I can be closed too</p>
   <p>It also contains a <a class="alert-link" href="#">Link</a></p>
</div>

Collapse

<a|btn collape="..."> <.. collapse|collapsed>

To make any element (other than a <btn> or <a>) collapsable, use the attribute collapse. To make the element begin (on page load) collapsed, use the attribute collapsed. In order to refer to your collapsable element it later, you will also need to give it an id.

You can then open and close your collapsable element from a <btn> or <a> using the attribute collapse="#id"


<btn primary collapse="collapse1">Collapse 1</btn>
<btn primary collapse="collapse2">Collapse 2</btn>
<div collapse id="collapse1">
   <h3>This is a collapsable div</h3>
   <lorem>
</div>
<div collapsed id="collapse2">
   <h3>This collapsable panel starts hidden</h3>
   <lorem>
</div>


<button type="button" class="btn btn-primary" data-target="#collapse1" data-toggle="collapse" aria-expanded="false" aria-controls="collapse1">Collapse 1</button>
<button type="button" class="btn btn-primary" data-target="#collapse2" data-toggle="collapse" aria-expanded="true" aria-controls="collapse2">Collapse 2</button>
<div class="collapse in" aria-expanded="true" id="collapse1">
   <h3>This is a collapsable div</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 utroque civibus atomorum. Quo saepe praesent ei. Aperiam dissentiunt an nam. In pri alia tamquam laoreet, amet theophrastus at est. Ut usu oratio homero, ad discere accusamus similique eum. Graece corrumpit qui no, et deserunt democritum per. Sea te liber aliquam, te debitis disputando pro, vis ea veniam assentior. Dico.</p>
</div>
<div class="collapse" aria-expanded="false" id="collapse2">
   <h3>This collapsable panel starts hidden</h3>
   <p> Est te delenit antiopam, atqui nusquam officiis nam te. Ne sea iriure suavitate definitiones, persius placerat at quo, inani debet mundi vix no. Sed ne elitr virtute, ne vis elitr omnes corpora, mei in dico novum ponderum. No paulo consulatu honestatis vis, no mel fierent corrumpit. Eam exerci conclusionemque eu, prompta inermis id sit, saepe iudico ex ius. Sit ex civibus fabellas, ad est malorum eruditi antiopam. Id hendrerit mediocritatem ius, nec ad elit vidisse, sed an eleifend deterruisset. Quem gubergren consequuntur ex vel, ex has nobis tibique. Ad qui appareat hendrerit. Dolore albucius intellegat ex ius, ei per appellantur.</p>
</div>

This is a collapsable div

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 utroque civibus atomorum. Quo saepe praesent ei. Aperiam dissentiunt an nam. In pri alia tamquam laoreet, amet theophrastus at est. Ut usu oratio homero, ad discere accusamus similique eum. Graece corrumpit qui no, et deserunt democritum per. Sea te liber aliquam, te debitis disputando pro, vis ea veniam assentior. Dico.

Collapsable <panel>s collapse down to their title (if you don't want this, wrap the <panel> in a collapsable <div>). You can open & close the panel by clicking on the title (if there is no title, a blank title bar will appear) You can also trigger it from a <btn> or <a>


<btn primary collapse="collapsable-panel">Trigger Collapse</btn>
<panel collapsed id="collapsable-panel">
   <h3>Collapsable panel - click title to open</h3>
   <lorem>
</panel>
<panel collapsed id="collapsable-panel2">
   <p>Panel Without Title Title</p>
   <lorem>
</panel>


<button type="button" class="btn btn-primary" data-target="#collapsable-panel" data-toggle="collapse" aria-expanded="true" aria-controls="collapsable-panel">Trigger Collapse</button>
<div class="panel panel-default"><div class="panel-heading" role="tab" id="collapsable-panel-head"><h3 class="panel-title"><a data-toggle="collapse" href="#collapsable-panel" aria-expanded="false" aria-controls="collapsable-panel">Collapsable panel - click title to open</a></h3></div><div class="collapse panel-collapse" aria-expanded="false" id="collapsable-panel" role="tabpanel" aria-labelledby="collapsable-panel-head"><div class="panel-body">
   
   <p> Ad tota integre sed. Iusto dissentiunt id usu, et sit esse blandit nominavi. Vero honestatis eu has, has habeo imperdiet signiferumque ex, porro eripuit deseruisse et est. 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. Aeterno lobortis suavitate quo ne. In vix mundi saperet platonem. Vel in sumo minimum. Vel ea veniam qualisque quaerendum, his habemus eloquentiam definitionem.</p>
</div></div></div>
<div class="panel panel-default"><div class="panel-heading" role="tab" id="collapsable-panel2-head"><a data-toggle="collapse" href="#collapsable-panel2" aria-expanded="false" aria-controls="collapsable-panel2"><h4 class="panel-title">&nbsp;</h4></a></div><div id="collapsable-panel2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapsable-panel2-head"><div class="panel-body">
   <p>Panel Without Title Title</p>
   <p> Quaeque ornatus praesent sit ex. Pro id novum appetere signiferumque, assum luptatum te eos. 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. Est impetus alterum deserunt cu, in propriae referrentur intellegebat mea. Graeco aperiri mei id, mentitum legendos ut has, nec vocibus liberavisse et. Eu erant libris noster pro, dictas consetetur mea te. Te mea wisi ceteros. Cu.</p>
</div></div></div>

Panel Without Title Title

Quaeque ornatus praesent sit ex. Pro id novum appetere signiferumque, assum luptatum te eos. 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. Est impetus alterum deserunt cu, in propriae referrentur intellegebat mea. Graeco aperiri mei id, mentitum legendos ut has, nec vocibus liberavisse et. Eu erant libris noster pro, dictas consetetur mea te. Te mea wisi ceteros. Cu.

Accordion

<accordion> <panel></panel> ... </accordion>`

Create a collapsable accordion using the <accordion> tag. Inside, put your contents inside <panel>s.

By default, the accordion initialised with the first panel expanded. To default to another panel, add the attribute active to one or more. To start with the accordion closed, add the attribute closed to the accordion tag.


<accordion>
   <panel>
      <h3>Title 1</h3>
      <lorem>
   </panel>
   <panel>
      <h3>Title 2</h3>
      <lorem>
   </panel>
   <panel>
      <h3>Title 3</h3>
      <lorem>
   </panel>
</accordion>
<accordion primary closed>
   <panel><lorem></panel>
   <panel><lorem></panel>
   <panel><lorem></panel>
</accordion>


<div class="panel-group" id="octoml-61" role="tablist" aria-multiselectable="true">
   <div class="panel panel-default"><div class="panel-heading" role="tab" id="octoml-63-head"><h3 class="panel-title"><a data-toggle="collapse" data-parent="#octoml-61" href="#octoml-63" aria-expanded="true" aria-controls="octoml-63">Title 1</a></h3></div><div id="octoml-63" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="octoml-63-head"><div class="panel-body">
      
      <p> Has id mutat essent liberavisse. Oporteat legendos delicatissimi ei ius. Pri omittam consequat ex, id alienum perfecto antiopam mei. Sed tale scripta et, vel et debet iuvaret accusata, cu feugait accusam ocurreret has. 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 vix inermis laboramus eloquentiam. Et nec modus everti, omnis errem cetero ius ut. Quo eirmod nominavi et,.</p>
   </div></div></div>
   <div class="panel panel-default"><div class="panel-heading" role="tab" id="octoml-64-head"><h3 class="panel-title"><a data-toggle="collapse" data-parent="#octoml-61" href="#octoml-64" aria-expanded="false" aria-controls="octoml-64">Title 2</a></h3></div><div id="octoml-64" class="panel-collapse collapse" role="tabpanel" aria-labelledby="octoml-64-head"><div class="panel-body">
      
      <p> An his everti feugait, sanctus oportere ullamcorper et eam, eos elitr reformidans te. Pri eu regione expetenda, mel cu sint docendi efficiendi. An duo lorem aliquando, usu nibh minimum id. Eos ea mutat sonet evertitur, per dolore vivendo reformidans an, cum labores dolorem eleifend ut. Ex mea iudico dolore, mea minim nullam an. Nec ut brute soluta complectitur. Nam in facilisis repudiare vulputate, atqui commune te cum. Cu usu singulis constituam. Id aliquip apeirian sea, inimicus volutpat in est, pri duis suavitate eu. Eu has cetero petentium argumentum, ullum verterem pertinax et ius. At sea oblique aliquando, minimum mediocrem maluisset.</p>
   </div></div></div>
   <div class="panel panel-default"><div class="panel-heading" role="tab" id="octoml-65-head"><h3 class="panel-title"><a data-toggle="collapse" data-parent="#octoml-61" href="#octoml-65" aria-expanded="false" aria-controls="octoml-65">Title 3</a></h3></div><div id="octoml-65" class="panel-collapse collapse" role="tabpanel" aria-labelledby="octoml-65-head"><div class="panel-body">
      
      <p> Oporteat legendos delicatissimi ei ius. Pri omittam consequat ex, id alienum perfecto antiopam mei. Sed tale scripta et, vel et debet iuvaret accusata, cu feugait accusam ocurreret has. 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 vix inermis laboramus eloquentiam. Et nec modus everti, omnis errem cetero ius ut. Quo eirmod nominavi et, eu vis alterum dolorum ullamcorper..</p>
   </div></div></div>
</div>
<div class="panel-group" id="octoml-62" role="tablist" aria-multiselectable="true">
   <div class="panel panel-primary"><div class="panel-heading" role="tab" id="octoml-66-head"><a data-toggle="collapse" data-parent="#octoml-62" href="#octoml-66" aria-expanded="false" aria-controls="octoml-66"><h4 class="panel-title">&nbsp;</h4></a></div><div id="octoml-66" class="panel-collapse collapse" role="tabpanel" aria-labelledby="octoml-66-head"><div class="panel-body"><p> Cu audiam efficiendi sea, eos at causae impetus suscipiantur, simul officiis cu mei. Mel quem equidem ut. Vis nominavi luptatum atomorum ne, te ignota regione nam. Nonumy tamquam his no. Et purto debet perpetua mel, quo lorem error aeterno in. Id eum quis labores officiis, sed cu ullum utroque albucius. Graeco suavitate duo ne, tincidunt democritum eos ex. Mel no elitr liberavisse. Facer persequeris eum ut. Mutat qualisque appellantur quo ei, per porro iusto appetere cu, ius quod verear at. Per ex putant civibus blandit, assum delectus imperdiet ex eam. Nibh epicurei eleifend per no. Nibh vocent consectetuer pro et..</p></div></div></div>
   <div class="panel panel-primary"><div class="panel-heading" role="tab" id="octoml-67-head"><a data-toggle="collapse" data-parent="#octoml-62" href="#octoml-67" aria-expanded="false" aria-controls="octoml-67"><h4 class="panel-title">&nbsp;</h4></a></div><div id="octoml-67" class="panel-collapse collapse" role="tabpanel" aria-labelledby="octoml-67-head"><div class="panel-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 fuisset pertinacia scriptorem, dicta novum salutatus no his. Quaeque ornatus praesent sit ex. Pro id novum appetere signiferumque, assum luptatum te eos. 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.</p></div></div></div>
   <div class="panel panel-primary"><div class="panel-heading" role="tab" id="octoml-68-head"><a data-toggle="collapse" data-parent="#octoml-62" href="#octoml-68" aria-expanded="false" aria-controls="octoml-68"><h4 class="panel-title">&nbsp;</h4></a></div><div id="octoml-68" class="panel-collapse collapse" role="tabpanel" aria-labelledby="octoml-68-head"><div class="panel-body"><p> Pro diam persius at, an possim inciderint vel. Te utinam vivendo mei. Quodsi suscipiantur ei vim, sea ridens pericula scribentur ea. Ei modus veniam praesent quo, in eam possit temporibus, rebum idque phaedrum usu cu. Novum veniam alienum sed id. Iusto persius maiorum ex sea, his posidonium scripserit vituperatoribus eu. Possim maiestatis in vis. Quo an stet voluptua facilisis, at eos vocibus scaevola ponderum. Vim affert homero et. Et eum stet civibus, ei rebum sapientem gubergren nam. Ne mei odio delectus, eam id aperiri impedit incorrupte. Pri impedit patrioque philosophia ut, sea iisque detraxit adipisci in, odio ipsum voluptaria at.</p></div></div></div>
</div>

Has id mutat essent liberavisse. Oporteat legendos delicatissimi ei ius. Pri omittam consequat ex, id alienum perfecto antiopam mei. Sed tale scripta et, vel et debet iuvaret accusata, cu feugait accusam ocurreret has. 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 vix inermis laboramus eloquentiam. Et nec modus everti, omnis errem cetero ius ut. Quo eirmod nominavi et,.

An his everti feugait, sanctus oportere ullamcorper et eam, eos elitr reformidans te. Pri eu regione expetenda, mel cu sint docendi efficiendi. An duo lorem aliquando, usu nibh minimum id. Eos ea mutat sonet evertitur, per dolore vivendo reformidans an, cum labores dolorem eleifend ut. Ex mea iudico dolore, mea minim nullam an. Nec ut brute soluta complectitur. Nam in facilisis repudiare vulputate, atqui commune te cum. Cu usu singulis constituam. Id aliquip apeirian sea, inimicus volutpat in est, pri duis suavitate eu. Eu has cetero petentium argumentum, ullum verterem pertinax et ius. At sea oblique aliquando, minimum mediocrem maluisset.

Oporteat legendos delicatissimi ei ius. Pri omittam consequat ex, id alienum perfecto antiopam mei. Sed tale scripta et, vel et debet iuvaret accusata, cu feugait accusam ocurreret has. 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 vix inermis laboramus eloquentiam. Et nec modus everti, omnis errem cetero ius ut. Quo eirmod nominavi et, eu vis alterum dolorum ullamcorper..

Cu audiam efficiendi sea, eos at causae impetus suscipiantur, simul officiis cu mei. Mel quem equidem ut. Vis nominavi luptatum atomorum ne, te ignota regione nam. Nonumy tamquam his no. Et purto debet perpetua mel, quo lorem error aeterno in. Id eum quis labores officiis, sed cu ullum utroque albucius. Graeco suavitate duo ne, tincidunt democritum eos ex. Mel no elitr liberavisse. Facer persequeris eum ut. Mutat qualisque appellantur quo ei, per porro iusto appetere cu, ius quod verear at. Per ex putant civibus blandit, assum delectus imperdiet ex eam. Nibh epicurei eleifend per no. Nibh vocent consectetuer pro et..

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 novum appetere signiferumque, assum luptatum te eos. 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.

Pro diam persius at, an possim inciderint vel. Te utinam vivendo mei. Quodsi suscipiantur ei vim, sea ridens pericula scribentur ea. Ei modus veniam praesent quo, in eam possit temporibus, rebum idque phaedrum usu cu. Novum veniam alienum sed id. Iusto persius maiorum ex sea, his posidonium scripserit vituperatoribus eu. Possim maiestatis in vis. Quo an stet voluptua facilisis, at eos vocibus scaevola ponderum. Vim affert homero et. Et eum stet civibus, ei rebum sapientem gubergren nam. Ne mei odio delectus, eam id aperiri impedit incorrupte. Pri impedit patrioque philosophia ut, sea iisque detraxit adipisci in, odio ipsum voluptaria at.

<carousel> <slide></slide> ... </carousel>

To create a carousel, wrap <slide>s in a <carousel> tag. By default the carousel starts at the first slide. To set another put the attribute active to another <slide>.

You can set the carousel to auto run by adding an auto attribute to the <carousel> tag. Inside each <slide> you can add a caption, by wrapping it in a <capt> tag.


<carousel auto>
   <slide>
      <img src="img/pic1.jpg" responsive center>
      <capt>
         <h3>Slide 1</h3>
         <lorem short>
      </capt>
   </slide>
   <slide>
      <img src="img/pic2.jpg" responsive center>
      <capt>
         <h3>Slide 2</h3>
         <lorem short>
      </capt>
   </slide>
   <slide active>
      <img src="img/pic3.jpg" responsive center>
      <capt>
         <h3>Slide 3</h3>
         <lorem short>
      </capt>
   </slide>
</carousel>


<div id="octoml-69" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
   <li data-target="#octoml-69" data-slide-to="0" class="active"></li>
   <li data-target="#octoml-69" data-slide-to="1"></li>
   <li data-target="#octoml-69" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
   <div class="item">
      <img class="img-responsive center-block" src="img/pic1.jpg">
      <div class="carousel-caption">
         <h3>Slide 1</h3>
         <p short=""> Placerat mnesarchum eu est, an pro alii deterruisset, sed ea everti reformidans. Mea soleat appetere et, eos id graeci detracto. Veri illud no mel, illud dolores scriptorem no sit. Facer splendide in est, no mea zril corpora assentior. Te posse labores scripserit qui. Nemore phaedrum liberavisse ei eam. An mea natum conclusionemque, quo adhuc affert nostrum ut, eum no antiopam torquatos scriptorem. 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.</p>
      </div>
   </div>
   <div class="item">
      <img class="img-responsive center-block" src="img/pic2.jpg">
      <div class="carousel-caption">
         <h3>Slide 2</h3>
         <p short=""> Te mea docendi volumus neglegentur. Usu scripta iuvaret et, per an iudico feugait. In vix doctus tibique salutatus, at mel erat albucius fabellas, melius consequat vim cu. Vix ex dicta diceret alterum, id accumsan detracto theophrastus nec. Quando placerat temporibus est in. Ignota ornatus at mel. Elitr dolorem facilisis id his, causae verterem quo no. Dolorum indoctum reformidans eos et, cu eam partem impedit. Vix ea porro possim prompta, vide utinam an eos. Cu qui tritani deseruisse, at tritani expetenda conceptam sed, te his iriure aliquando. Ne vocent corrumpit accommodare vis. Doctus iriure intellegam nec in, homero adolescens conclusionemque quo.</p>
      </div>
   </div>
   <div class="item active">
      <img class="img-responsive center-block" src="img/pic3.jpg">
      <div class="carousel-caption">
         <h3>Slide 3</h3>
         <p short=""> 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 consectetuer conclusionemque mea, an viris volutpat reformidans mea. An sumo urbanitas vel, ad has impedit copiosae constituto. Cum ad brute soleat utroque, tantas scriptorem at cum. Est iriure qualisque et, unum scaevola molestiae sea at, sit ea quem mucius praesent. Ea eam copiosae tractatos, vis an aperiam delicata interpretaris, in usu summo molestiae. Te iudico impetus regione qui, ius cu partem consetetur conclusionemque. Sit doctus evertitur ad. Id tale suavitate his,.</p>
      </div>
   </div>
</div>
<a class="left carousel-control" href="#octoml-69" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
<a class="right carousel-control" href="#octoml-69" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div>

Autofill a carousel using the <gallery> tag. Each picture will be put into a separate <slide>.


<carousel auto>
<gallery files="img/*.jpg" style="margin:auto;">
</gallery>
</carousel>


<div id="octoml-70" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
   <li data-target="#octoml-70" data-slide-to="0" class="active"></li>
   <li data-target="#octoml-70" data-slide-to="1"></li>
   <li data-target="#octoml-70" data-slide-to="2"></li>
   <li data-target="#octoml-70" data-slide-to="3"></li>
   <li data-target="#octoml-70" data-slide-to="4"></li>
   <li data-target="#octoml-70" data-slide-to="5"></li>
   <li data-target="#octoml-70" data-slide-to="6"></li>
   <li data-target="#octoml-70" data-slide-to="7"></li>
   <li data-target="#octoml-70" data-slide-to="8"></li>
   <li data-target="#octoml-70" data-slide-to="9"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"><img class="img-responsive center-block" src="img/pic1.jpg" alt="Image 1" style="margin:auto;"></div>
<div class="item"><img class="img-responsive center-block" src="img/pic10.jpg" alt="Image 2" style="margin:auto;"></div>
<div class="item"><img class="img-responsive center-block" src="img/pic2.jpg" alt="Image 3" style="margin:auto;"></div>
<div class="item"><img class="img-responsive center-block" src="img/pic3.jpg" alt="Image 4" style="margin:auto;"></div>
<div class="item"><img class="img-responsive center-block" src="img/pic4.jpg" alt="Image 5" style="margin:auto;"></div>
<div class="item"><img class="img-responsive center-block" src="img/pic5.jpg" alt="Image 6" style="margin:auto;"></div>
<div class="item"><img class="img-responsive center-block" src="img/pic6.jpg" alt="Image 7" style="margin:auto;"></div>
<div class="item"><img class="img-responsive center-block" src="img/pic7.jpg" alt="Image 8" style="margin:auto;"></div>
<div class="item"><img class="img-responsive center-block" src="img/pic8.jpg" alt="Image 9" style="margin:auto;"></div>
<div class="item"><img class="img-responsive center-block" src="img/pic9.jpg" alt="Image 10" style="margin:auto;"></div>
</div>
<a class="left carousel-control" href="#octoml-70" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
<a class="right carousel-control" href="#octoml-70" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div>