Bootstrap button classes : Along with the btn class, one of the following button classes can be used. The colour scheme you get depends on the class you use.

Example : To get the buttons lined up one below the other instead of being side-by-side, I have placed them inside a <p> element.

<p><buttonclass="btn
btn-default">btn-default</button></p>

<p><buttonclass="btn
btn-primary">btn-primary</button></p>

<p><buttonclass="btn
btn-success">btn-success</button></p>

<p><buttonclass="btn
btn-info">btn-info</button></p>

<p><buttonclass="btn
btn-warning">btn-warning</button></p>

<p><buttonclass="btn
btn-danger">btn-danger</button></p>

<p><buttonclass="btn
btn-link">btn-link</button></p>

Output :

To make an anchor element look like a button, use btn class along with the other button classes (like btn-default, btn-primary etc.)

<ahref="#"class="btn
btn-primary">Hyperlink</a>

Output :

Changing Button Size : Use the following button classes to get large, small or extra small buttons

<buttonclass="btn
btn-primary btn-lg">Large</button>

<buttonclass="btn
btn-primary btn-sm">Small</button>

<buttonclass="btn btn-primary btn-xs">Extra Small</button>

Output :

To create a button that span the full width of it's parent use btn-block class

Example : The following example displays All the 4 buttons side by side in a single line on a large screen3 buttons side by side in the first line and the last button in the second line on a medium screen2 buttons side by side in the first line and the rest 2 buttons side by side in the second line on a small screenAll the 4 buttons one below the other on an extra small screen

What this example the button width is fixed

<divclass="container">

<divclass="row">

<divclass="col-lg-3
col-md-4 col-sm-6 col-xs-12">

<divclass="customDiv">

<buttonclass="btn
btn-primary">Button 1</button>

</div>

</div>

<divclass="col-lg-3
col-md-4 col-sm-6 col-xs-12">

<divclass="customDiv">

<buttonclass="btn
btn-primary">Button 2</button>

</div>

</div>

<divclass="col-lg-3
col-md-4 col-sm-6 col-xs-12">

<divclass="customDiv">

<buttonclass="btn
btn-primary">Button 3</button>

</div>

</div>

<divclass="col-lg-3
col-md-4 col-sm-6 col-xs-12">

<divclass="customDiv">

<buttonclass="btn
btn-primary">Button 4</button>

</div>

</div>

</div>

</div>

Here is customDiv class

.customDiv{

padding:10px;

width:100%;

}

We want the button width to span the full width of it's parent grid column. This can be very easily achieved by applying btn-blcok class on all the button elements.