Solid buttons
Buttons with solid background colorLight button
Light button is considered default in the UI. Use
.btn.btn-light classes in anchor, button or input element
Light with icon
Light button can be used with text, icons or combination of both. There is no limit in number of icons per button
Light with menu
Light button also supports dropdown menus in various directions. Use
.dropdown-toggle to display directional arrow
Solid button
Solid button supports 14 predefined colors. Use
.btn.btn-[color] classes in anchor, button or input element
Solid with icon
Solid button can be used with text, icons or combination of both. There is no limit in number of icons per button
Solid with menu
Solid button also supports dropdown menus in various directions. Use
.dropdown-toggle to display directional arrow
Rounded button
Use a combination of .btn and .rounded-pill
classes in button, anchor or input element to make any button fully rounded
Rounded with icon
Rounded button can be also used with text label, icons and/or combination of both. No extra adjustments are required
Rounded with menu
Rounded button with dropdown menu. In certain cases horizontal padding can be extended with utility classes
Labeled button
In labeled button icons are separated from text label with slightly darker background color. This color can be adjusted via utility classes
Rounded with label
Rounded labeled button requires .rounded-pill class to be
added to both button and icon elements
Labeled with menu
Labeled button with dropdown menu. Supports left and right alignment. All other options also work in this button type
Icon button
Button can be used with icon only. For better sizing (width = height),
use optional .btn-icon class in button element
Rounded with icon
Add .rounded-pill to .btn-icon to show
perfectly rounded button in 38x38 size. Works with all button styles and sizes
Icon button with menu
Icon button has variable width and is controlled by padding. Add
.dropdown-toggle to .btn-icon to show directional arrow
Floating button
Button in slightly bigger size to stand out and attract more attention to specific actions. Supports all button colors and options
Floating with text
In floating buttons text label is displayed on the second line. Adjust text alignment or spacing with our utility classes
Rounded floating buttons
Floating buttons without text label can be displayed in fully rounded
style. Just add .rounded-pill to the button element
Outline buttons
Buttons in outline styles with transparent background in default stateOutline button
Use .btn.btn-outline-[color] classes on button element to
remove background color in default state
Outline with icon
Outline button can be used with text, icons or combination of both. There is no limit in number of icons per button
Outline with menu
Outline button also supports dropdown menus in various directions. Use
.dropdown-toggle to display directional arrow
Static outline button
Static outline button has no background color in all states. Use
.link-[color] and .border-[color] classes on
.btn element
Solid with icon
Static outline button can be used with text, icons or combination of both. There is no limit in number of icons per button
Solid with menu
Static outline button also supports dropdown menus in various
directions. Use .dropdown-toggle to display directional arrow
Rounded outline button
Use a combination of .btn-outline-[color] and
.rounded-pill classes to make any button fully rounded
Rounded outline with icon
Rounded button can be also used with text label, icons and/or combination of both. No extra adjustments are required
Outline with menu
Rounded button with dropdown menu. In certain cases horizontal padding can be extended with utility classes
Labeled outline button
In labeled outline button icons are separated from text label with slightly darker background color. This color can be adjusted via utility classes
Outline rounded with label
Rounded labeled outline button requires .rounded-pill class
to be added to both button and icon elements
Labeled outline with menu
Labeled outline button with dropdown menu. Supports left and right alignment. All other options also work in this button type
Icon outline button
Outline button can be used with icon only. For better sizing (width =
height), use optional .btn-icon class in button element
Rounded outline with icon
Add .rounded-pill to .btn-icon to show
perfectly rounded button in 38x38 size. Works with all button styles and sizes
Outline icon button with menu
Icon button has variable width and is controlled by padding. Add
.dropdown-toggle to .btn-icon to show directional arrow
Floating outline button
Button in slightly bigger size to stand out and attract more attention to specific actions. Supports all button colors and options
Floating outline with text
In floating buttons text label is displayed on the second line. Adjust text alignment or spacing with our utility classes
Rounded floating outline buttons
Floating buttons without text label can be displayed in fully rounded
style. Just add .rounded-pill to the button element
Transparent border
Use .border-transparent class in addition to
.btn-outline-[color] to make border transparent in all button states
Default border
All outline buttons have 1px border width by default and
don't require any additional border utility classes
Thick border
You can control border width in outline buttons with our
.border-width-[size] utility classes. Here border width is 2px
Flat buttons
Buttons with light backgrounds in various typesFlat button
Use .btn.btn-flat-[color] classes on button element to show
semi transparent background color
Flat with icon
Flat button can be used with text, icons or combination of both. There is no limit in number of icons per button
Flat with menu
Flat button also supports dropdown menus in various directions. Use
.dropdown-toggle to display directional arrow
Rounded flat button
Use a combination of .btn-flat-[color] and
.rounded-pill classes to make any button fully rounded
Rounded flat with icon
Rounded button can be also used with text label, icons and/or combination of both. No extra adjustments are required
Rounded flat with menu
Rounded button with dropdown menu. In certain cases horizontal padding can be extended with utility classes
Labeled flat button
In labeled flat button icons are separated from text label with slightly darker background color. This color can be adjusted via utility classes
Rounded flat with label
Rounded labeled flat button requires .rounded-pill class to
be added to both button and icon elements
Labeled flat with menu
Labeled flat button with dropdown menu. Supports left and right alignment. All other options also work in this button type
Icon flat button
Flat button can be used with icon only. For better sizing (width =
height), use optional .btn-icon class in button element
Rounded flat with icon
Add .rounded-pill to .btn-icon to show
perfectly rounded button in 38x38 size. Works with all button styles and sizes
Flat icon button with menu
Icon button has variable width and is controlled by padding. Add
.dropdown-toggle to .btn-icon to show directional arrow
Floating flat button
Button in slightly bigger size to stand out and attract more attention to specific actions. Supports all button colors and options
Floating flat with text
In floating buttons text label is displayed on the second line. Adjust text alignment or spacing with our utility classes
Rounded floating flat buttons
Floating buttons without text label can be displayed in fully rounded
style. Just add .rounded-pill to the button element
Transparent border
Use .border-transparent class in addition to
.btn-flat-[color] to make border transparent in all button states
Default border
All flat buttons have 1px border width by default and don't require any additional border utility classes
Thick border
You can control border width in flat buttons with our
.border-width-[size] utility classes. Here border width is 2px
Link buttons
Buttons with default text link stylesLink button
Link button has same size as other buttons, but background and border colors are transparent and text color is similar to text link color
Link button with icon
Link button can be used with text, icons or combination of both. There is no limit in number of icons per button
Link button with menu
Link button also supports dropdown menus in various directions. Use
.dropdown-toggle to display directional arrow
Labeled link button
In labeled link button icons are separated from text label with custom background color. This color can be adjusted via utility classes
Link button with rounded label
Rounded labeled link button requires .rounded-pill class to
be added to icon element
Labeled link button with menu
Labeled link button with dropdown menu. Supports left and right alignment. All other options also work in this button type
Button sizes
Buttons in large, medium and small sizesSolid button sizes
Use .btn-[color].btn-[sm|lg] classes to control solid
button size. Default button size doesn't require additional class names
Solid button with label
Use .btn-[color].btn-[sm|lg] and
.btn-labeled.btn-labeled-[start|end] classes to control labeled solid
button size
Rounded solid button
Use .btn-[color].btn-[sm|lg] and .rounded-pill
classes to control rounded solid button size
Outline button sizes
Use .btn-outline-[color].btn-[sm|lg] classes to control
outline button size. Default button size doesn't require additional class names
Outline button with label
Use .btn-outline-[color].btn-[sm|lg] and
.btn-labeled.btn-labeled-[start|end] classes to control labeled outline
button size
Rounded outline button
Use .btn-outline-[color].btn-[sm|lg] and
.rounded-pill classes to control rounded outline button size
Default button sizes
Use .btn-flat-[color].btn-[sm|lg] classes to control flat
button size. Default button size doesn't require additional class names
Labeled button sizes
Use .btn-flat-[color].btn-[sm|lg] and
.btn-labeled.btn-labeled-[start|end] classes to control labeled flat
button size
Outline button sizes
Use .btn-flat-[color].btn-[sm|lg] and
.rounded-pill classes to control rounded flat button size
Button colors
Predefined button sizing optionsLight button
Use .btn-[light|outline-light|flat-light] class with the
base .btn in any input, anchor or button element
Dark button
Use .btn-[dark|outline-dark|flat-dark] class with the base
.btn in any input, anchor or button element
Primary button
Use .btn-[primary|outline-primary|flat-primary] class with
the base .btn in any input, anchor or button element
Secondary button
Use .btn-[secondary|outline-secondary|flat-secondary] class
with the base .btn in any input, anchor or button element
Danger button
Use .btn-[danger|outline-danger|flat-danger] class with the
base .btn in any input, anchor or button element
Success button
Use .btn-[success|outline-success|flat-success] class with
the base .btn in any input, anchor or button element
Warning button
Use .btn-[warning|outline-warning|flat-warning] class with
the base .btn in any input, anchor or button element
Info button
Use .btn-[info|outline-info|flat-info] class with the base
.btn in any input, anchor or button element
Indigo button
Use .btn-[indigo|outline-indigo|flat-indigo] class with the
base .btn in any input, anchor or button element
Pink button
Use .btn-[pink|outline-pink|flat-pink] class with the base
.btn in any input, anchor or button element
Purple button
Use .btn-[purple|outline-purple|flat-purple] class with the
base .btn in any input, anchor or button element
Yellow button
Use .btn-[yellow|outline-yellow|flat-yellow] class with the
base .btn in any input, anchor or button element
Teal button
Use .btn-[teal|outline-teal|flat-teal] class with the base
.btn in any input, anchor or button element
White button
Use .btn-[white|outline-white|flat-white] class with the
base .btn in any input, anchor or button element
Link button
Use .btn-link class with the base .btn in any
input, anchor or button element
Icon alignment
Examples of left and right icon alignment in buttonsLeft icon alignment
Add icon markup before button text and add optional
.me-2 class to add extra spacing between them
Right icon alignment
Add icon markup after button text and add optional
.ms-2 class to add extra spacing between them
Right in dropdown
Icons with left and right alignment work well in button with dropdown menu, directional arrow doesn't overlap custom icons
Left label position
Use .btn-labeled.btn-labeled-start classes in button
element to align icon label to the left
Right label position
Use .btn-labeled.btn-labeled-end classes in button element
to align icon label to the right
Right in dropdown
Labeled button with icon is also adapted for use in button with dropdown menu. Here icon is displayed after directional arrow
Button dropdowns
Dropdown menus attached to buttonsButton dropdown
Use .dropdown-toggle class to show directional arrow in
button dropdown and data-bs-toggle="dropdown" to trigger the menu
Menu with icon
Button with dropdown can be used with text, icons or combination of both. There is no limit in number of icons per button
Segmented button
A split button with dropdown. Use additional
.dropdown-toggle-split class for proper spacing around the dropdown
caret
Button dropup
Trigger dropdown menus above elements by adding .dropup to
the parent element of dropdown toggler
Drop right
Trigger dropdown menus at the right of the elements by adding
.dropend to the parent element of dropdown toggler
Drop left
Trigger dropdown menus at the left of the elements by adding
.dropstart to the parent element of dropdown toggler
Rounded button dropup
Trigger dropdown menus above rounded button by adding
.dropup to the parent element of dropdown toggler
Rounded button menu
Rounded button with dropdown can be used with text, icons or combination of both. There is no limit in number of icons per button
Rounded segmented
A split rounded button with dropdown. Use additional
.dropdown-toggle-split class for proper spacing around the dropdown
caret
Labeled button dropup
Trigger dropdown menus above labeled button by adding
.dropup to the parent element of dropdown toggler
Labeled segmented
A split labeled button with dropdown. Use additional
.dropdown-toggle-split class for proper spacing around the dropdown
caret
Segmented dropup
A split labeled button with dropup. Use additional
.dropdown-toggle-split class for proper spacing around the dropdown
caret
Icon button dropup
Dropup menu can be attached to any button, including buttons with icons only. Logic and markup are the same
Segmented dropdown icon
Example of segmented button with dropdown menu, attached to button with icon only. Works best in button toolbars
Segmented dropup button
Dropup is dynamic, meaning if there's not enough space above or below the button, it automatically flips
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
