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 6 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-transparent
class
Thin border
Default 1px
border width
Thick border
Using .border-2
class
Light buttons
Buttons with light backgrounds in various typesLight with default text
Default button text color
Light with color match
Text color matches button color theme
Light with border
Both thin
and thick
borders
Icon buttons
Buttons with icon onlySingle icon button
Button with a single icon only
Rounded icon button
Works with all
button types
Icon with menu
Icon button with dropdown
Single icon button
Button with a single icon only
Rounded icon button
Works with all
button 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 sizes
Predefined button sizing optionsDefault button sizes
Available sizes of default
buttons
Labeled button sizes
Available sizes of labeled
buttons
Outline button sizes
Available sizes of outline
buttons
Icon alignment
Icon alignment in various button typesLeft 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
Button colors
Default, contextual and custom colorsLight button
Default button in light color
Dark button
Default button in dark color
Primary button
Contextual button in blue color
Secondary button
Contextual button in slate color
Danger button
Contextual button in red color
Success button
Contextual button in green color
Warning button
Contextual button in orange color
Info button
Contextual button in cyan color
Indigo button
Custom button in indigo color
Pink button
Custom button in pink color
Purple button
Custom button in purple color
Yellow button
Custom button in yellow color
Teal button
Custom button in teal color
White button
Custom button in white color
Link button
Button with transparent background
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 rounded
button
Rounded button menu
Rouned button menu with icon
Rounded segmented
Rounded button with segments
Labeled button dropup
Dropup attached to labeled
button
Labeled segment
Segmented labeled button
Segmented dropup
Labeled button dropup
Icon button dropup
Dropup attached to icon
button
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 radio
button 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-group
components
Checkbox button group
Bootstrap checkbox
button group
Justified button group
Justified buttons
in 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