Buttons - Styles

Color Options

Use any of the available button classes to quickly create a styled button. Semantically distinguishable beauty.

Size Variants

Fancy larger or smaller buttons? Four separate sizes available for all use cases: from tiny 10px button to large one. Add .btn-lg, .btn-sm or .btn-xs for additional sizes.

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.

Rounded Buttons

Use any of the available button classes to quickly create a styled button. Semantically distinguishable beauty. Use .btn-rounded-f and .btn-rounded

Block Buttons

Create block level buttons - those that span the full width of a parentβ€” by adding .btn-block. Great for menu & social buttons.

Disabled Buttons

Make buttons look unclickable by fading them back 50%. Add the .disabled class to <a> buttons.

Primary link Link

Button Groups

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.

Button Dropdowns

Add dropdown menus to nearly anything with this simple plugin, including the buttons, navbar, tabs, and pills. Both solid & segmented dropdown options available.

Button Options

Button Checkboxes

Do more with buttons. Control button states or create groups of buttons for more components like toolbars. Add data-toggle="buttons" to a group of checkboxes for checkbox style toggling on btn-group.

Button Radios

Do more with buttons. Control button states or create groups of buttons for more components like toolbars. Add data-toggle="buttons" to a group of radio inputs for radio style toggling on btn-group.

Use with Icons

Fontawesome and Glyph- icons may be used in buttons, button groups for a toolbar, navigation, or prepended form inputs. Let your buttons shine!