Tutorial on How to Create Bootstrap 3 Button Group and its Details

In our previous post, we have learned about the bootstrap button and we are going to learn Bootstrap 3 Button Group . for that we have to include some buttons inside a div or container and give it to the class name .btn-group , normally its a horizontal button group

Example:

Try It Yourself

<div class="btn-group">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

Now the types of the button group

Button Toolbar

You can also set of button groups together for creating a toolbar like a view. To create button toolbar just apply the class .btn-toolbar on its parent div.

Example:

 

Try It Yourself

<div class="btn-toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-primary">1</button>
        <button type="button" class="btn btn-primary">2</button>
        <button type="button" class="btn btn-primary">3</button>
        <button type="button" class="btn btn-primary">4</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">5</button>
        <button type="button" class="btn btn-primary">6</button>
        <button type="button" class="btn btn-primary">7</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">8</button>
    </div>
</div>

Size of Button Group

There is 4 type of size available in bootstrap 3 button group and they are:

Large Button Group:

to make a large size button group apply a class name .btn-group-lg with class name .btn-group

Example:

 

Try It Yourself

<div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

Normal or Medium Button Group:

to make a normal or medium-size button group apply a class name .btn-group

Example:

 

Try It Yourself

<div class="btn-group">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

Small Button Group:

to make a small size button group apply a class name .btn-group-sm with class name .btn-group

Example:

 

Try It Yourself

<div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

Extra Small Button Group:

to make an extra small size button group apply a class name .btn-group-xs with class name .btn-group

Example:

 

Try It Yourself

<div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

Justified Button Groups

To make a justified button group or full-width content button group apply a class name .btn-group-justified with class name .btn-group on its parent div.

Example:

 

Try It Yourself

<div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-primary">Left</a>
    <a href="#" class="btn btn-primary">Middle</a>
    <a href="#" class="btn btn-primary">Right</a>
</div>

Vertical Button Groups

To make a verticle that is one after another on its below button group apply a class name .btn-group-justified on its parent div.

Example:

 

Try It Yourself

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

In this post, we have discussed Bootstrap 3 Button Group and hope it will help you. and please provide your comments to make the site better and useful.

Thanks for Reading