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

    Left
    Middle
    Right

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

    

        1
        2
        3
        4
    
    

        5
        6
        7
    
    

        8
    

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

    Left
    Middle
    Right

Normal or Medium Button Group:

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

Example:

Try It Yourself

    Left
    Middle
    Right

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

    Left
    Middle
    Right

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

    Left
    Middle
    Right

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

    Left
    Middle
    Right

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

  Apple
  Samsung
  Sony

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