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.
1 |
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:
1 |
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:
1 |
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:
1 |
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:
1 |