View Code
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
Alignment
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
...
</ul>
Headers
Disabled menu items
Dropup variation
View Code
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<!-- Dropdown menu links -->
</ul>
</div>
Navs
Tabs
View Code
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
Pills
View Code
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<ul class="nav nav-pills nav-stacked">
...
</ul>
Justified
<ul class="nav nav-tabs nav-justified" role="tablist">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
Disabled links
<ul class="nav nav-pills">
...
<li class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Using dropdowns
Tabs with dropdowns
<ul class="nav nav-tabs" role="tablist">
...
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
...
</ul>
Pills with dropdowns
<ul class="nav nav-pills">
...
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
...
</ul>
Modals
Text in a modal
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Popover in a modal
This button should trigger a popover on click.
Tooltips in a modal
This link and that link should have tooltips on hover.
Overflowing text to show scroll behavior
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
View Code
<button data-target="#myModal" data-toggle="modal" class="btn btn-primary btn-lg" onClick="return false;">
Launch demo modal
</button>
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal fade" id="myModal" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 id="myModalLabel" class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<h4>Popover in a modal</h4>
<p>This <a data-content="And here's some amazing content. It's very engaging. right?" title="" class="btn btn-default popover-test" role="button" href="#" data-original-title="A Title">button</a> should trigger a popover on click.</p>
<h4>Tooltips in a modal</h4>
<p><a title="" class="tooltip-test" href="#" data-original-title="Tooltip">This link</a> and <a title="" class="tooltip-test" href="#" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p>
<hr>
<h4>Overflowing text to show scroll behavior</h4>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button class="btn btn-primary" type="button">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
Optional sizes
View Code
<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg" onClick="return false;">Large modal</button>
<div aria-hidden="true" aria-labelledby="myLargeModalLabel" role="dialog" tabindex="-1" class="modal fade bs-example-modal-lg" style="display: none;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 id="myLargeModalLabel" class="modal-title">Large modal</h4>
</div>
<div class="modal-body">
...
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm" onClick="return false;">Small modal</button>
<div aria-hidden="true" aria-labelledby="mySmallModalLabel" role="dialog" tabindex="-1" class="modal fade bs-example-modal-sm" style="display: none;">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 id="mySmallModalLabel" class="modal-title">Small modal</h4>
</div>
<div class="modal-body">
...
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
Remove animation
For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
...
</div>
Usage
The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the <body> to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.
Via data attributes
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".
| Name |
type |
default |
description |
| backdrop |
boolean or the string 'static' |
true |
Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. |
| keyboard |
boolean |
true |
Closes the modal when escape key is pressed |
| show |
boolean |
true |
Shows the modal when initialized. |
| remote |
path |
false |
If a remote URL is provided, content will be loaded one time via jQuery's load method and injected into the .modal-content div. If you're using the data-api, you may alternatively use the href attribute to specify the remote source. An example of this is shown below:
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
|
Methods
.modal(options)
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).
$('#myModal').modal('toggle')
.modal('show')
Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).
$('#myModal').modal('show')
.modal('hide')
Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).
$('#myModal').modal('hide')
Events
Bootstrap's modal class exposes a few events for hooking into modal functionality.
| Event Type |
Description |
| show.bs.modal |
This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. |
| shown.bs.modal |
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event. |
| hide.bs.modal |
This event is fired immediately when the hide instance method has been called. |
| hidden.bs.modal |
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
| loaded.bs.modal |
This event is fired when the modal has loaded content using the remote option. |
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})
Dropdown
Within a navbar
View Code
<nav role="navigation" class="navbar navbar-default navbar-static" id="navbar-example">
<div class="container-fluid">
<div class="navbar-header">
<button data-target=".bs-example-js-navbar-collapse" data-toggle="collapse" type="button" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Project Name</a>
</div>
<div class="collapse navbar-collapse bs-example-js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" role="button" href="#" id="drop1">Dropdown <span class="caret"></span></a>
<ul aria-labelledby="drop1" role="menu" class="dropdown-menu">
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Another action</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Something else here</a></li>
<li class="divider" role="presentation"></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" role="button" id="drop2" href="#">Dropdown 2 <span class="caret"></span></a>
<ul aria-labelledby="drop2" role="menu" class="dropdown-menu">
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Another action</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Something else here</a></li>
<li class="divider" role="presentation"></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" id="fat-menu">
<a data-toggle="dropdown" class="dropdown-toggle" role="button" id="drop3" href="#">Dropdown 3 <span class="caret"></span></a>
<ul aria-labelledby="drop3" role="menu" class="dropdown-menu">
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Another action</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Something else here</a></li>
<li class="divider" role="presentation"></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container-fluid -->
</nav>
Within pills
View Code
<ul class="nav nav-pills">
<li class="active"><a href="#">Regular link</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" role="button" id="drop4">Dropdown <span class="caret"></span></a>
<ul aria-labelledby="drop4" role="menu" class="dropdown-menu" id="menu1">
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Another action</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Something else here</a></li>
<li class="divider" role="presentation"></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" role="button" id="drop5">Dropdown 2 <span class="caret"></span></a>
<ul aria-labelledby="drop5" role="menu" class="dropdown-menu" id="menu2">
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Another action</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Something else here</a></li>
<li class="divider" role="presentation"></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" role="button" id="drop6">Dropdown 3 <span class="caret"></span></a>
<ul aria-labelledby="drop6" role="menu" class="dropdown-menu" id="menu3">
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Another action</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Something else here</a></li>
<li class="divider" role="presentation"></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Separated link</a></li>
</ul>
</li>
</ul>
Usage
Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .open class on the parent list item. When opened, the plugin also adds .dropdown-backdrop as a click area for closing dropdown menus when clicking outside the menu. Note: The data-toggle=dropdown attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.
Via data attributes
Add data-toggle="dropdown" to a link or button to toggle a dropdown.
<div class="dropdown">
<a data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>
Via JavaScript
Call the dropdowns via JavaScript:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown" still required
Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle="dropdown" is always required to be present on the dropdown's trigger element.
Methods
$().dropdown('toggle')
Toggles the dropdown menu of a given navbar or tabbed navigation.
Events
All dropdown events are fired at the .dropdown-menu's parent element.
| Event Type |
Description |
| show.bs.dropdown |
This event fires immediately when the show instance method is called. The toggling anchor element is available as the relatedTarget property of the event. |
| shown.bs.dropdown |
This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete). The toggling anchor element is available as the relatedTarget property of the event. |
| hide.bs.dropdown |
This event is fired immediately when the hide instance method has been called. The toggling anchor element is available as the relatedTarget property of the event. |
| hidden.bs.dropdown |
This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete). The toggling anchor element is available as the relatedTarget property of the event. |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})
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.
Usage
Requires relative positioning
No matter the implementation method, scrollspy requires the use of position: relative; on the element you're spying on. In most cases this is the <body>.
Via data attributes
To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the <body>). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component.
body {
position: relative;
}
<body data-spy="scroll" data-target=".navbar-example">
...
<div class="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
Via JavaScript
After adding position: relative; in your CSS, call the scrollspy via JavaScript:
$('body').scrollspy({ target: '.navbar-example' })
Resolvable ID targets required
Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.
Non-:visible target elements ignored
Target elements that are not :visible according to jQuery will be ignored and their corresponding nav items will never be highlighted.
Methods
.scrollspy('refresh')
When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".
| Name |
type |
default |
description |
| offset |
number |
10 |
Pixels to offset from top when calculating position of scroll. |
Events
| Event Type |
Description |
| activate.bs.scrollspy |
This event fires whenever a new item becomes activated by the scrollspy. |
Events
| Event Type |
Description |
| activate.bs.scrollspy |
This event fires whenever a new item becomes activated by the scrollspy. |
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something…
})