How to Style Button Using Bootstrap CSS Classes

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:

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