Button groups in Bootstrap

How to use button groups in bootstrap?

Button groups:

These are used to group the buttons.

<div class="btn-group">
        <button type="button" class="btn btn-primary">DotNetFunda</button>
        <button type="button" class="btn btn-success">TechFunda</button>
        <button type="button" class="btn btn-danger">ITFunda</button>
    </div>

In the above code snippet we have defined<btn-group>. we are having class as btn-group and we are having contextual colors as buttons.

<btn-group>-renders to group the buttons

output

Vertical button group:

It is used to group the button vertical

 <h5>Vertical Button group</h5>
    <div class="btn-group-vertical">
        <button type="button" class="btn btn-primary">DotNetFunda</button>
        <button type="button" class="btn btn-success">TechFunda</button>
        <button type="button" class="btn btn-danger">ITFunda</button>
    </div>

Button group vertical

In the above code snippet we have vertical button group. We are having class as

<btn-group-vertical> - displays the group in the vertical

output

Justified button group:

Justified button group is used to span entire the width of the screen

<h5>Justified Button group</h5>
    <div class="btn-group-justified">
        <a href="http://www.dotnetfunda.com" class="btn btn-primary">DotNetFunda</a>
        <a href="http://www.techfunda.com" class="btn btn-success">TechFunda</a>
        <a href="http://www.itfunda.com" class="btn btn-danger">ITFunda</a>
    </div>

Justified button group

In the above code snippet we have taken class as btn-group-justified. ew have given <a> tags to determine the justified button group

<btn-group-justified>- renders the button group with full width to the screen

output

Button group with drop down menu:

This is used to keep the drop down menu to the buttons.

<h5>Dropdown Button group</h5>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">DotNetFunda</button>
        <button type="button" class="btn btn-primary">ITfunda</button>
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                TechFunda <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Bootstrap</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">AngularJs</a></li>
                <li><a href="#">ASP.NET</a></li>
                <li><a href="#">c#</a></li>
                <li><a href="#">HTML5</a></li>
            </ul>
        </div>
    </div>

Dropdown buttons

In the above code snippet we have defined how to use drop down menu in the list. we have taken class as btn-group and we have taken dropdown menu as dropdown-toggle. and span as caret which defines the icon to drop down and we have ul class to list the li values in the drop down menu.

<dropdown toggle> -renders the button to drop down menu as lists

output

Split buttons with drop down menu

Split buttons are used to split the buttons with drop down menu

<h5>Split Dropdown Button group</h5>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">techfunda</button>
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">javascript</a></li>
            <li><a href="#">Bootstrap</a></li>
        </ul>
    </div>

Split dropdown button

In the above code snippet we have defined how to use drop down menu with spilt button in the list. we have taken class as btn-group and we have taken dropdown menu as dropdown-toggle. and span as caret which defines the icon to drop down and we have ul class to list the li values in the drop down menu.

output

Button Tool bar

Buttun tool bar s used to create the tool bar

 <h5>Button Toolbar</h5>
    <div class="btn-toolbar" role="toolbar">
        <div class="btn-group">
            <button type="button" class="btn btn-default">Button 1</button>
            <button type="button" class="btn btn-primary">Button 2</button>
            <button type="button" class="btn btn-warning">Button 3</button>
        </div>

        <div class="btn-group">
            <button type="button" class="btn btn-success">Button 4</button>
            <button type="button" class="btn btn-danger">Button 5</button>
            <button type="button" class="btn btn-info">Button 6</button>
        </div>
    </div>

Button Tool bar

Button Tool bar is used to create the tool bar we have taken class as tool bar and role as tool bar and we have defined the group of the buttons in the output

output

Button group with drop up menu

It is used to add the drop up menu to the button group.

 
<h5>button with drop up menu</h5>
    <div class="row" style="margin-left:50px; margin-top:200px">

        <div class="btn-group dropup">
            <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                DotNetFunda
                <span class="caret"></span>
            </button>

            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Forums</a></li>
                <li><a href="#">Artciles</a></li>
                <li><a href="#">CareerAdvice</a></li>
            </ul>
        </div>
    
    </div>

Button dropup

In the above code snippet we have defined how to use drop up menu in the list. we have taken class as btn-group and we have taken drop down menu as dropdown-toggle. and span as caret which defines the icon to drop down and we have ul class to list the li values in the drop down menu.

<drop up>- renders the list to appear to upwards

output

Button group drop down size

It is used to set the size of the drop down size

<h5>button with dropdown size</h5>
    <div class="row" style="margin-left:50px; margin-top:200px">

        <div class="btn-group">
            <button type="button" class="btn btn-warning dropdown-toggle btn-lg" data-toggle="dropdown">
                DotNetFunda
                <span class="caret"></span>
            </button>

            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Forums</a></li>
                <li><a href="#">Artciles</a></li>
                <li><a href="#">CareerAdvice</a></li>
            </ul>
        </div>


        <div class="btn-group">
            <button type="button" class="btn btn-success dropdown-toggle btn-sm" data-toggle="dropdown">
                DotNetFunda
                <span class="caret"></span>
            </button>

            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Forums</a></li>
                <li><a href="#">Artciles</a></li>
                <li><a href="#">CareerAdvice</a></li>
            </ul>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-danger dropdown-toggle btn-xs" data-toggle="dropdown">
                DotNetFunda
                <span class="caret"></span>
            </button>

            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Forums</a></li>
                <li><a href="#">Artciles</a></li>
                <li><a href="#">CareerAdvice</a></li>
            </ul>
        </div>
    </div>

Button with dropdown size

In the above code snippet we have defined how to keep the size of the dropdown button group. we have class as button group and we are having