❮ Previous Next ❯
Button Groups
Bootstrap allows you to group a series of buttons together (on a single line) in a button group:
AppleSamsungSony
Use a
Example
Samsung
Sony
»
Tip: Instead of applying button sizes to every button in a group, use class .btn-group-lg|sm|xs to size all buttons in the group:
Example
Samsung
Sony
»
Vertical Button Groups
Bootstrap also supports vertical button groups:
Apple
Samsung
Sony
Use the class .btn-group-vertical to create a vertical button group:
Example
Samsung
Sony
»
Justified Button Groups
To span the entire width of the screen, use the .btn-group-justified class:
Apple Samsung Sony
Example with elements:
Example
»
Note: For elements, you must wrap each button in a .btn-group class:
Example
»
Nesting Button Groups & Dropdown Menus
AppleSamsung Sony
Nest button groups to create dropdown menus:
Example
Samsung
Sony
»
Split Button Dropdowns
Sony
Example
»
Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »
❮ Previous Next ❯
