Example heading New

<h3>Example heading <span class="label label-default">New</span></h3>

Available variations

Add any of the below mentioned modifier classes to change the appearance of a label.

DEFAULT PRIMARY SUCCESS INFO WARNING DANGER

<span class="label label-default">DEFAULT</span>

Badges

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.

12 54 612 853 234 3467

<span class="badge">12</span>

Popovers

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

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on left</button>

Tooltips

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

List Group

The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">...</li> </ul>

Linked Items

Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

<div class="list-group"> <a href="#" class="list-group-item active">Cras justo odio</a> <a href="#" class="list-group-item">...</a> </div>

Progress Bar

Basic progress bar

Default progress bar.

With label

Remove the .sr-only class from within the progress bar to show a visible percentage. For low percentages, consider adding a min-width to ensure the label's text is fully visible.

60%

Contextual Alternatives

Progress bars use some of the same button and alert classes for consistent styles.

Striped

Uses a gradient to create a striped effect. Not available in IE8.

Animated

Add .active to .progress-bar-striped to animate the stripes right to left. Not available in IE9 and below.

Stacked

Pagination

Basic pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

Sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.