Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).
+
Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files). Consult our bower.json to see which versions of jQuery are supported.
Data attributes
@@ -104,6 +104,15 @@ $('#myModal').on('show.bs.modal', function (e) {
Examples
Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
+
+
Overlapping modals not supported
+
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
- Be sure to add role="dialog" to your primary modal div. In the example above, div#myModal.
- Also, the aria-labelledby attribute references your modal title. In this example, h4#myModalLabel.
- Finally, aria-hidden="true" tells assistive technologies to skip DOM elements.
- Additionally, you may give a description of your modal dialog. Use the aria-describedby attribute in the modal's primary <div> to point to this description (this is not shown in the above example).
-
+
Be sure to add role="dialog" to .modal, aria-labelledby="myModalLabel" attribute to reference the modal title, and aria-hidden="true" to tell assistive technologies to skip the modal's DOM elements.
+
Additionally, you may give a description of your modal dialog with aria-describedby on .modal.
Usage
+
The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .model-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
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.
@@ -253,7 +263,7 @@ $('#myModal').on('show.bs.modal', function (e) {
backdrop
-
boolean
+
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.
@@ -273,10 +283,11 @@ $('#myModal').on('show.bs.modal', function (e) {
remote
path
false
-
If a remote URL is provided, content will be loaded via jQuery's load method and injected into the root of the modal element. 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:
+
If a remote URL is provided, content will be loaded via jQuery's load method and injected into the root of the modal element. 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:
{% highlight html %}
Click me
{% endhighlight %}
+
@@ -443,6 +454,7 @@ $('#myModal').on('hidden.bs.modal', function () {
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.
Via data attributes
Add data-toggle="dropdown" to a link or button to toggle a dropdown.
@@ -572,7 +586,7 @@ $('#myDropdown').on('show.bs.dropdown', function () {
Usage
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.
+
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.
{% highlight html %}
...
@@ -686,6 +700,11 @@ $('#myScrollspy').on('activate.bs.scrollspy', function () {
+
You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling.
+
You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling, while adding the nav and nav-pills classes will apply pill styling.
@@ -800,16 +837,35 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+
+
Opt-in functionality
+
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
+
Tooltips in button groups and input groups require special setting
When using tooltips on elements within a .btn-group or an .input-group, you'll have to specify the option container: 'body' (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).
-
+
+
Tooltips on disabled elements require wrapper elements
+
To add a tooltip to a disabled or .disabled element, put the element inside of a <div> and apply the tooltip to that <div> instead.
+
Usage
+
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top by the plugin).
+{% highlight html linenos %}
+
+
+ Tooltip!
+
+
+
{% endhighlight %}
Options
@@ -963,10 +1019,18 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
Plugin dependency
Popovers require the tooltip plugin to be included in your version of Bootstrap.
+
+
Opt-in functionality
+
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
+
Popovers in button groups and input groups require special setting
When using popovers on elements within a .btn-group or an .input-group, you'll have to specify the option container: 'body' (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).
+
+
Popovers on disabled elements require wrapper elements
+
To add a popover to a disabled or .disabled element, put the element inside of a <div> and apply the popover to that <div> instead.
+
Static popover
Four options are available: top, right, bottom, and left aligned.
@@ -990,6 +1054,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
Popover bottom
+
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
@@ -1008,7 +1073,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
@@ -1069,7 +1134,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
selector
string
false
-
if a selector is provided, tooltip objects will be delegated to the specified targets if a selector is provided, tooltip objects will be delegated to the specified targets. in practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example.
+
if a selector is provided, tooltip objects will be delegated to the specified targets. in practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example.
trigger
@@ -1115,9 +1180,6 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.
-
Markup
-
For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.
-
Methods
$().popover(options)
Initializes popovers for an element collection.
@@ -1191,12 +1253,13 @@ $('#myPopover').on('hidden.bs.popover', function () {
-
+
Oh snap! You got an error!
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.
The collapse plugin utilizes a few classes to handle the heavy lifting:
+
+
.collapse hides the content
+
.collapse.in shows the content
+
.collapsing is added when the transition starts, and removed when it finishes
+
+
These classes can be found in component-animations.less.
Via data attributes
Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
@@ -1625,7 +1695,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
Examples
The slideshow below shows a generic plugin and component for cycling through elements like a carousel.
-
+
@@ -1633,25 +1703,25 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
With Glyphicons available, you may choose to style the left and right toggle buttons with .glyphicon .glyphicon-chevron-left and .glyphicon .glyphicon-chevron-right.
+
+
Transition animations not supported in Internet Explorer 8 & 9
+
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. We have intentionally decided not to include jQuery-based fallbacks for the transitions.
Optional captions
Add captions to your slides easily with the .carousel-caption element within any .item. Place just about any optional HTML within there and it will be automatically aligned and formatted.
-
+
@@ -1695,21 +1765,21 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
-
+
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
-
+
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
+
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
@@ -1717,10 +1787,10 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
@@ -1743,6 +1813,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
Via data attributes
Use data attributes to easily control the position of the carousel. data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", which shifts the slide position to a particular index beginning with 0.
+
The data-ride="carousel" attribute is used to mark a carousel as animating starting at page load.
Via JavaScript
Call carousel manually with:
@@ -1866,8 +1937,8 @@ $('#myCarousel').on('slide.bs.carousel', function () {
Requires independent styling ;)
- Affix toggles between three states/classes: affix, affix-top, and affix-bottom. You must provide the styles for these classes yourself (independent of this plugin).
- The affix-top class should be in the regular flow of the document. The affix class should be fixed to the page. And affix-bottom should be positioned absolute. Note, affix-bottom is special in that the plugin will place the element with JS relative to the offset: { bottom: number } option you've provided.
+ Affix toggles between three states/classes: .affix, .affix-top, and .affix-bottom. You must provide the styles for these classes yourself (independent of this plugin).
+ The .affix-top class should be in the regular flow of the document. The .affix class should be position: fixed. And .affix-bottom should be position: absolute. Note: .affix-bottom is special in that the plugin will place the element with JS relative to the offset: { bottom: number } option you've provided.