Bootstrap Button Groups

Button Groups

Bootsrap 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:

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

</div>

 

the key point is .btn-group use display style:inline-block.

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:

 

this is the key point.

.btn-lg,

.btn-group-lg > .btn {

  padding: 10px 16px;

  font-size: 18px;

  line-height: 1.3333333;

  border-radius: 6px;

}

 

Example     

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>

  <button type="button" class="btn btn-primary">Sony</button>     

</div>     

 

Vertical Button Groups

Bootstrap also 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">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>

</div>

 

this is the key point.     

.btn-group-vertical > .float_left{

      display: block;

      float: none;

      width: 100%;

      max-width: 100%;

    }