WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Button Groups


In this chapter we discuss of Button Groups

Button Groups

we can use <div> element with class .btn-group to make a button group:

Example

<div class="btn-group">
  <button type="button" class="btn btn-primary">Google</button>
  <button type="button" class="btn btn-primary">YouTube</button>
  <button type="button" class="btn btn-primary">Facebook</button>
</div>

Tip: use class .btn-group-* to size all buttons in the group:

Example

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Google</button>
  <button type="button" class="btn btn-primary">YouTube</button>
  <button type="button" class="btn btn-primary">Facebook</button>
</div>

Vertical Button Groups

Bootstrap are supports vertical button groups:

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

Example

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Google</button>
  <button type="button" class="btn btn-primary">YouTube</button>
  <button type="button" class="btn btn-primary">Facebook</button>
</div>

Justified Button Groups

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

Example with <a> elements:

Example

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Google</a>
  <a href="#" class="btn btn-primary">YouTube</a>
  <a href="#" class="btn btn-primary">Facebook</a>
</div>

Example

<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Google</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">YouTube</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Facebook</button>
  </div>
</div>

Nesting Button Groups & Dropdown Menus

This is a example of Nest button groups to create dropdown menus:

Example

<div class="btn-group">
  <button type="button" class="btn btn-primary">Google</button>
  <button type="button" class="btn btn-primary">YouTube</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Facebook <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Social network</a></li>
      <li><a href="#">Video sharing</a></li>
    </ul>
  </div>
</div>

Split Button Dropdowns

Example

<div class="btn-group">
  <button type="button" class="btn btn-primary">Facebook</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Social network</a></li>
    <li><a href="#">Video sharing</a></li>
  </ul>
</div>