Buttons & Paginations

Basic Buttons

Use any of the available button classes to quickly create a styled button .btn. Use the button classes on an <a>, <button>, or <input> element.

Default context colors

Other colors

Size .btn-lg .btn-sm .btn-xs

Badge .btn > .badge

Icon .btn > .fa

Alternative use with icons

Active state .active

Disabled state disabled="disabled"

No fill .btn-nofill

On states


Buttons with icon .btn-icon

Align .btn-icon.btn-icon-left


Button Call .btn-call

This is a stand alone button (designed for the dahsboard), not required .btn.

Block level .btn-block

Button groups & Dropdowns

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with Bootstrap buttons plugin.

Tooltips & popovers in button groups require special setting

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

Basic

Nesting

Toolbar

Split button dropdowns and dropup variation

Paginations

Simple pagination

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

Default

Split .pagination-split

Rounded .pagination-rounded

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.