JavaScript
In this section presented all default Bootstrap's custom jQuery plugins like modals, dropdowns, scrollspy, tabs, tooltips, popovers, alerts, collapse, carousel, affix.
In this section presented all default Bootstrap's custom jQuery plugins like modals, dropdowns, scrollspy, tabs, tooltips, popovers, alerts, collapse, carousel, affix.
Overview of all default Bootstrap's jQuery plugins you will find in the relevant section of the oficcial documentation. We didn't change anything here.
For detailed information please check Bootstrap's transitions.js plugin page.
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
A rendered modal with header, body, and buttons in the footer.
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>Modal body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-danger" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-sm btn-success">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success btn-sm">Save changes</button>
</div>
</div>
</div>
</div>
Modals have two optional sizes, available via modifier classes .modal-lg and .modal-sm to be placed on a .modal-dialog.
<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".tron-example-modal-lg">Large modal</button>
<div class="modal fade tron-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".tron-example-modal-sm">Small modal</button>
<div class="modal fade tron-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>
Refer to official Bootstrap documentation regarding usage, options and methods of modal.js plugin. Documentation can be found here.
Add dropdown menus to nearly anything with this dropdown plugin, including the navbar, tabs, and pills.
Refer to official Bootstrap documentation regarding usage, options and methods of dropdown.js plugin. Documentation can be found here.
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.
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.
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.
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.
Refer to official Bootstrap documentation regarding usage, options and methods of scrollspy.js plugin. Documentation can be found here.
Add tab functionality to transition through panes of local content and even via dropdown menus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse nesciunt minima, natus cumque at tenetur, omnis facilis quae aperiam rerum, sed voluptate culpa vero nam placeat. Deleniti nemo quos, minus? Adipisci obcaecati tempore tempora minus aspernatur numquam repellat quasi optio quis dolore. Quis ullam aperiam quos libero fuga dignissimos asperiores iste reiciendis. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Refer to official Bootstrap documentation regarding usage, options and methods of tab.js plugin. Documentation can be found here.
Hover over the links below to see tooltips:
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
Refer to official Bootstrap documentation regarding usage, options and methods of tooltip.js plugin. Documentation can be found here.
Small popups with content for housing secondary information.
Four options are available: top, right, bottom, and left aligned.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>
<oggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
Refer to official Bootstrap documentation regarding usage, options and methods of popover.js plugin. Documentation can be found here.
Add dismiss functionality to all alert messages with this plugin.
Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Refer to official Bootstrap documentation regarding usage, options and methods of alert.js plugin. Documentation can be found here.
Do more with buttons. Control button states or create groups of buttons for components like checkbox and radio groups.
Add data-toggle="buttons" to a group of checkboxes for checkbox style toggling on btn-group. Also place .with-checkbox on each individual .btn for proper alignment.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary with-checkbox">
<input type="checkbox"> Option 1
</label>
<label class="btn btn-primary with-checkbox">
<input type="checkbox"> Option 2
</label>
<label class="btn btn-primary with-checkbox">
<input type="checkbox"> Option 3
</label>
</div>
Add data-toggle="buttons" to a group of radio inputs for radio style toggling on btn-group. Also place .with-radio on each individual .btn for proper alignment.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary with-radio">
<input type="radio" name="options" id="option1"> Option 1
</label>
<label class="btn btn-primary with-radio">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary with-radio">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
Refer to official Bootstrap documentation regarding usage and methods of buttons.js plugin.
Documentation can be found here.
Collapse requires the transitions plugin to be included in your version of Bootstrap.
Using the collapse plugin, we built a simple accordion by extending the panel component.
Make sure you keep HTML structure as in example below. Otherwise accordion is not going to work.
<div class="panel-group panel-group-primary" id="accordion">
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title active">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
...
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
...
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
...
</div>
</div>
</div>
</div>
The same as with panels you can switch between 6 colors with modifier classes .panel-group-default, .panel-group-primary, .panel-group-success, .panel-group-info, .panel-group-warning, .panel-group-danger placed on .panel-group.
You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>
<div id="demo" class="collapse in">...</div>
Refer to official Bootstrap documentation regarding usage, options and methods of collapse.js plugin. Documentation can be found here.
The slideshow below shows a generic plugin and component for cycling through elements like a carousel.
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 8 & 9 don't support the necessary CSS properties. Thus, there are no slide transition animations when using these browsers.
Add captions to your slides easily with the .carousel-caption element within any .item.
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>
Refer to official Bootstrap documentation regarding usage, options and methods of carousel.js plugin. Documentation can be found here.
The subnavigation on the right is a live demo of the affix plugin.
Refer to official Bootstrap documentation regarding usage, options and events of affix.js plugin. Documentation can be found here.
Update your browser to view this website correctly. Update my browser now