Default button layouts
Basic button layout optionsDefault button
Default light button example
Default with icon
Available in both directions
Default with menu
Default button with dropdown
Colored button
Default 8 contextual colors
Colored with icon
Available in both directions
Colored with menu
Colored button with dropdown
Rounded button
Works with all button types
Rounded with icon
Available in both directions
Rounded with menu
Rounded button with dropdown
Labeled button
Works with all button colors
Rounded with label
Available in both directions
Labeled with menu
Labeled button with dropdown
Linked button
Transparent button example
Linked with icon
Available in both directions
Linked with menu
Linked button with dropdown
Outline buttons
Outline button layout and optionsDefault colors
Default 8 contextual colors
Default colors with icon
Available in both directions
Default colors with menu
Outline button with dropdown
Custom colors
Available in all custom colors
Custom colors with icon
Available in both directions
Custom colors with menu
Outline button with dropdown
Transparent border
Using .border-transparentclass
Thin border
Default 1pxborder width
Thick border
Using .border-2class
Transparent border
Default option without border color
Alpha with border
Both thinand thickborders
Alpha static
No hover/active state changes
Icon buttons
Buttons with icon onlySingle icon button
Button with a single icon only
Rounded icon button
Works with allbutton types
Icon with menu
Icon button with dropdown
Single icon button
Button with a single icon only
Rounded icon button
Works with allbutton types
Icon with menu
Icon button with dropdown
Floating button
Floating action button example
Floating with text
Float buttons with text and icons
Rounded floating buttons
Rounded floating buttons with icons
Button styling
Predefined button colors and sizingDefault button sizes
Available sizes of defaultbuttons
Labeled button sizes
Available sizes of labeledbuttons
Outline button sizes
Available sizes of outlinebuttons
Left icon position
Display icon on the left side
Right icon position
Display icon on the right side
Right in dropdown
Additional option for right icon
Left label position
Display label on the left side
Right label position
Display label on the right side
Right in dropdown
Additional option for right label
Custom brown color
Custom color from brown palette
Custom pink color
Custom color from pink palette
Custom teal color
Custom color from teal palette
Button dropdowns
Dropdown menus attached to buttonsButton dropdown
Basic button dropdown example
Menu with icon
Dropdown button with icon
Segmented button
Segmented button dropdown
Button dropup
Basic button dropup example
Drop right
Right aligned dropdown menu
Drop left
Left aligned dropdown menu
Rounded button dropup
Dropup attached to roundedbutton
Rounded button menu
Rouned button menu with icon
Rounded segmented
Rounded button with segments
Labeled button dropup
Dropup attached to labeledbutton
Labeled segment
Segmented labeled button
Segmented dropup
Labeled button dropup
Icon button dropup
Dropup attached to iconbutton
Segmented dropdown icon
Dropdown in segmented icon button
Segmented dropup button
Dropup in segmented icon button
Additional options
Button toolbars, groups and controlsLoading button
Custom loading state
Radio button group
Bootstrap radiobutton group
Button group
Group of buttons in btn-group
Single toggle button
Using data-toggle="button"
Button group nesting
Example of nested button groups
Button toolbar
Complex btn-groupcomponents
Checkbox button group
Bootstrap checkboxbutton group
Justified button group
Justified buttonsin button group
Progress animation
Button loading spinner with progressExpand Left
Spinner appears on left
Expand Right
Spinner appears on right
Expand Up
Spinner appears on top
Expand Down
Spinner appears on bottom
Slide Left
Spinner slides from right
Slide Right
Spinner slides from left
Slide Up
Spinner slides from bottom
Slide Down
Spinner slides from top
Zoom In
Spinner appears after zoom in
Zoom Out
Spinner appears after zoom out
Fixed Position
Spinner appears instead of text
Border radius
Border radius animation