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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!-- 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> |
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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<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> |
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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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> |
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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<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> |
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 2 3 4 |
<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"> |
