Bootstrap Button Group

In our previus post we've learned regarding bootstrap button anw we tend to square measure progressing to learn Bootstrap three Button cluster . for that we've to incorporate some buttons within a div or contener and provides it to classname .btn-group , normaly its a horizontal button cluster

You can read from my website by clicking here

Example:

<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 categories of button cluster
Button Toolbar

You can additionally set of button teams along for making toolbar like read. to make button toolbar simply apply the category .btn-toolbar on its parrant div.

Example:

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

There is four style of size out there in bootstrap three button cluster and that they are:
Large Button Group:

to make an oversized size button cluster apply category name .btn-group-lg with category name .btn-group

Example:

<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 standard or medium size button cluster apply category name .btn-group

Example:

<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 alittle size button cluster apply category name .btn-group-sm with category name .btn-group

Example:

<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 little Button Group:

to make a additional little size button cluster apply category name .btn-group-xs with category name .btn-group

Example:

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

To make a even button cluster or full breadth content button cluster apply category name .btn-group-justified with category name .btn-group on its parrent div.

Example:

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

To make a verticle that's one when another on its below button cluster apply category name .btn-group-justified on its parrent div.

Example:

<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've mentioned regarding Bootstrap three Button cluster and hope it'll assist you. and please give your comments to form the location higher and usefull.