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:

Leave a Reply

Your email address will not be published. Required fields are marked *