Bootstrap Buttons

We will discuss in this tutorial regarding usage of bottons in Bootstrap with different examples. Default class of buttons is “.btn” which gives a look of grey button with rounded corners. Bootstrap is providing some more styles options of buttons. Following table of describes the classes and its appearance according to use.

Class	Description
btn	This is Standard button class or Default button class.
btn-primary	This class provides additional visual weight and classifies the main action in a set of buttons.
btn-success	This class point out a positive or successful action.
btn-info	This class of button will use for informational alert messages.
btn-warning	Specify warning should be taken with this action.
btn-danger	Pointing towards a dangerous or likely harmful action.
btn-link	This class shows button look like as a link although upholding the behavior of button.

Below mentioned examples shows behavior of all the above classes of button.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default Button</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary Button</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success Button</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info Button</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning Button</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger Button</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link Button</button>

Demo

Button Size

There are different classes for sizes of buttons following table describes use of those classes.

Class	Description
.btn-lg	To makes the button large size.
.btn-sm	To makes the button small size.
.btn-xs	To makes the button size with extra small.
.btn-block	This creates block level buttons those that span the full width of a parent.

These examples show that how to buttons will display:

<p>
 <button type="button" class="btn btn-primary btn-lg">
 Large Primary button
 </button>
 <button type="button" class="btn btn-default btn-lg"
 >Large button
 </button>
</p>
<p>
 <button type="button" class="btn btn-primary">
 Default size Primary button
 </button>
 <button type="button" class="btn btn-default">
 Default size button
 </button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-sm">
 Small Primary button
 </button>
 <button type="button" class="btn btn-default btn-sm">
 Small button
 </button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-xs">
 Extra small Primary button
 </button>
 <button type="button" class="btn btn-default btn-xs">
 Extra small button
 </button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-lg btn-block">
 Block level Primary button
 </button>
 <button type="button" class="btn btn-default btn-lg btn-block">
 Block level button
 </button>
</p>

Demo

Button State

Bootstrap is offering active, disabled etc. classes which allow you to change the states of buttons. Each of all these are talked about in the following sections:

Active State

Active state appears when button is pressed and that gives a look with darker background, darker border and inset shadow. The following mentioned classed used to make anchor tag and button tag active.

Element	Class
Button element	Use .active class to show that it is activated..
Anchor element	Use .active class to <a> buttons to show that it is activated.

These example willl demonstrates this:

<p>
 <button type="button" class="btn btn-default btn-lg ">
 Default Button
 </button>
 <button type="button" class="btn btn-default btn-lg active">
 Active Button
 </button>
</p>
<p>
	<a href="#" class="btn btn-default btn-lg" role="button">Default link</a> 
	<a href="#" class="btn btn-default btn-lg active" role="button">Default Link Active</a>
</p>
<p>
 <button type="button" class="btn btn-primary btn-lg ">
 Primary button
 </button>
 <button type="button" class="btn btn-primary btn-lg active">
 Active Primary button
 </button>
</p>
<p>
	<a href="#" class="btn btn-primary btn-lg" role="button">Primary link</a> 
	<a href="#" class="btn btn-primary btn-lg active" role="button">Primary Link Active</a>
</p>

Demo

Disabled State

When you apply disables attribute on a button, it will fade in color by 50%, and lose the gradient. The following table describes classes are using to make button tag and anchor tag disabled:

Element	Class
Button element	Add the disabled attribute to <button> tag.
Anchor element	Add the disabled class to <a> tag.

Here are the example for demonstrates:

<p>
 <button type="button" class="btn btn-default btn-lg">
 Default Button
 </button>
 <button type="button" class="btn btn-default btn-lg" disabled="disabled">
 Disabled Button
 </button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-lg ">
 Primary button
 </button>
 <button type="button" class="btn btn-primary btn-lg" disabled="disabled">
 Disabled Primary button
 </button>
</p>
<p>
 <a href="#" class="btn btn-default btn-lg" role="button">
 Link
 </a>
 <a href="#" class="btn btn-default btn-lg disabled" role="button">
 Disabled Link
 </a>
</p>
<p>
 <a href="#" class="btn btn-primary btn-lg" role="button">
 Primary link
 </a>
 <a href="#" class="btn btn-primary btn-lg disabled" role="button">
 Disabled Primary link
 </a>
</p>

Demo

Button Tags

You may possibly use these button classes with <button>, <a> or <input> tags. But this is suggested that you use it with <button> tags generally to avoid cross browser irregularity problems. Following example demonstrates this:

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Demo

Bootstrap Buttons