About modals

A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.

Download file

Static example

Below is a statically rendered modal.

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.

Launch demo modal

---

Using bootstrap-modal

Call the modal via javascript:

$('#myModal').modal(options)

Options

Name	type	default	description
backdrop	boolean	true	Includes a modal-backdrop element
keyboard	boolean	true	Closes the modal when escape key is pressed

Markup

You can activate modals on your page easily without having to write a single line of javascript. Just set data-toggle="modal" on a controller element with a data-target="#foo" or href="#foo" which corresponds to a modal element id, and when clicked, it will launch your modal.

Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

<div class="modal">
  <div class="modal-header">
    <a href="#" class="close js-dismiss">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn primary">Save changes</a>
    <a href="#" class="btn">Close</a>
  </div>
</div>

Notice If you want your modal to animate in and out, just add a .fade class to the .modal element (refer to the demo to see this in action).

Methods

.modal(options)

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

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

Manually toggles a modal.

$('#myModal').modal('toggle')

.modal('show')

Manually opens a modal.

$('#myModal').modal('show')

.modal('hide')

Manually hides a modal.

$('#myModal').modal('hide')

Events

Bootstrap'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 (will wait for css transitions to complete).
hide	This event is fired immediately when the hide instance method has been called.
hidden	This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).

$('#myModal').on('hidden', function () {
  // do something ...
})

About dropdowns

Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.

Download file

Examples

Click on the dropdown nav links in the navbar and pills below to test dropdowns.

• Regular link
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 3
  • Action
  • Another action
  • Something else here
  • Separated link

---

Using bootstrap-dropdown.js

Call the dropdowns via javascript:

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

Markup

To quickly add dropdown functionality to any element just add data-toggle="dropdown" and any valid bootstrap dropdown will automatically be activated.

Notice For added control and flexibility, optionally specify a data-target="#fat" or href="#fat" - this allows you to target specific dropdowns.

<ul class="nav pills">
  <li class="active"><a href="#">Regular link</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
      Dropdown
      <b class="caret"></b>
    </a>
    <ul id="menu1" class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
  ...
</ul>

Methods

$().dropdown()

A programatic api for activating menus for a given navbar or tabbed navigation.

The ScrollSpy plugin is for automatically updating nav targets based on scroll position.

Download file

Example navbar with scrollspy

Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!

---

Using bootstrap-scrollspy.js

Call the scrollspy via javascript:

$('#navbar').dropdown()

Markup

To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body).

<body data-spy="scroll" >...</body>

Notice Navbar anchor tags 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>.

This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.

Download file

Example tabs

Click the tabs below to toggle between hidden panes, even via dropdown menus.

• Home
• Profile
• Messages
• Settings
• Dropdown
  • @fat
  • @mdo

---

Using bootstrap-tab.js

Enable tabbable tabs via javascript:

$('#myTab').tab('show')

Markup

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.

<ul class="tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#ettings" data-toggle="tab">Settings</a></li>
</ul>

Methods

$().tab

Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.

<ul class="tabs">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="active" id="home">...</div>
  <div id="profile">...</div>
  <div id="messages">...</div>
  <div id="settings">...</div>
</div>

<script>
  $(function () {
    $('.tabs a:last').tab('show')
  })
</script>

Events

Event	Description
show	This event fires on tab show, but before the new tab has been shown. Use event.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.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

About Twipsy tooltips

Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, data-attributes for local title storage, and now jquery 1.7's new event api!

Download file

Example use of Twipsy

Hover over the links below to see tooltips:

---

Using bootstrap-twipsy.js

Trigger the Twipsy tooltips via javascript:

$('#example').twipsy(options)

Options

Name	type	default	description
animation	boolean	true	apply a css fade transition to the tooltip
placement	string	'top'	how to position the tooltip - top | bottom | left | right
selector	string	false	If a selector is provided, twipsy objects will be delegated to the specified targets.
title	string | function	''	default title value if `title` tag isn't present
trigger	string	'hover'	how tooltip is triggered - hover | focus | manual
delay	number | object	0	delay showing/hiding the tooltip (ms) If a number is supplied, delay is applied to both hide/show Object structure is: delay: { show: 500, hide: 100 }

Notice Individual twipsy instance options can alternatively be specified through the use of data attributes.

Markup

For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just specify a selector option.

Methods

$().twipsy(options)

Attaches a twipsy handler to an element collection.

.twipsy('show')

Reveals an elements twipsy.

$('#element').twipsy('show')

.twipsy('hide')

Hides an elements twipsy.

$('#element').twipsy('hide')

About popovers

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

* Requires Twipsy to be included

Download file

Example hover popover

Hover over the button to trigger the popover.

---

Using bootstrap-popover.js

Enable popovers via javascript:

$('#example').popover(options)

Options

Name	type	default	description
animation	boolean	true	apply a css fade transition to the tooltip
placement	string	'right'	how to position the popover - top | bottom | left | right
selector	string	false	if a selector is provided, twipsy objects will be delegated to the specified targets
trigger	string	'hover'	how tooltip is triggered - 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't present
delay	number | object	0	delay showing/hiding the popover (ms) If a number is supplied, delay is applied to both hide/show Object structure is: delay: { show: 500, hide: 100 }

Notice Individual popover instance options can alternatively be specified through the use of data attributes.

Markup

For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just specify a the selector option.

Methods

$().popover(options)

Initializes popovers for an element collection.

.popover('show')

Reveals an elements popover.

$('#element').popover('show')

.popover('hide')

Hides an elements popover.

$('#element').popover('hide')

About alerts

The alert plugin is a tiny class for adding close functionality to alerts.

