OverviewOverview

TransitionsTransitions

ModalModal

DropdownDropdown

ScrollspyScrollspy

TabTab

TooltipTooltip

PopoverPopover

AlertAlert

ButtonButton

CollapseCollapse

JavaScript in Bootstrap

Individual or compiledPlugins can be included individually (though some have required dependencies), or all at once. Bothbootstrap.js and bootstrap.min.js contain all plugins in a single file.

Data attributesYou can use all Bootstrap plugins purely through the markup API without writing a single line ofJavaScript. This is Bootstrap's first class API and should be your first consideration when using aplugin.

That said, in some situations it may be desirable to turn this functionality off. Therefore, we alsoprovide the ability to disable the data attribute API by unbinding all events on the body namespacedwith `'data-api'̀ . This looks like this:

JavaScript

JavaScript

JavaScriptJavaScriptBring Bootstrap's components to life—now with 13

Bring Bootstrap's components to life—now with 13

Bring Bootstrap's components to life—now with 13Bring Bootstrap's components to life—now with 13custom jQuery plugins.

custom jQuery plugins.

custom jQuery plugins.custom jQuery plugins.

jQuery / HTML5 Controls

jQuery / HTML5 Controls

jQuery / HTML5 ControlsjQuery / HTML5 Controls:

:

::Responsive Design on Any

Responsive Design on Any

Responsive Design on AnyResponsive Design on AnyBrowser, Any Platform, &

Browser, Any Platform, &

Browser, Any Platform, &Browser, Any Platform, &Any Device

Any Device

Any DeviceAny Device

ads via

ads via

ads via ads via Carbon

Carbon

CarbonCarbon

Bootstrap

Bootstrap

BootstrapBootstrapHomeHome Get startedGet started ScaffoldingScaffolding Base CSSBase CSS ComponentsComponents JavaScriptJavaScript CustomizeCustomize

CarouselCarousel

TypeaheadTypeahead

AffixAffix

1. $$(('body''body').).offoff(('.data-api''.data-api'))

Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with thedata-api namespace like this:

1. $$(('body''body').).offoff(('.alert.data-api''.alert.data-api'))

Programmatic APIWe also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. Allpublic APIs are single, chainable methods, and return the collection acted upon.

1. $$((".btn.danger"".btn.danger").).buttonbutton(("toggle""toggle").).addClassaddClass(("fat""fat"))

All methods should accept an optional options object, a string which targets a particular method, ornothing (which initiates a plugin with default behavior):

1. $$(("#myModal""#myModal").).modalmodal()() // initialized with defaults// initialized with defaults2. $$(("#myModal""#myModal").).modalmodal({({ keyboard keyboard:: falsefalse })}) // initialized with no keyboard// initialized with no keyboard3. $$(("#myModal""#myModal").).modalmodal(('show''show')) // initializes and invokes show immediately// initializes and invokes show immediately

Each plugin also exposes its raw constructor on a `Constructor` property: $.fn.popover.Constructor . Ifyou'd like to get a particular plugin instance, retrieve it directly from an element:$('[rel=popover]').data('popover') .

No ConflictSometimes it is necessary to use Bootstrap plugins with other UI frameworks. In thesecircumstances, namespace collisions can occasionally occur. If this happens, you may call .noConflicton the plugin you wish to revert the value of.

1. varvar bootstrapButton bootstrapButton == $ $..fnfn..buttonbutton..noConflictnoConflict()() // return $.fn.button to previously assigned value// return $.fn.button to previously assigned value2. $$..fnfn..bootstrapBtn bootstrapBtn == bootstrapButton bootstrapButton // give $().bootstrapBtn the bootstrap functionality// give $().bootstrapBtn the bootstrap functionality

EventsBootstrap provides custom events for most plugin's unique actions. Generally, these come in aninfinitive 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.

All infinitive events provide preventDefault functionality. This provides the ability to stop the executionof an action before it starts.

1. $$(('#myModal''#myModal').).onon(('show''show',, functionfunction ((ee)) {{2. ifif (!(!datadata)) returnreturn e e..preventDefaultpreventDefault()() // stops modal from being shown// stops modal from being shown3. })})

Transitions bootstrap-transition.js

About transitionsFor simple transition effects, include bootstrap-transition.js once alongside the other JS files. Ifyou're using the compiled (or minified) bootstrap.js, there is no need to include this—it's alreadythere.

Use casesA few examples of the transition plugin:

Sliding or fading in modalsFading out tabsFading out alertsSliding carousel panes

Modals bootstrap-modal.js

ExamplesModals are streamlined, but flexible, dialog prompts with the minimum required functionality and smartdefaults.

Static exampleA rendered modal with header, body, and set of actions in the footer.

1. <div<div classclass=="modal hide fade""modal hide fade">>2. <div<div classclass=="modal-header""modal-header">>3. <button<button typetype=="button""button" classclass=="close""close" data-dismissdata-dismiss=="modal""modal" aria-hiddenaria-hidden=="true""true">>&times;&times;</butto</butto

n>n>4. <h3><h3>Modal headerModal header</h3></h3>5. </div></div>6. <div<div classclass=="modal-body""modal-body">>7. <p><p>One fine body…One fine body…</p></p>8. </div></div>

Example

Modal header

CloseClose Save changesSave changes

One fine body…

9. <div<div classclass=="modal-footer""modal-footer">>10. <a<a hrefhref=="#""#" classclass=="btn""btn">>CloseClose</a></a>11. <a<a hrefhref=="#""#" classclass=="btn btn-primary""btn btn-primary">>Save changesSave changes</a></a>12. </div></div>13. </div></div>

Live demoToggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top ofthe page.

1. <!-- Button to trigger modal --><!-- Button to trigger modal -->2. <a<a hrefhref=="#myModal""#myModal" rolerole=="button""button" classclass=="btn""btn" data-toggledata-toggle=="modal""modal">>Launch demo modalLaunch demo modal</a></a>3. 4. <!-- Modal --><!-- Modal -->5. <div<div idid=="myModal""myModal" classclass=="modal hide fade""modal hide fade" tabindextabindex=="-1""-1" rolerole=="dialog""dialog" aria-labelledbyaria-labelledby=="myModal"myModal

Label"Label" aria-hiddenaria-hidden=="true""true">>6. <div<div classclass=="modal-header""modal-header">>7. <button<button typetype=="button""button" classclass=="close""close" data-dismissdata-dismiss=="modal""modal" aria-hiddenaria-hidden=="true""true">>××</button></button>8. <h3<h3 idid=="myModalLabel""myModalLabel">>Modal headerModal header</h3></h3>9. </div></div>

10. <div<div classclass=="modal-body""modal-body">>11. <p><p>One fine body…One fine body…</p></p>12. </div></div>13. <div<div classclass=="modal-footer""modal-footer">>14. <button<button classclass=="btn""btn" data-dismissdata-dismiss=="modal""modal" aria-hiddenaria-hidden=="true""true">>CloseClose</button></button>15. <button<button classclass=="btn btn-primary""btn btn-primary">>Save changesSave changes</button></button>16. </div></div>17. </div></div>

Launch demo modalLaunch demo modal

Example

UsageVia data attributesActivate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like abutton, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.

1. <button<button typetype=="button""button" data-toggledata-toggle=="modal""modal" data-targetdata-target=="#myModal""#myModal">>Launch modalLaunch modal</button></button>

Via JavaScriptCall a modal with id myModal with a single line of JavaScript:

1. $$(('#myModal''#myModal').).modalmodal((optionsoptions))

OptionsOptions can be passed via data attributes or JavaScript. For data attributes, append the option nameto data- , as in data-backdrop="" .

Name type default description

backdrop boolean true Includes a modal-backdrop element. Alternatively, specifystatic 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 via jQuery's

load method and injected into the .modal-body . If you'reusing the data api, you may alternatively use the href tag tospecify the remote source. An example of this is shownbelow:

1. <a<a data-toggledata-toggle=="modal""modal" hrefhref=="remote.html""remote.html" data-targetdata-target=="#modal""#modal">>click meclick me</a></a>

Methods.modal(options)Activates your content as a modal. Accepts an optional options object .

1. $$(('#myModal''#myModal').).modalmodal({({2. keyboard keyboard:: falsefalse3. })})

.modal('toggle')Manually toggles a modal.

1. $$(('#myModal''#myModal').).modalmodal(('toggle''toggle'))

.modal('show')Manually opens a modal.

1. $$(('#myModal''#myModal').).modalmodal(('show''show'))

.modal('hide')Manually hides a modal.

1. $$(('#myModal''#myModal').).modalmodal(('hide''hide'))

EventsBootstrap's modal class exposes a few events for hooking into modal functionality.

Event Description

show This event fires immediately when the show instance method is called.

shown This event is fired when the modal has been made visible to the user (willwait for css transitions to complete).

hide This event is fired immediately when the hide instance method has beencalled.

hidden This event is fired when the modal has finished being hidden from the user(will wait for css transitions to complete).

1. $$(('#myModal''#myModal').).onon(('hidden''hidden',, functionfunction ()() {{2. // do something…// do something…3. })})

Dropdowns bootstrap-dropdown.js

ExamplesAdd dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.

Within a navbar

Within tabs

UsageVia data attributesAdd data-toggle="dropdown" to a link or button to toggle a dropdown.

1. <div<div classclass=="dropdown""dropdown">>2. <a<a classclass=="dropdown-toggle""dropdown-toggle" data-toggledata-toggle=="dropdown""dropdown" hrefhref=="#""#">>Dropdown triggerDropdown trigger</a></a>3. <ul<ul classclass=="dropdown-menu""dropdown-menu" rolerole=="menu""menu" aria-labelledbyaria-labelledby=="dLabel""dLabel">>4. ... ...5. </ul></ul>6. </div></div>

To keep URLs intact, use the data-target attribute instead of href="#" .

1. <div<div classclass=="dropdown""dropdown">>2. <a<a classclass=="dropdown-toggle""dropdown-toggle" idid=="dLabel""dLabel" rolerole=="button""button" data-toggledata-toggle=="dropdown""dropdown" data-targetdata-target=="#""#"

hrefhref=="/page.html""/page.html">>

Project NameProject Name Dropdown Dropdown Dropdown 2 Dropdown 2 Dropdown 3 Dropdown 3

Example

Regular link Dropdown Dropdown 2 Dropdown 3

Example

3. Dropdown Dropdown4. <b<b classclass=="caret""caret"></b>></b>5. </a></a>6. <ul<ul classclass=="dropdown-menu""dropdown-menu" rolerole=="menu""menu" aria-labelledbyaria-labelledby=="dLabel""dLabel">>7. ... ...8. </ul></ul>9. </div></div>

Via JavaScriptCall the dropdowns via JavaScript:

1. $$(('.dropdown-toggle''.dropdown-toggle').).dropdowndropdown()()

OptionsNone

Methods$().dropdown('toggle')A programmatic api for toggling menus for a given navbar or tabbed navigation.

ScrollSpy bootstrap-scrollspy.js

Example in navbarThe ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the areabelow the navbar and watch the active class change. The dropdown sub items will be highlighted as

well.

UsageVia data attributesTo easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the elementyou want to spy on (most typically this would be the body) and data-target=".navbar" to select whichnav to use. You'll want to use scrollspy with a .nav component.

1. <body<body data-spydata-spy=="scroll""scroll" data-targetdata-target==".navbar"".navbar">>......</body></body>

Via JavaScriptCall the scrollspy via JavaScript:

Project NameProject Name @fat@fat @mdo@mdo Dropdown Dropdown

@fatAd leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold outqui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitanmcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburghoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodieselwes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisanullamco consequat.

@mdo

Example

1. $$(('#navbar''#navbar').).scrollspyscrollspy()()

Heads up!Heads up! Navbar links must have resolvable id targets. For example, aNavbar links must have resolvable id targets. For example, a<a href="#home">home</a><a href="#home">home</a> must correspond to something in the dom like must correspond to something in the dom like<div id="home"></div><div id="home"></div> ..

Methods.scrollspy('refresh')When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll needto call the refresh method like so:

1. $$(('[data-spy="scroll"]''[data-spy="scroll"]').).eacheach((functionfunction ()() {{2. varvar $spy $spy == $ $((thisthis).).scrollspyscrollspy(('refresh''refresh'))3. });});

OptionsOptions can be passed via data attributes or JavaScript. For data attributes, append the option nameto data- , as in data-offset="" .

Name type default description

offset number 10 Pixels to offset from top when calculating position ofscroll.

EventsEvent Description

activate This event fires whenever a new item becomes activated by the scrollspy.

Togglable tabs bootstrap-tab.js

Example tabsAdd quick, dynamic tab functionality to transition through panes of local content, even via dropdownmenus.

UsageEnable tabbable tabs via JavaScript (each tab needs to be activated individually):

1. $$(('#myTab a''#myTab a').).clickclick((functionfunction ((ee)) {{2. e e..preventDefaultpreventDefault();();3. $ $((thisthis).).tabtab(('show''show'););4. })})

Home Profile

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptownaliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irureterry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardiganamerican apparel, butcher voluptate nisi qui.

Dropdown

Example

You can activate individual tabs in several ways:

1. $$(('#myTab a[href="#profile"]''#myTab a[href="#profile"]').).tabtab(('show''show');); // Select tab by name// Select tab by name2. $$(('#myTab a:first''#myTab a:first').).tabtab(('show''show');); // Select first tab// Select first tab3. $$(('#myTab a:last''#myTab a:last').).tabtab(('show''show');); // Select last tab// Select last tab4. $$(('#myTab li:eq(2) a''#myTab li:eq(2) a').).tabtab(('show''show');); // Select third tab (0-indexed)// Select third tab (0-indexed)

MarkupYou can activate a tab or pill navigation without writing any JavaScript by simply specifyingdata-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.

1. <ul<ul classclass=="nav nav-tabs""nav nav-tabs">>2. <li><a<li><a hrefhref=="#home""#home" data-toggledata-toggle=="tab""tab">>HomeHome</a></li></a></li>3. <li><a<li><a hrefhref=="#profile""#profile" data-toggledata-toggle=="tab""tab">>ProfileProfile</a></li></a></li>4. <li><a<li><a hrefhref=="#messages""#messages" data-toggledata-toggle=="tab""tab">>MessagesMessages</a></li></a></li>5. <li><a<li><a hrefhref=="#settings""#settings" data-toggledata-toggle=="tab""tab">>SettingsSettings</a></li></a></li>6. </ul></ul>

Methods$().tabActivates a tab element and content container. Tab should have either a data-target or an hreftargeting a container node in the DOM.

1. <ul<ul classclass=="nav nav-tabs""nav nav-tabs" idid=="myTab""myTab">>2. <li<li classclass=="active""active"><a><a hrefhref=="#home""#home">>HomeHome</a></li></a></li>3. <li><a<li><a hrefhref=="#profile""#profile">>ProfileProfile</a></li></a></li>4. <li><a<li><a hrefhref=="#messages""#messages">>MessagesMessages</a></li></a></li>5. <li><a<li><a hrefhref=="#settings""#settings">>SettingsSettings</a></li></a></li>6. </ul></ul>7. 8. <div<div classclass=="tab-content""tab-content">>

9. <div<div classclass=="tab-pane active""tab-pane active" idid=="home""home">>......</div></div>10. <div<div classclass=="tab-pane""tab-pane" idid=="profile""profile">>......</div></div>11. <div<div classclass=="tab-pane""tab-pane" idid=="messages""messages">>......</div></div>12. <div<div classclass=="tab-pane""tab-pane" idid=="settings""settings">>......</div></div>13. </div></div>14. 15. <script><script>16. $ $((functionfunction ()() {{17. $ $(('#myTab a:last''#myTab a:last').).tabtab(('show''show'););18. })})19. </script></script>

EventsEvent Description

show This event fires on tab show, but before the new tab has been shown. Useevent.target and event.relatedTarget to target the active tab and the

previous active tab (if available) respectively.

shown This event fires on tab show after a tab has been shown. Use event.targetand event.relatedTarget to target the active tab and the previous active tab(if available) respectively.

1. $$(('a[data-toggle="tab"]''a[data-toggle="tab"]').).onon(('shown''shown',, functionfunction ((ee)) {{2. e e..target target // activated tab// activated tab3. e e..relatedTarget relatedTarget // previous tab// previous tab4. })})

Tooltips bootstrap-tooltip.js

ExamplesInspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version,which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.

For performance reasons, the tooltip and popover data-apis are opt in, meaning you must initializethem yourself.

Hover over the links below to see tooltips:

Four directions

Tooltips in input groupsWhen using tooltips and popovers with the Bootstrap input groups, you'll have to set the container(documented below) option to avoid unwanted side effects.

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard rawdenim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixiesustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beardstumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four lokomcsweeney'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.

Example

Tooltip on top Tooltip on right Tooltip on bottom Tooltip on left

Example

UsageTrigger the tooltip via JavaScript:

1. $$(('#example''#example').).tooltiptooltip((optionsoptions))

OptionsOptions can be passed via data attributes or JavaScript. For data attributes, append the option nameto data- , as in data-animation="" .

Name type default description

animation boolean true apply a css fade transition to the tooltip

html boolean false Insert html into the tooltip. If false, jquery's textmethod will be used to insert content into the dom.Use text if you're worried about XSS attacks.

placement string |function

'top' how to position the tooltip - top | bottom | left | right

selector string false If a selector is provided, tooltip objects will bedelegated to the specified targets.

title string |function

'' default title value if `title` tag isn't present

trigger string 'hoverfocus'

how tooltip is triggered - click | hover | focus | manual.Note you case pass trigger mutliple, space seperated,trigger types.

delay number |object

0 delay showing and hiding the tooltip (ms) - does notapply to manual trigger type

If a number is supplied, delay is applied to bothhide/show

Object structure is: delay: { show: 500, hide: 100 }

container string | false false Appends the tooltip to a specific elementcontainer: 'body'

Heads up!Heads up! Options for individual tooltips can alternatively be specified through the use ofOptions for individual tooltips can alternatively be specified through the use ofdata attributes.data attributes.

Markup1. <a<a hrefhref=="#""#" data-toggledata-toggle=="tooltip""tooltip" titletitle=="first tooltip""first tooltip">>hover over mehover over me</a></a>

Methods$().tooltip(options)Attaches a tooltip handler to an element collection.

.tooltip('show')Reveals an element's tooltip.

1. $$(('#element''#element').).tooltiptooltip(('show''show'))

.tooltip('hide')Hides an element's tooltip.

1. $$(('#element''#element').).tooltiptooltip(('hide''hide'))

.tooltip('toggle')Toggles an element's tooltip.

1. $$(('#element''#element').).tooltiptooltip(('toggle''toggle'))

.tooltip('destroy')Hides and destroys an element's tooltip.

1. $$(('#element''#element').).tooltiptooltip(('destroy''destroy'))

Popovers bootstrap-popover.js

ExamplesAdd small overlays of content, like those on the iPad, to any element for housing secondaryinformation. Hover over the button to trigger the popover. Requires Tooltip to be included.

Static popoverFour options are available: top, right, bottom, and left aligned.

Example

Popover top

Sed posuere consectetur est atlobortis. Aenean eu leo quam.Pellentesque ornare sem laciniaquam venenatis vestibulum.

Popover right

Sed posuere consectetur est atlobortis. Aenean eu leo quam.Pellentesque ornare sem laciniaquam venenatis vestibulum.

No markup shown as popovers are generated from JavaScript and content within a data attribute.

Live demo

Four directions

UsageEnable popovers via JavaScript:

1. $$(('#example''#example').).popoverpopover((optionsoptions))

Click to toggle popoverClick to toggle popover

Example

Popover on topPopover on top Popover on rightPopover on right Popover on bottomPopover on bottom Popover on leftPopover on left

Example

Popover bottom

Sed posuere consectetur est atlobortis. Aenean eu leo quam.Pellentesque ornare sem laciniaquam venenatis vestibulum.

Popover left

Sed posuere consectetur est atlobortis. Aenean eu leo quam.Pellentesque ornare sem laciniaquam venenatis vestibulum.

OptionsOptions can be passed via data attributes or JavaScript. For data attributes, append the option nameto data- , as in data-animation="" .

Name type default description

animation boolean true apply a css fade transition to the tooltip

html boolean false Insert html into the popover. If false, jquery's textmethod will be used to insert content into the dom.Use text if you're worried about XSS attacks.

placement string |function

'right' how to position the popover - top | bottom | left | right

selector string false if a selector is provided, tooltip objects will bedelegated to the specified targets

trigger string 'click' how popover is triggered - click | hover | focus |manual

title string |function

'' default title value if `title` attribute isn't present

content string |function

'' default content value if `data-content` attribute isn'tpresent

delay number |object

0 delay showing and hiding the popover (ms) - does notapply to manual trigger type

If a number is supplied, delay is applied to bothhide/show

Object structure is: delay: { show: 500, hide: 100 }

container string | false false Appends the popover to a specific element

container: 'body'

Heads up!Heads up! Options for individual popovers can alternatively be specified through the use ofOptions for individual popovers can alternatively be specified through the use ofdata attributes.data attributes.

MarkupFor performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use themjust specify a selector option.

Methods$().popover(options)Initializes popovers for an element collection.

.popover('show')Reveals an elements popover.

1. $$(('#element''#element').).popoverpopover(('show''show'))

.popover('hide')Hides an elements popover.

1. $$(('#element''#element').).popoverpopover(('hide''hide'))

.popover('toggle')Toggles an elements popover.

1. $$(('#element''#element').).popoverpopover(('toggle''toggle'))

.popover('destroy')

Hides and destroys an element's popover.

1. $$(('#element''#element').).popoverpopover(('destroy''destroy'))

Alert messages bootstrap-alert.js

Example alertsAdd dismiss functionality to all alert messages with this plugin.

Holy guacamole!Holy guacamole! Best check yo self, you're not looking too good. Best check yo self, you're not looking too good.

Example

Oh snap! You got an error!Oh snap! You got an error!Change this and that and try again. Duis mollis, est non commodo luctus, nisi eratChange this and that and try again. Duis mollis, est non commodo luctus, nisi eratporttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit ametporttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit ametfermentum.fermentum.

Take this actionTake this action Or do thisOr do this

Example

UsageEnable dismissal of an alert via JavaScript:

1. $$((".alert"".alert").).alertalert()()

MarkupJust add data-dismiss="alert" to your close button to automatically give an alert close functionality.

1. <a<a classclass=="close""close" data-dismissdata-dismiss=="alert""alert" hrefhref=="#""#">>&times;&times;</a></a>

Methods$().alert()Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure theyhave the .fade and .in class already applied to them.

.alert('close')Closes an alert.

1. $$((".alert"".alert").).alertalert(('close''close'))

EventsBootstrap's alert class exposes a few events for hooking into alert functionality.

Event Description

close This event fires immediately when the close instance method is called.

closed This event is fired when the alert has been closed (will wait for csstransitions to complete).

1. $$(('#my-alert''#my-alert').).bindbind(('closed''closed',, functionfunction ()() {{2. // do something…// do something…3. })})

Buttons bootstrap-button.js

Example usesDo more with buttons. Control button states or create groups of buttons for more components liketoolbars.

StatefulAdd data-loading-text="Loading..." to use a loading state on a button.

1. <button<button typetype=="button""button" classclass=="btn btn-primary""btn btn-primary" data-loading-textdata-loading-text=="Loading...""Loading...">>Loading stateLoading state</but</button>ton>

Single toggleAdd data-toggle="button" to activate toggling on a single button.

Loading stateLoading state

Example

Single ToggleSingle Toggle

Example

1. <button<button typetype=="button""button" classclass=="btn btn-primary""btn btn-primary" data-toggledata-toggle=="button""button">>Single ToggleSingle Toggle</button></button>

CheckboxAdd data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.

1. <div<div classclass=="btn-group""btn-group" data-toggledata-toggle=="buttons-checkbox""buttons-checkbox">>2. <button<button typetype=="button""button" classclass=="btn btn-primary""btn btn-primary">>LeftLeft</button></button>3. <button<button typetype=="button""button" classclass=="btn btn-primary""btn btn-primary">>MiddleMiddle</button></button>4. <button<button typetype=="button""button" classclass=="btn btn-primary""btn btn-primary">>RightRight</button></button>5. </div></div>

RadioAdd data-toggle="buttons-radio" for radio style toggling on btn-group.

1. <div<div classclass=="btn-group""btn-group" data-toggledata-toggle=="buttons-radio""buttons-radio">>2. <button<button typetype=="button""button" classclass=="btn btn-primary""btn btn-primary">>LeftLeft</button></button>3. <button<button typetype=="button""button" classclass=="btn btn-primary""btn btn-primary">>MiddleMiddle</button></button>4. <button<button typetype=="button""button" classclass=="btn btn-primary""btn btn-primary">>RightRight</button></button>5. </div></div>

LeftLeft MiddleMiddle RightRight

Example

LeftLeft MiddleMiddle RightRight

Example

UsageEnable buttons via JavaScript:

1. $$(('.nav-tabs''.nav-tabs').).buttonbutton()()

MarkupData attributes are integral to the button plugin. Check out the example code below for the variousmarkup types.

OptionsNone

Methods$().button('toggle')Toggles push state. Gives the button the appearance that it has been activated.

Heads up!Heads up! You can enable auto toggling of a button by using the You can enable auto toggling of a button by using the data-toggledata-toggle attribute. attribute.

1. <button<button typetype=="button""button" classclass=="btn""btn" data-toggledata-toggle=="button""button" >>……</button></button>

$().button('loading')Sets button state to loading - disables button and swaps text to loading text. Loading text should bedefined on the button element using the data attribute data-loading-text .

1. <button<button typetype=="button""button" classclass=="btn""btn" data-loading-textdata-loading-text=="loading stuff...""loading stuff..." >>......</button></button>

Heads up!Heads up! Firefox persists the disabled state across page loadsFirefox persists the disabled state across page loads. A workaround for this is to. A workaround for this is touse use autocomplete="off"autocomplete="off" ..

$().button('reset')Resets button state - swaps text to original text.

$().button(string)Resets button state - swaps text to any data defined text state.

1. <button<button typetype=="button""button" classclass=="btn""btn" data-complete-textdata-complete-text=="finished!""finished!" >>......</button></button>2. <script><script>3. $ $(('.btn''.btn').).buttonbutton(('complete''complete'))4. </script></script>

Collapse bootstrap-collapse.js

AboutGet base styles and flexible support for collapsible components like accordions and navigation.

* Requires the Transitions plugin to be included.

Example accordionUsing the collapse plugin, we built a simple accordion style widget:

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson adsquid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa

Example

1. <div<div classclass=="accordion""accordion" idid=="accordion2""accordion2">>2. <div<div classclass=="accordion-group""accordion-group">>3. <div<div classclass=="accordion-heading""accordion-heading">>4. <a<a classclass=="accordion-toggle""accordion-toggle" data-toggledata-toggle=="collapse""collapse" data-parentdata-parent=="#accordion2""#accordion2" hrefhref=="#collap"#collap

seOne"seOne">>5. Collapsible Group Item #1 Collapsible Group Item #16. </a></a>7. </div></div>8. <div<div idid=="collapseOne""collapseOne" classclass=="accordion-body collapse in""accordion-body collapse in">>9. <div<div classclass=="accordion-inner""accordion-inner">>

10. Anim pariatur cliche... Anim pariatur cliche...11. </div></div>12. </div></div>13. </div></div>14. <div<div classclass=="accordion-group""accordion-group">>15. <div<div classclass=="accordion-heading""accordion-heading">>16. <a<a classclass=="accordion-toggle""accordion-toggle" data-toggledata-toggle=="collapse""collapse" data-parentdata-parent=="#accordion2""#accordion2" hrefhref=="#collap"#collap

seTwo"seTwo">>17. Collapsible Group Item #2 Collapsible Group Item #218. </a></a>19. </div></div>20. <div<div idid=="collapseTwo""collapseTwo" classclass=="accordion-body collapse""accordion-body collapse">>21. <div<div classclass=="accordion-inner""accordion-inner">>22. Anim pariatur cliche... Anim pariatur cliche...23. </div></div>

Collapsible Group Item #2

Collapsible Group Item #3

nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squidsingle-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beerlabore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vicelomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt youprobably haven't heard of them accusamus labore sustainable VHS.

24. </div></div>25. </div></div>26. </div></div>27. ......

You can also use the plugin without the accordion markup. Make a button toggle the expanding andcollapsing of another element.

1. <button<button typetype=="button""button" classclass=="btn btn-danger""btn btn-danger" data-toggledata-toggle=="collapse""collapse" data-targetdata-target=="#demo""#demo">>2. simple collapsible simple collapsible3. </button></button>4. 5. <div<div idid=="demo""demo" classclass=="collapse in""collapse in">> … … </div></div>

UsageVia data attributesJust add data-toggle="collapse" and a data-target to element to automatically assign control of acollapsible element. The data-target attribute accepts a css selector to apply the collapse to. Besure to add the class collapse to the collapsible element. If you'd like it to default open, add theadditional class in .

To add accordion-like group management to a collapsible control, add the data attributedata-parent="#selector" . Refer to the demo to see this in action.

Via JavaScriptEnable manually with:

1. $$((".collapse"".collapse").).collapsecollapse()()

OptionsOptions can be passed via data attributes or JavaScript. For data attributes, append the option nameto data- , as in data-parent="" .

Name type default description

parent selector false If selector then all collapsible elements under the specifiedparent will be closed when this collapsible item is shown.(similar to traditional accordion behavior)

toggle boolean true Toggles the collapsible element on invocation

Methods.collapse(options)Activates your content as a collapsible element. Accepts an optional options object .

1. $$(('#myCollapsible''#myCollapsible').).collapsecollapse({({2. toggle toggle:: falsefalse3. })})

.collapse('toggle')Toggles a collapsible element to shown or hidden.

.collapse('show')Shows a collapsible element.

.collapse('hide')Hides a collapsible element.

EventsBootstrap's collapse class exposes a few events for hooking into collapse functionality.

Event Description

show This event fires immediately when the show instance method is called.

shown This event is fired when a collapse element has been made visible to theuser (will wait for css transitions to complete).

hide This event is fired immediately when the hide method has been called.

hidden This event is fired when a collapse element has been hidden from the user(will wait for css transitions to complete).

1. $$(('#myCollapsible''#myCollapsible').).onon(('hidden''hidden',, functionfunction ()() {{2. // do something…// do something…3. })})

Carousel bootstrap-carousel.js

Example carouselThe slideshow below shows a generic plugin and component for cycling through elements like acarousel.

Example

1. <div<div idid=="myCarousel""myCarousel" classclass=="carousel slide""carousel slide">>2. <ol<ol classclass=="carousel-indicators""carousel-indicators">>3. <li<li data-targetdata-target=="#myCarousel""#myCarousel" data-slide-todata-slide-to=="0""0" classclass=="active""active"></li>></li>4. <li<li data-targetdata-target=="#myCarousel""#myCarousel" data-slide-todata-slide-to=="1""1"></li>></li>5. <li<li data-targetdata-target=="#myCarousel""#myCarousel" data-slide-todata-slide-to=="2""2"></li>></li>6. </ol></ol>7. <!-- Carousel items --><!-- Carousel items -->8. <div<div classclass=="carousel-inner""carousel-inner">>9. <div<div classclass=="active item""active item">>……</div></div>

10. <div<div classclass=="item""item">>……</div></div>11. <div<div classclass=="item""item">>……</div></div>12. </div></div>13. <!-- Carousel nav --><!-- Carousel nav -->14. <a<a classclass=="carousel-control left""carousel-control left" hrefhref=="#myCarousel""#myCarousel" data-slidedata-slide=="prev""prev">>&lsaquo;&lsaquo;</a></a>15. <a<a classclass=="carousel-control right""carousel-control right" hrefhref=="#myCarousel""#myCarousel" data-slidedata-slide=="next""next">>&rsaquo;&rsaquo;</a></a>16. </div></div>

Heads up!Heads up! When implementing this carousel, remove the images we have provided andWhen implementing this carousel, remove the images we have provided andreplace them with your own.replace them with your own.

First Thumbnail labelCras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi portagravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

UsageVia data attributesUse data attributes to easily control the position of the carousel. data-slide accepts the keywordsprev or next , which alters the slide position relative to it's current position. Alternatively, usedata-slide-to to pass a raw slide index to the carousel data-slide-to="2" , which jump's the slide

position to a particular index beginning with 0 .

Via JavaScriptCall carousel manually with:

1. $$(('.carousel''.carousel').).carouselcarousel()()

OptionsOptions can be passed via data attributes or JavaScriptz. For data attributes, append the option nameto data- , as in data-interval="" .

Name type default description

interval number 5000 The amount of time to delay between automatically cyclingan item. If false, carousel will not automatically cycle.

pause string "hover" Pauses the cycling of the carousel on mouseenter andresumes the cycling of the carousel on mouseleave.

Methods.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

1. $$(('.carousel''.carousel').).carouselcarousel({({2. interval interval:: 200020003. })})

.carousel('cycle')Cycles through the carousel items from left to right.

.carousel('pause')Stops the carousel from cycling through items.

.carousel(number)Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')Cycles to the previous item.

.carousel('next')Cycles to the next item.

EventsBootstrap's carousel class exposes two events for hooking into carousel functionality.

Event Description

slide This event fires immediately when the slide instance method is invoked.

slid This event is fired when the carousel has completed its slide transition.

Typeahead bootstrap-typeahead.js

ExampleA basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

1. <input<input typetype=="text""text" data-providedata-provide=="typeahead""typeahead">>

You'll want to set autocomplete="off" to prevent default browser menus from appearing over theBootstrap typeahead dropdown.

UsageVia data attributesAdd data attributes to register an element with typeahead functionality as shown in the exampleabove.

Via JavaScriptCall the typeahead manually with:

1. $$(('.typeahead''.typeahead').).typeaheadtypeahead()()

Example

OptionsOptions can be passed via data attributes or JavaScript. For data attributes, append the option nameto data- , as in data-source="" .

Name type default description

source array,function

[ ] The data source to query against. May be an array ofstrings or a function. The function is passed twoarguments, the query value in the input field and theprocess callback. The function may be used

synchronously by returning the data source directly orasynchronously via the process callback's singleargument.

items number 8 The max number of items to display in the dropdown.

minLength number 1 The minimum character length needed beforetriggering autocomplete suggestions

matcher function caseinsensitive

The method used to determine if a query matches anitem. Accepts a single argument, the item againstwhich to test the query. Access the current query withthis.query . Return a boolean true if query is a match.

sorter function exact match,casesensitive,caseinsensitive

Method used to sort autocomplete results. Accepts asingle argument items and has the scope of thetypeahead instance. Reference the current query withthis.query .

updater function returnsselected item

The method used to return selected item. Accepts asingle argument, the item and has the scope of thetypeahead instance.

highlighter function highlights alldefault

Method used to highlight autocomplete results.Accepts a single argument item and has the scope of

matches the typeahead instance. Should return html.

Methods.typeahead(options)Initializes an input with a typeahead.

Affix bootstrap-affix.js

ExampleThe subnavigation on the left is a live demo of the affix plugin.

UsageVia data attributesTo easily add affix behavior to any element, just add data-spy="affix" to the element you want to spyon. Then use offsets to define when to toggle the pinning of an element on and off.

1. <div<div data-spydata-spy=="affix""affix" data-offset-topdata-offset-top=="200""200">>......</div></div>

Heads up!Heads up! You must manage the position of a pinned element and the behavior of itsYou must manage the position of a pinned element and the behavior of itsimmediate parent. Position is controlled by immediate parent. Position is controlled by affixaffix , , affix-topaffix-top , and , and affix-bottomaffix-bottom . Remember to. Remember tocheck for a potentially collapsed parent when the affix kicks in as it's removing content fromcheck for a potentially collapsed parent when the affix kicks in as it's removing content from

the normal flow of the page.the normal flow of the page.

Via JavaScriptCall the affix plugin via JavaScript:

1. $$(('#navbar''#navbar').).affixaffix()()

OptionsOptions can be passed via data attributes or JavaScript. For data attributes, append the option nameto data- , as in data-offset-top="200" .

Name type default description

offset number |function |object

10 Pixels to offset from screen when calculating positionof scroll. If a single number is provided, the offset willbe applied in both top and left directions. To listen fora single direction, or multiple unique offsets, justprovide an object offset: { x: 10 } . Use a functionwhen you need to dynamically provide an offset(useful for some responsive designs).

Designed and built with all the love in the world by @mdo and @fat.Code licensed under Apache License v2.0, documentation under CC BY 3.0.

Glyphicons Free licensed under CC BY 3.0.

Blog · Issues · Changelog