Progress Bars

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

Default Progress Bars

Default progress bars are simple and css driven.


Striped Progress Bars

Sriped Progress bars made with CSS3 gradients, just add the progress-striped class


Animated Progressbars

Animated progressbars with CSS3, just add a class active with progress-striped


Stacking progressbars

You can stack one progressbar on top of another simply by including them all in the same div.progress


Contextual Progressbars

Have thinner progress bars with details

Painting New Room
25%
Setting up Devices
70%
Fixing Old Furnitures
3%

Breadcrumbs

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

Just add .breadcrumb to any ordered or un-ordered list

Pagination and Pager

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

Default Pagination

Simple, scable pagination by adding the .pagination class. You can also add .disable for unselectable links or .active to indicate current page

Sizing

Add smaller or larger pagination with the .pagination-lg or .pagination-sm class

Pager

Quick previous and next links for simple pagination implementations with light markup and styles

Just add the class .pager

Aligned Links

Alternatively, you can align each link to the sides by adding the .previous and .next classes to the li

Labels, Badges and Alerts

Labels

Put the .label class and make your span stand out

Example heading New

Example heading New

Example heading New

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 with the badge class

Add the span class="badge" to links, navs and more!

Inbox 42

When there are no new or unread items, badges will simply collapse (via CSS's :empty selector) provided no content exists within.

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

List Groups

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

Basic

The most basic list group is simply an unordered list with list items, and the proper classes.

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

Badges

Add the badges component to any list group item and it will automatically be positioned on the right

  • Cras justo odio
  • 13Dapibus ac facilisis in
  • Morbi leo risus
  • 7Porta ac consectetur ac
  • 29Vestibulum at eros

Customize with nearly any HTML within!