Default Pagination

Simple pagination inspired by Rdio, great for apps and search results.

• 1
• 2
• 3
• 4
• 5

Split Pagination

Links are split to each other by adding a class of .pagination-split

• 1
• 2
• 3
• 4
• 5

Sizing

Add .pagination-lg or .pagination-sm for additional sizes.

• 1
• 2
• 3
• 4
• 5

Metro Styled Pagination

Add .pagination-metro to make a metro styled pagination.

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

Colored Pagination

Make a color pagination using .pagination-primary or .pagination-success.

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

Circled Pagination

Make a circled pagination using .pagination-circled

• 1
• 2
• 3
• 4
• 5

Basic Progress

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

Striped Progress

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

Animated Progress

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

Metro Styled Progress

Default progress bar but have zero radius in corner

Default

By default, the pager centers links.

• Previous
• Next

Aligned Links

Alternatively, you can align each link to the sides:

• Older
• Newer

Optional Disabled State

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

• Older
• Newer

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 below to links, navs, and more.

42 10 28 90 33 21

Badge Example

Adapts to active nav states.

• 42 Home
• Profile
• 3 Messages