+
-
Individual or compiled
-
Plugins can be included individually (using Bootstrap's individual *.js files), or all at once (using bootstrap.js or the minified bootstrap.min.js).
+
Individual or compiled
+
Plugins can be included individually (using Bootstrap's individual *.js files), or all at once (using bootstrap.js or the minified bootstrap.min.js).
-
-
Do not attempt to include both.
-
Both bootstrap.js and bootstrap.min.js contain all plugins in a single file.
-
+
+
Do not attempt to include both.
+
Both bootstrap.js and bootstrap.min.js contain all plugins in a single file.
+
-
-
Plugin dependencies
-
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.
-
+
+
Plugin dependencies
+
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
-
You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.
+
Data attributes
+
You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.
-
That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with data-api. This looks like this:
+
That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with data-api. This looks like this:
{% highlight js %}
$(document).off('.data-api')
{% endhighlight %}
-
Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:
+
Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:
{% highlight js %}
$(document).off('.alert.data-api')
{% endhighlight %}
-
Programmatic API
-
We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.
+
Programmatic API
+
We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.
{% highlight js %}
$('.btn.danger').button('toggle').addClass('fat')
{% endhighlight %}
-
All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):
+
All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):
{% highlight js %}
$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately
{% endhighlight %}
-
Each plugin also exposes its raw constructor on a Constructor property: $.fn.popover.Constructor. If you'd like to get a particular plugin instance, retrieve it directly from an element: $('[rel=popover]').data('popover').
+
Each plugin also exposes its raw constructor on a Constructor property: $.fn.popover.Constructor. If you'd like to get a particular plugin instance, retrieve it directly from an element: $('[rel=popover]').data('popover').
-
No conflict
-
Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call .noConflict on the plugin you wish to revert the value of.
+
No conflict
+
Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call .noConflict on the plugin you wish to revert the value of.
{% highlight js %}
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
{% endhighlight %}
-
Events
-
Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show) is triggered at the start of an event, and its past participle form (ex. shown) is trigger on the completion of an action.
-
As of 3.0.0, all Bootstrap events are namespaced.
-
All infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.
+
Events
+
Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show) is triggered at the start of an event, and its past participle form (ex. shown) is trigger on the completion of an action.
+
As of 3.0.0, all Bootstrap events are namespaced.
+
All infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.
{% highlight js %}
$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown
})
{% endhighlight %}
-
-
Third-party libraries
-
Bootstrap does not officially support third-party JavaScript libraries like Prototype or jQuery UI. Despite .noConflict and namespaced events, there may be compatibility problems that you need to fix on your own.
-
+
+
Third-party libraries
+
Bootstrap does not officially support third-party JavaScript libraries like Prototype or jQuery UI. Despite .noConflict and namespaced events, there may be compatibility problems that you need to fix on your own.
+
+
+
+
+
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.
+
+
-
-
-
-
-
-
About transitions
-
For simple transition effects, include transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.
-
What's inside
-
Transition.js is a basic helper for transitionEnd events as well as a CSS transition emulator. It's used by the other plugins to check for CSS transition support and to catch hanging transitions.
-
-
-
-
-
-
-
-
-
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.
-
-
-
-
Static example
-
A rendered modal with header, body, and set of actions in the footer.
-
+
Static example
+
A rendered modal with header, body, and set of actions in the footer.
+
{% highlight html %}
@@ -153,54 +148,54 @@ $('#myModal').on('show.bs.modal', function (e) {
{% endhighlight %}
-
Live demo
-
Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.
-
-
-
-
+
Live demo
+
Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.
+
+
+
+
-
-
-
Text in a modal
-
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+
+
+
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.
+
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.
+
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.
-
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.
-
-
+
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.
+
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.
+
+
-
-
-
+
+
+
-
-
- Launch demo modal
-
-
+
+
+ Launch demo modal
+
+
{% highlight html %}
@@ -228,18 +223,18 @@ $('#myModal').on('show.bs.modal', function (e) {
{% endhighlight %}
-
-
Make modals accessible
-
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.
-
+
Make modals accessible
+
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.
+
Optional sizes
- Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog.
-
- Large modal
- Small modal
-
+ Optional sizes
+ Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog.
+
+ Large modal
+ Small modal
+
{% highlight html %}
Large modal
@@ -264,266 +259,264 @@ $('#myModal').on('show.bs.modal', function (e) {
{% endhighlight %}
-
-
-
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.
+
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
-
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.
+
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.
{% highlight html %}
Launch modal
{% endhighlight %}
-
Via JavaScript
-
Call a modal with id myModal with a single line of JavaScript:
- {% highlight js %}$('#myModal').modal(options){% endhighlight %}
+
Via JavaScript
+
Call a modal with id myModal with a single line of JavaScript:
+ {% highlight js %}$('#myModal').modal(options){% endhighlight %}
-
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 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:
+ 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 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 %}
-
-
-
-
+
+
+
-
Methods
+
Methods
-
.modal(options)
-
Activates your content as a modal. Accepts an optional options object.
+
.modal(options)
+
Activates your content as a modal. Accepts an optional options object.
{% highlight js %}
$('#myModal').modal({
keyboard: false
})
{% endhighlight %}
-
.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).
- {% highlight js %}$('#myModal').modal('toggle'){% endhighlight %}
+
.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).
+ {% highlight js %}$('#myModal').modal('toggle'){% endhighlight %}
-
.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).
- {% highlight js %}$('#myModal').modal('show'){% endhighlight %}
+
.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).
+ {% highlight js %}$('#myModal').modal('show'){% endhighlight %}
-
.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).
- {% highlight js %}$('#myModal').modal('hide'){% endhighlight %}
+
.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).
+ {% highlight js %}$('#myModal').modal('hide'){% endhighlight %}
-
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.
-
-
-
-
+
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.
+
+
+
+
{% highlight js %}
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})
{% endhighlight %}
-
+