Bootstrap Buttons

We will discuss in this tutorial regarding usage of buttons 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.

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:

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:

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:

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: