Mục Lục

Bootstrap

Button Groups

Bootstrap allows you to group a series of buttons together (on a single line) in a button group:

Use a <div> element with class .btn-group to create a button group:

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:

Vertical Button Groups

Bootstrap also supports vertical button groups:

Use the class .btn-group-vertical to create a vertical button group:

Justified Button Groups

To span the entire width of the screen, use the .btn-group-justified
class:

Example with <a> elements:

Note: For <button> elements, you must wrap each button in a .btn-group class:

Nesting Button Groups & Dropdown Menus

Nest button groups to create dropdown menus:

Example

<div class=”btn-group”>
<button type=”button” class=”btn btn-primary”>Apple</button>
<button type=”button” class=”btn btn-primary”>Samsung</button>
<div class=”btn-group”>
    <button type=”button” class=”btn btn-primary dropdown-toggle” data-toggle=”dropdown”>
    Sony <span class=”caret”></span></button>
    <ul class=”dropdown-menu” role=”menu”>
      <li><a href=”#”>Tablet</a></li>
      <li><a href=”#”>Smartphone</a></li>
    </ul>
</div>
</div>

Try it Yourself »

Split Button Dropdowns

Test Yourself With Exercises

Exercise:

Add a Bootstrap class to group the buttons together.

<div class="">
  <button class="btn btn-primary">Apple</button>
  <button class="btn btn-primary">Samsung</button>
  <button class="btn btn-primary">Sony</button>
</div>

Start the Exercise