Last Updated on January 19, 2021 by Roshan Parihar
In this tutorial, learn how to style a button using Bootstrap classes. The short answer is: use the Bootstrap contextual classes (like .btn-primary and others are given below) that is useful to change the appearance of the button.
Bootstrap provides useful classes to change the appearance of a button, link, or any input type button element with the addition of a few classes. You don’t need to add extra CSS to your buttons to give it a gradient button styled look. Let’s find out below with useful examples.
How to Style Button Using Bootstrap CSS Classes
To style the button using Bootstrap, you have to use the contextual classes of the Bootstrap Button as given below:
| Class Name | Description |
|---|---|
.btn-default |
This is a default button with a gray color gradient. |
.btn-primary |
Used this class to indicate the primary action button in a group of buttons. |
.btn-info |
You can use this class as an alternative to the default style button. |
.btn-success |
If you want to specify any positive or successful action, you can use this button style. |
.btn-warning |
Indicate caution style with a button to warn a user before clicking on the button. |
.btn-danger |
To indicate any negative action on click of the button. |
.btn-link |
Display a simple link using this class style. |
Let’s see the result of adding these classes to the button element with the example given below:
|
1 2 3 4 5 6 7 |
<button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> |
Output
The above example showing the different appearance of the button element on the addition of the Bootstrap contextual classes. It requires to add a single class (for example: .btn-primary) in combination of the common button class .btn.
There are 7 contextual classes options available in Bootstrap that you can select one for your button to style the button element as per your requirements.
You May Also Like to Read