Bootstrap - Button Groups

Buttons can be grouped together in horizontal, vertical or toolbar groupings.

The main Bootstrap class is btn-group. This is added to the div that encloses the button elements.

Listing 11.4 - A Simple Button Group


                      <div class="btn-group" role="group" aria-label="Button Group">

   <button type="button" class="btn btn-default">Fast</button>

   <button type="button" class="btn btn-default">Slow</button>

   <button type="button" class="btn btn-default">Stop</button>

  </div>

The resulting view on the browser screen:

Horizontal Button Groups

There are three classes to change the size of the button groups:

btn-grp-lg
btn-grp-sm
btn-grp-xs

Listing 11.5 - Justified Button Group

This shows a justified button group using anchor tags with the btn and btn-default classes added to them. This is the code, and the browser view will be shown below



      <div class="btn-group btn-group-justified" role="group"
         aria-label="Button Group">

         <a href="#" class="btn btn-default">Fast</a>

         <a href="#" class="btn btn-default">Slow</a>

         <a href="#" class="btn btn-default">Stop</a>

</div>

Fast Slow Stop

Listing 11.6 - Justified Button group with <button> elements

Extra HTML elements and styling are needed to make justified button groups work in most browsers.

Here is the code:

      <div class="btn-group btn-group-justified" role="group"
           aria-label="Button Group">
        <div class="btn-group">
          <button type="button" class="btn btn-default">Fast</button>
        </div>
        <div class="btn-group">
          <button type="button" class="btn btn-default">Slow</button>
        </div>
        <div class="btn-group">
          <button type="button" class="btn btn-default">Stop</button>
        </div>
      </div>

And here is the browser view of the Justified Button Group using buttons.

Vertical Button Groups

Add the class .btn-group-vertical and the result is a vertically-stacked group of buttons.

The resulting view on the browser screen:

Button Toolbars

You can make toolbars by combining multiple button groups. The example should be visible following this. It should be the example as shown in Figure 11.10