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


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

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.

Active state

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

Disabled state

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

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-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-sm
.btn-circle .btn-lg