Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.
An isolated (without dropdown toggle) dropdown menu example, designed to be used with the dropdown javascript plugin.
++<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> + <li><a tabindex="-1" href="#">Action</a></li> + <li><a tabindex="-1" href="#">Another action</a></li> + <li><a tabindex="-1" href="#">Something else here</a></li> + <li class="divider"></li> + <li><a tabindex="-1" href="#">Separated link</a></li> +</ul> ++ + +
Dropdowns require...
+ ++<ul class="nav nav-pills"> + <li class="active"><a href="#">Regular link</a></li> + <li class="dropdown" id="menu1"> + <a id="dLabel" role="button" class="dropdown-toggle" data-toggle="dropdown" href="#menu1"> + Dropdown + <b class="caret"></b> + </a> + <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> + <li><a tabindex="-1" href="#">Action</a></li> + <li><a tabindex="-1" href="#">Another action</a></li> + <li><a tabindex="-1" href="#">Something else here</a></li> + <li class="divider"></li> + <li><a tabindex="-1" href="#">Separated link</a></li> + </ul> + </li> + ... +</ul>+ + +
...
+ +...
+ +...
+ + +...
+ + +A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.
+Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
A rendered modal with header, body, and set of actions in the footer.
+<-- Button to trigger modal --> +<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> + +<-- Modal --> +<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal">×</button> + <h3 id="myModalLabel">Modal header</h3> + </div> + <div class="modal-body"> + <p>One fine body…</p> + </div> + <div class="modal-footer"> + <a href="#" role="button" class="btn">Close</a> + <a href="#" role="button" class="btn btn-primary">Save changes</a> + </div> +</div> +
Call the modal via javascript:
+ +Activate a modal without writing javascript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.
+<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button> ++ +
Call a modal with id myModal with a single line of javascript:
$('#myModal').modal(options)
You can activate modals on your page easily without having to write a single line of javascript. Just set data-toggle="modal" on a controller element with a data-target="#foo" or href="#foo" which corresponds to a modal element id, and when clicked, it will launch your modal.
Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.
--<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch Modal</a> --
-<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> - <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal">×</button> - <h3 id="myModalLabel">Modal header</h3> - </div> - <div class="modal-body"> - <p>One fine body…</p> - </div> - <div class="modal-footer"> - <a href="#" role="button" class="btn">Close</a> - <a href="#" role="button" class="btn btn-primary">Save changes</a> - </div> -</div> -- -
.fade class to the .modal element (refer to the demo to see this in action) and include bootstrap-transition.js.
- Activates your content as a modal. Accepts an optional options object.
Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.
Click on the dropdown nav links in the navbar and pills below to test dropdowns.
+Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.
+Call the dropdowns via javascript:
-$('.dropdown-toggle').dropdown()
- To quickly add dropdown functionality to any element just add data-toggle="dropdown" and any valid bootstrap dropdown will automatically be activated.
data-target="#fat" or href="#fat".
- Add data-toggle="dropdown" to a link or button to toggle a dropdown.
-<ul class="nav nav-pills"> - <li class="active"><a href="#">Regular link</a></li> - <li class="dropdown" id="menu1"> - <a id="dLabel" role="button" class="dropdown-toggle" data-toggle="dropdown" href="#menu1"> - Dropdown - <b class="caret"></b> - </a> - <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> - <li><a tabindex="-1" href="#">Action</a></li> - <li><a tabindex="-1" href="#">Another action</a></li> - <li><a tabindex="-1" href="#">Something else here</a></li> - <li class="divider"></li> - <li><a tabindex="-1" href="#">Separated link</a></li> - </ul> - </li> - ... -</ul>+<div class="dropdown"> + <a class="dropdown-toggle" href="#">Dropdown trigger</a> + <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> + ... + </ul> +</div> +
To keep URLs intact, use the data-target attribute instead of href="#".
-<ul class="nav nav-pills"> - <li class="dropdown"> - <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> - Dropdown - <b class="caret"></b> - </a> - <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> - ... - </ul> - </li> -</ul> +<div class="dropdown"> + <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> + Dropdown + <b class="caret"></b> + </a> + <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> + ... + </ul> +</div>+ +
Call the dropdowns via javascript:
+$('.dropdown-toggle').dropdown()
+
A programatic api for activating menus for a given navbar or tabbed navigation.
@@ -498,10 +491,9 @@ $('#myModal').on('hidden', function () {The ScrollSpy plugin is for automatically updating nav targets based on scroll position.
-Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!
+The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.
- Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. -
+Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
- Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt. -
+Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
- Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone. -
+Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
- In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt. -
+In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
- Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. -
+Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use.
<body data-spy="scroll" data-target=".navbar">...</body>+ +
Call the scrollspy via javascript:
$('#navbar').scrollspy()
- To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body).
<body data-spy="scroll" >...</body>+
<a href="#home">home</a> must correspond to something in the dom like <div id="home"></div>.
When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:
@@ -568,6 +558,7 @@ $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') }); +Data attributes are used for the previous and next conrols. Check out the example markup below.
@@ -1337,6 +1369,7 @@ $('#myCollapsible').on('hidden', function () {
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
+
Initializes the carousel with an optional options object and starts cycling through items.
Cycles to the previous item.
Cycles to the next item.
+Bootstrap's carousel class exposes two events for hooking into carousel functionality.
{{_i}}You can activate modals on your page easily without having to write a single line of javascript. Just set data-toggle="modal" on a controller element with a data-target="#foo" or href="#foo" which corresponds to a modal element id, and when clicked, it will launch your modal.
Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.{{/i}}
-
-<a href="#myModal" role="button" class="btn" data-toggle="modal">{{_i}}Launch Modal{{/i}}</a>
-
-
-<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal">×</button>
- <h3 id="myModalLabel">Modal header</h3>
- </div>
- <div class="modal-body">
- <p>{{_i}}One fine body…{{/i}}</p>
- </div>
- <div class="modal-footer">
- <a href="#" role="button" class="btn">{{_i}}Close{{/i}}</a>
- <a href="#" role="button" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
- </div>
-</div>
-
-
- .fade class to the .modal element (refer to the demo to see this in action) and include bootstrap-transition.js.{{/i}}
- {{_i}}Activates your content as a modal. Accepts an optional options object.{{/i}}
{{_i}}Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.{{/i}}
{{_i}}Click on the dropdown nav links in the navbar and pills below to test dropdowns.{{/i}}
+{{_i}}Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.{{/i}}
+{{_i}}Call the dropdowns via javascript:{{/i}}
-$('.dropdown-toggle').dropdown()
- {{_i}}To quickly add dropdown functionality to any element just add data-toggle="dropdown" and any valid bootstrap dropdown will automatically be activated.{{/i}}
data-target="#fat" or href="#fat".{{/i}}
- {{_i}}Add data-toggle="dropdown" to a link or button to toggle a dropdown.{{/i}}
-<ul class="nav nav-pills">
- <li class="active"><a href="#">Regular link</a></li>
- <li class="dropdown" id="menu1">
- <a id="dLabel" role="button" class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
- {{_i}}Dropdown{{/i}}
- <b class="caret"></b>
- </a>
- <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
- <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
- <li class="divider"></li>
- <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
- </ul>
- </li>
- ...
-</ul>
+<div class="dropdown">
+ <a class="dropdown-toggle" href="#">Dropdown trigger</a>
+ <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+ ...
+ </ul>
+</div>
+
{{_i}}To keep URLs intact, use the data-target attribute instead of href="#".{{/i}}
-<ul class="nav nav-pills">
- <li class="dropdown">
- <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
- {{_i}}Dropdown{{/i}}
- <b class="caret"></b>
- </a>
- <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
- ...
- </ul>
- </li>
-</ul>
+<div class="dropdown">
+ <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
+ {{_i}}Dropdown{{/i}}
+ <b class="caret"></b>
+ </a>
+ <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+ ...
+ </ul>
+</div>
+
+ {{_i}}Call the dropdowns via javascript:{{/i}}
+$('.dropdown-toggle').dropdown()
+
{{_i}}A programatic api for activating menus for a given navbar or tabbed navigation.{{/i}}
@@ -423,10 +416,9 @@ $('#myModal').on('hidden', function () {{{_i}}The ScrollSpy plugin is for automatically updating nav targets based on scroll position.{{/i}}
-{{_i}}Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!{{/i}}
+{{_i}}The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.{{/i}}
- Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. -
+Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
- Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt. -
+Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
- Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone. -
+Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
- In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt. -
+In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
- Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. -
+Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
{{_i}}To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use.{{/i}}
<body data-spy="scroll" data-target=".navbar">...</body>+ +
{{_i}}Call the scrollspy via javascript:{{/i}}
$('#navbar').scrollspy()
- {{_i}}To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body).{{/i}}
<body data-spy="scroll" >...</body>+
<a href="#home">home</a> must correspond to something in the dom like <div id="home"></div>.{{/i}}
{{_i}}When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:{{/i}}
@@ -493,6 +483,7 @@ $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') }); +{{_i}}Data attributes are used for the previous and next conrols. Check out the example markup below.{{/i}}
@@ -1262,6 +1294,7 @@ $('#myCollapsible').on('hidden', function () {
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
+
{{_i}}Initializes the carousel with an optional options object and starts cycling through items.{{/i}}
{{_i}}Cycles to the previous item.{{/i}}
{{_i}}Cycles to the next item.{{/i}}
+{{_i}}Bootstrap's carousel class exposes two events for hooking into carousel functionality.{{/i}}