Download

Example alerts

The alerts plugin works on regular alert messages, and block messages.

---

Using bootstrap-alerts.js

Enable dismissal of an alert via javascript:

$(".alert-message").alert()

Markup

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

<a class="close" data-dismiss="alert" href="#">&times;</a>

Methods

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

.alert('close')

Closes an alert.

$(".alert-message").alert('close')

Events

Bootstrap'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 css transitions to complete).

$('#my-alert').bind('closed', function () {
  // do something ...
})

About

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

Download file

Example uses

Use the buttons plugin for states and toggles.

Stateful	Loading State
Single toggle	Single Toggle
Checkbox	Left Middle Right
Radio	Left Middle Right

---

Using bootstrap-button.js

Enable buttons via javascript:

$('.tabs').button()

Markup

Data attributes are integral to the button plugin. Check out the example code below for the various markup types.

<!-- Add data-toggle="button" to activate toggling on a single button -->
<button class="btn" data-toggle="button">Single Toggle</button>

<!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group -->
<div class="btn-group" data-toggle="buttons-checkbox">
  <button class="btn">Left</button>
  <button class="btn">Middle</button>
  <button class="btn">Right</button>
</div>

<!-- Add data-toggle="buttons-radio" for radio style toggling on btn-group -->
<div class="btn-group" data-toggle="buttons-radio">
  <button class="btn">Left</button>
  <button class="btn">Middle</button>
  <button class="btn">Right</button>
</div>

Methods

$().button('toggle')

Toggles push state. Gives btn the look that it's been activated.

Notice You can enable auto toggling of a button by using the data-toggle attribute.

<button class="btn" data-toggle="button" >...</button>

$().button('loading')

Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.

<button class="btn" data-loading-text="loading stuff..." >...</button>

Notice Firefox persists the disabled state across page loads. A workaround for this is to use: autocomplete="off". More info can be found here.

$().button('reset')

Resets button state - swaps text to original text.

$().button(string)

Resets button state - swaps text to any data defined text state.

<button class="btn" data-complete-text="finished!" >...</button>
<script>
  $('.btn').button('complete')
</script>

About

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

Download file

Example accordion

Using 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 ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #2

Blog +1 eiusmod, williamsburg chambray craft beer brooklyn. Trust fund squid whatever, sunt hoodie skateboard mustache 3 wolf moon art party wes anderson ad leggings officia. Skateboard keytar incididunt gluten-free retro sartorial, single-origin coffee et viral. Art party blog sunt, readymade fugiat 8-bit aesthetic ex echo park fanny pack keytar. Thundercats sustainable labore, mustache adipisicing tattooed dolore aute occaecat velit 8-bit raw denim letterpress. In occaecat freegan, next level single-origin coffee chambray excepteur nihil duis exercitation adipisicing ex sartorial twee squid. You probably haven't heard of them fugiat ea retro eiusmod quis cosby sweater, +1 fap sapiente biodiesel banksy.

Collapsible Group Item #3

Tempor gentrify pariatur nihil salvia, irony synth incididunt odio commodo brunch aute. Four loko est vice echo park wes anderson jean shorts, tempor ea vero locavore. Seitan DIY dolore readymade williamsburg viral. Dolor fap master cleanse delectus, ad butcher labore duis vice mollit cillum exercitation eu banh mi. Austin banksy 3 wolf moon locavore sed, helvetica next level VHS you probably haven't heard of them ethical odio. Incididunt locavore minim, do seitan consequat qui thundercats labore before they sold out retro laborum. Esse twee readymade laboris fap vice, voluptate DIY.

---

Using bootstrap-collapse.js

Enable via javascript:

$(".collapse").collapse()

Options

Name	type	default	description
parent	selector	false	If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior)
toggle	boolean	true	Toggles the collapsible element on invocation

Markup

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.

<button class="btn danger" data-toggle="collapse" data-target="#demo">
  simple collapsible
</button>

<div id="demo" class="collapse in"> … </div>

Notice To add accordion like group management to a collapsible control just add the additional data attribute data-parent="#selector". Refer to the demo below to see this in action.

Methods

.collapse(options)

Activates your content as a collapsible element. Accepts an optional options object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Toggles a collapsible element to shown or hidden.

.collapse('show')

Shows a collapsible element.

.collapse('hide')

Hides a collapsible element.

Events

Bootstrap'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 the user (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).

$('#myCollapsible').on('hidden', function () {
  // do something ...
})

About

A generic plugin for cycling through elements. A merry-go-round.

Download file

Example carousel

Watch the slideshow below.

---

Using bootstrap-carousel.js

Call via javascript:

$('.carousel').carousel()

Options

Name	type	default	description
interval	number	5000	The amount of type to delay between automatically cycling an item.

Markup

Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.

<div class="thumbnail carousel">

  <!-- items -->
  <div class="carousel-inner">…</div>

  <!-- navigation -->
  <a class="nav" href="#myCarousel" data-slide="next">&lt;</a>
  <a class="nav" href="#myCarousel" data-slide="prev">&gt;</a>

</div>

Methods

.carousel(options)

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

          $('.myCarousel').carousel({
            interval: 2000
          })

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Events

Bootstrap's modal class exposes a few events for hooking into modal 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 it's slide transition.

About

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

Download file

Example

Start typing in the field below to show the typeahead results.

---

Using bootstrap-typeahead.js

Call the typeahead via javascript:

$('.typeahead').typeahead()

Options

Name	type	default	description
items	number	8	The max number of items to display in the dropdown.

Markup

Add data attributes to register an element with typeahead functionality.

<input type="text" data-provide="typeahead">