Elements:Buttons
Button styles you can use on a , button , input elements.
Styles
Default
Outlined
Invert
Inverts the default & hover states, useful if using a background colour the same as the button.
Secondary Primary Info Success Warning Danger InverseRounded
Secondary Primary Info Success Warning Danger InverseSizes
Small
Medium (default)
Large
Extra Large
Block level (full width)
Icon buttons
Add the class .btn-icon to fix the width & height of a button so it can be used to display a single icon. Works with all icons defined on elements-icons.htm.
Default
Outlined
Rounded
Sizes
small:
Default:
Large:
Extra Large:
States
Active
Secondary link Primary link Info link Success link Warning link Danger link Inverse linkOutline buttons
Secondary link Primary link Info link Success link Warning link Danger link Inverse linkDisabled
This can be applied as .disabled class for links or a disabled attribute for buttons.
Outline buttons
Toggle State
Add data-toggle="button" to allow the buttons active state to be toggle on click, works on button & can be used on checkboxes and radion form elements.
Button with dropdowns
By wrapping .btn elements with a .dropdown element you can easily add dropdown menus for buttons.
button element
a element
Styles
The standard button styles can be applied to the buttons with dropdowns as well.
Split button dropdowns
Split button dropdowns allow you to have an "action" button and a dropdown button within the same visual button by adding 2 buttons within a button group and adding .dropdown-toggle-split class to the second button.
Sizing
The .btn-lg and .btn-sm classes can be applied to buttons within split buttons and dropdown buttons.
Dropup buttons
Dropup buttons are exactly the same and can uses all the same options expect the menu "drops up" and appears above the button rather than below.
Simple add the class .dropup to the wrapper .btn-group element.