Bootstrap Button Groups

Bootstrap Button Groups
❮ 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

element with class .btn-group to create a button group:

Example

  Apple
  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

  Apple
  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

  Apple
  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

 

    Apple
 

 

    Samsung
 

 

    Sony
 

»
Nesting Button Groups & Dropdown Menus
AppleSamsung Sony
Nest button groups to create dropdown menus:

Example

  Apple
  Samsung
 

   
    Sony
   

 

»
Split Button Dropdowns
Sony
Example

  Sony
 
   
 
 

»
Test Yourself with Exercises!
Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »  Exercise 5 »

❮ Previous Next ❯

Leave a comment