Please wait...

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

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

ICON BUTTONS Make icon buttons

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

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

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

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-pinkclass

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-groupwithin another .btn-groupwhen you want dropdown menus mixed with a series of buttons.

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

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.

LEFTMIDDLERIGHT
LEFTMIDDLE

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-pinkclass

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-pinkclass

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

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