Components

Pagination

Provide pagination links for your site or app with the multi-page pagination component.

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

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

Default pager

By default, the pager centers links.

Aligned links

Alternatively, you can align each link to the sides:

Optional disabled state

Pager links also use the general .disabled utility class from the pagination.

Breadcrumbs

Indicate the current page's location within a navigational hierarchy.

Default Breadcrumbs (Transparent)

Breadcrumbs Variations

Example

Labels & Badges

Labels

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

DEFAULT PRIMARY SUCCESS INFO WARNING DANGER

Badges

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

4 8 75 6 10 451

Badges example

Progress

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

Basic Progress Bars

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

60% Complete
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete
Progress Bar with Label
60%

Progress Bar Sizes

Fancy larger or smaller progress bar? Add .progress-lg, .progress-sm, .progress-xs, or .progress-mini for additional sizes.

80% (large)
90% (normal)
60% (small)
50% (extra small)
60% Complete (mini)

Stripped Progress Bars

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

60% Complete
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

Animated Progress Bars

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

45% Complete

Stacked Progress Bars

Place multiple bars into the same .progress to stack them.

35% Complete (success)
20% Complete (warning)
10% Complete (danger)