Buttons
Button colors
Use any of the available button classes to quickly create a styled button.
Button with icon
Button sizing
Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.
Button group
Wrap a series of buttons with .btn in .btn-group.
Button dropdown
Turn a button into a dropdown toggle with some basic markup changes.
Split button dropdown
Similarly, create split button dropdowns with the same markup changes, only with a separate button.
Button tag
Use the button classes on an <a>, <button>, or <input> element.
Button outline
Use any of the available button classes to quickly create a styled button.
Button state
Active state
No need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead and add .active.
Disable state
Add the disabled attribute to <button> buttons.
Pagination
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.
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
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.
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.
Button loading
You can choose the style of the effect by setting the data-style attribute: