Please wait...

search
close

BUTTONS

BOOTSTRAP DEFAULT BUTTONS Use any of the available button classes to quickly create a styled button

METARIAL DESIGN BUTTONS Use any of the available button classes to quickly create a styled button

BUTTON SIZES You can resize the buttons

BLOCK BUTTONS Create block level buttons

DISABLED BUTTONS Make buttons look unclickable by fading them back with opacity

ICON BUTTONS Make icon buttons

Large Circle

BUTTON GROUPS Group a series of buttons together on a single line with the button group

BASIC EXAMPLE Wrap a series of buttons with .btn in .btn-group.

With Material Design Colors You can use material design colors which examples are .bg-pink class

BUTTON TOOLBAR Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

With Material Design Colors You can use material design colors which examples are .bg-pink class

SIZING Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including when nesting multiple groups.

Large Button Group

Default Button Group

Small Button Group

Extra-Small Button Group

NESTING Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

With Material Design Colors You can use material design colors which examples are .bg-pink class

VERTICAL VARIATION Make a set of buttons appear vertically stacked rather than horizontally.

JUSTIFIED BUTTON GROUPS Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.

LEFT MIDDLE RIGHT
LEFT MIDDLE

BUTTON DROPDOWNS Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

SINGLE BUTTON DROPDOWNS Turn a button into a dropdown toggle with some basic markup changes.

With Material Design Colors You can use material design colors which examples are .bg-pink class

SPLITE BUTTON DROPDOWNS Similarly, create split button dropdowns with the same markup changes, only with a separate button.

With Material Design Colors You can use material design colors which examples are .bg-pink class

DROPUP VARIATION Trigger dropdown menus above elements by adding .dropup to the parent.

With Material Design Colors You can use material design colors which examples are .bg-pink class