Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Examples

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

.primary .secondary .red .green .blue .yellow .white .black

If you don’t want the button text to wrap, you can add the .no-wrap class to the button.

Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline.* ones to remove all background images and colors on any button.

.primary .secondary .red .green .blue .yellow .white .black
.primary .active .secondary .active .red .active .green .active .blue .active .yellow .active .white .active .black .active
.btn-link .primary .btn-link .secondary .btn-link .red .btn-link .green .btn-link .blue .btn-link .yellow .btn-link .white .btn-link .black

Sizes

Fancy larger or smaller buttons? Add .btn-lg for additional larger size.

.btn-lg .primary .btn-lg .secondary .btn-lg .red .btn-lg .green .btn-lg .blue .btn-lg .yellow .btn-lg .white .btn-lg .black

Or .btn-sm for additional smaller size.

.btn-sm .primary .btn-sm .secondary .btn-sm .red .btn-sm .green .btn-sm .blue .btn-sm .yellow .btn-sm .white .btn-sm .black

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

.btn-block .primary .btn-block .secondary .btn-block .red .btn-block .green .btn-block .blue .btn-block .yellow .btn-block .white .btn-block .black

Active state

Make buttons look active by adding the active boolean attribute or class to any btn classed element.

.primary .active .secondary .active .red .active .green .active .blue .active .yellow .active .white .active .black .active

Disabled state

Make buttons look inactive by adding the disabled boolean attribute or class to any btn classed element.

.primary .disabled .secondary .disabled .red .disabled .green .disabled .blue .disabled .yellow .disabled .white .disabled .black .disabled

Button groups

Wrap a series of buttons with .btn in .btn-group. Add on optional JavaScript radio and checkbox style behavior with Bootstrap's buttons plugin.

.btn-group
.btn-group .btn-group-toggle
.btn-outline .btn-outline .active
.btn-outline .btn-outline .active
.btn-outline .btn-outline .active
.btn-outline .btn-outline .active
.btn-outline .btn-outline .active
.btn-outline .btn-outline .active
.btn-outline .btn-outline .active
.btn-outline .btn-outline .active

Circle Buttons

Use Material Design Icons (included with this theme package) along with the circle buttons as shown in the examples below!

.btn-circle
.btn-circle .btn-sm
.btn-circle .btn-lg

Split Buttons with Icon

Works with any button colors, just use the .btn-icon-split class and the markup in the examples below.

.btn-icon-split .primary .btn-icon-split .secondary .btn-icon-split .red .btn-icon-split .green .btn-icon-split .blue .btn-icon-split .yellow .btn-icon-split .white .btn-icon-split .black

Also works with small and large button classes!

.btn-lg .btn-icon-split .yellow .btn-sm .btn-icon-split .yellow