Our Modal plugin is a super slim take on the traditional modal js plugin, taking special care to include only the bare functionality that we require here at twitter.

Download

Using bootstrap-modal

$('#my-modal').modal(options)

Options

Name	type	default	description
backdrop	boolean, string	false	Includes a modal-backdrop element. Set backdrop to "static" if you do not want the modal closed when the backdrop is clicked.
keyboard	boolean	false	Closes the modal when escape key is pressed
show	boolean	false	Opens modal on class initialization

Markup

You can activate modals on your page easily without having to write a single line of javascript. Just give an element a data-controls-modal attribute which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as data attributes as well.

<a class="btn" data-controls-modal="my-modal" data-backdrop="static" >Launch Modal</a>

Notice If you want your modal to animate in and out, just add a .fade class to your .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.

$('#my-modal').modal({
  keyboard: true
})

.modal('toggle')

Manually toggles a modal.

$('#my-modal').modal('toggle')

.modal('show')

Manually opens a modal.

$('#my-modal').modal('show')

.modal('hide')

Manually hides a modal.

$('#my-modal').modal('hide')

.modal(true)

Returns an elements modal class instance.

$('#my-modal').modal(true)

Notice Alternatively, this can be retrieved with $().data('modal').

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).

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

Demo

Launch Modal

This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.

Download

Using bootstrap-dropdown.js

$('#topbar').dropdown()

Markup

To quickly add dropdown functionality to any nav element, use the data-dropdown attribute. Any valid bootstrap dropdown will automatically be activated.

<ul class="tabs">
  <li class="active"><a href="#">Home</a></li>
  <li class="dropdown" data-dropdown="dropdown" >
    <a href="#" class="dropdown-toggle">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a href="#">Secondary link</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Another link</a></li>
    </ul>
  </li>
</ul>

Notice If your ui has several dropdowns, consider adding the data-dropdown attribute to a more significant container element like .tabs or .topbar.

Methods

$().dropdown()

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

Demo

This plugin is for adding the scrollspy (auto updating nav) interaction to the bootstrap topbar.

Download

Using bootstrap-scrollspy.js

$('#topbar').scrollSpy()

Markup

To easily add scrollspy behavior to your nav, just add the data-scrollspy attribute to the .topbar.

<div class="topbar" data-scrollspy="scrollspy" >...</div>

Methods

$().scrollSpy()

Auto activates navigation buttons by users scroll position.

$('body > .topbar').scrollSpy()

Notice Topbar 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>.

.scrollSpy('refresh')

The scrollspy caches nav buttons and section coordinates for performance. If you need to update this cache (likely if you have dynamic content) just call this refresh method. If you used the data attribute to define your scrollspy, just call refresh on the body.

$('body').scrollSpy('refresh')

Demo

Checkout the the topbar navigation on this page.

This plugin offers additional functionality for managing button state.

Download

Using bootstrap-buttons.js

$('.tabs').button()

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="toggle" >...</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>

$().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')
</scrip>

Demo

Loading Demo Toggle Demo

This plugin adds quick, dynamic tab and pill functionality.

Download

Using bootstrap-tabs.js

$('.tabs').tabs()

Markup

You can activate a tab or pill navigation without writing any javascript by simply giving them a data-tabs or data-pills attribute.

 <ul class="tabs" data-tabs="tabs" >...</ul>

Methods

$().tabs or $().pills

Activates tab and pill functionality for a given container. Tab links should reference id's in the document.

<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="pill-content">
  <div class="active" id="home">...</div>
  <div id="profile">...</div>
  <div id="messages">...</div>
  <div id="settings">...</div>
</div>

<script>
  $(function () {
    $('.tabs').tabs()
  })
</script>

Events

Event	Description
change	This event fires on tab change. Use event.target and event.relatedTarget to target the active tab and the previous active tab respectively.

$('#.tabs').bind('change', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

Demo

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

Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for title storage!

Download

Using bootstrap-twipsy.js

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

Options

Name	type	default	description
animate	boolean	true	apply a css fade transition to the tooltip
delayIn	number	0	delay before showing tooltip (ms)
delayOut	number	0	delay before hiding tooltip (ms)
fallback	string	''	text to use when no tooltip title is present
placement	string	'above'	how to position the tooltip - above | below | left | right
html	boolean	false	allows html content within tooltip
live	boolean	false	use event delegation instead of individual event handlers
offset	number	0	pixel offset of tooltip from target element
title	string, function	'title'	attribute or method for retrieving title text
trigger	string	'hover'	how tooltip is triggered - hover | focus | manual
template	string	[default markup]	the html template used for rendering a twipsy
contentSelector	string	.twipsy-inner	selector used to find the title element within the tooltip

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

<a href="#" data-placement="below" rel='twipsy' title='Some title text'>text</a>

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')

.twipsy(true)

Returns an elements twipsy class instance.

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

Notice Alternatively, this can be retrieved with $().data('twipsy').

Demo

The popover plugin provides a simple interface for adding popovers to your application. It extends the bootstrap-twipsy.js plugin, so be sure to grab that file as well when including popovers in your project!

Notice You must include the bootstrap-twipsy.js file before bootstrap-popover.js.

Download

Using bootstrap-popover.js

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

Options

Name	type	default	description
animate	boolean	true	apply a css fade transition to the tooltip
delayIn	number	0	delay before showing tooltip (ms)
delayOut	number	0	delay before hiding tooltip (ms)
fallback	string	''	text to use when no tooltip title is present
placement	string	'right'	how to position the tooltip - above | below | left | right
html	boolean	false	allows html content within tooltip
live	boolean	false	use event delegation instead of individual event handlers
offset	number	0	pixel offset of tooltip from target element
title	string, function	'title'	attribute or method for retrieving title text
content	string, function	'data-content'	a string or method for retrieving content text. if none are provided, content will be sourced from a data-content attribute.
trigger	string	'hover'	how tooltip is triggered - hover | focus | manual
template	string	[default markup]	the html template used for rendering a popover
titleSelector	string	.title	selector used to find the title element within the popover
contentSelector	string	.content p	selector used to find the content element within the popover

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

<a data-placement="below" href="#" class="btn danger" rel="popover">text</a>

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')

Demo

hover for popover

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

Download

Using bootstrap-alerts.js

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

Markup

Just add a data-alert attribute to your alert messages to automatically give them close functionality.

Options

Name	type	default	description
selector	string	'.close'	What selector to target for closing an alert.

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')

Demo