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

In our previus post we have learned about bootstrap button anw we are going to learn Bootstrap 3 Button Group . for that we have to include some buttons inside a div or contener and give it to classname .btn-group , normaly 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 button group

Button Toolbar

You can also set of button groups together for creating toolbar like view. To create button toolbar just apply the class .btn-toolbar on its parrant 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 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 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 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 a extra small size button group apply 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 class name .btn-group-justified with class name .btn-group on its parrent 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 class name .btn-group-justified on its parrent 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 about Bootstrap 3 Button Group and hope it will help you. and please provide your comments to make the site better and usefull.

Thanks for Reading

Share The Post On -

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.