Robert's Resume

Button Groups

Code

.btn-group

.btn-group-sm|lg

.btn-group-vertical

.btn-toolbar

Top

Definitions

Button Group
▪ Wraps a series of buttons and creates a contiguous style.
Small and Large
▪ Buttons Groups come in Small, Default and Large sizes.
Vertical
▪ Button Groups can be Vertical.
Toolbar
▪ Create toolbars with Button Groups.
Top

Key Points

  • You can mix styles in Button Groups.
  • Button Groups are inline by default.
  • Button Groups can also contain groups of links.
  • Remember to keep accessibility in mind...Button Groups are in <div> elements.
  • Top

Basic Styling

Wrap buttons in a <div> element and use .btn-group.

Top

Outlined Buttons

Simply change the style of the buttons with btn-outline-*.

Top

Sizing

Use .btn-group-sm|lg to change the size of off buttons in the button group.

NOTE: Button groups are only inline with other button groups of the same size!

Top

Justified Button Groups

Force the buttons to use all the space by adding .d-flex.

Top

Vertical Button Groups

Use .btn-group-vertical in your container.

Top

Button Toolbar

Wrap all button groups in a <div> with .btn-toolbar.

Top

Button Group with Nested Dropdown

Add a button group inside the first button group (nesting). Have the second button group contain a dropdown menu. Learn more information about Dropdowns.

Top

Checkbox Button Groups

Add checkbox <input> and <label> elements inside the button group. Find out more information on Checkboxes.

Top

Radio Button Group

Add radio <input> and <label> elements inside the button group. Checkout more information on Radios.

Top