• WebPro
  • Log Out
Notifications
Progress Stats
Online Users
Storage Space

General

Pagination

Default Pagination

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

Disabled and active states

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

Sizing

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

Progress Bars

Basic Progress

Default progress bar

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

Striped Progress

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

40% Complete (success)

Animated Progress

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

40% Complete (success)

Pagers

Default

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.

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

42 10 28 90 33 21

Badge Example

Adapts to active nav states.

Alerts

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

Heading

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Tooltips

When using tooltips on elements within a .btn-group or an .input-group, you'll have to specify the option container: 'body' (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).

Popovers

Sometimes you want to add a popover to a hyperlink that wraps multiple lines. The default behavior of the popover plugin is to center it horizontally and vertically. Add white-space: nowrap; to your anchors to avoid this.

Modal

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Popovers

Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog.