How to Style Button Using Bootstrap CSS Class

Learn how to style button using bootstrap with this practical example. Bootstrap provides useful classes to style a button, link or any input type button element with the addition of few classes. You don’t need to add extra CSS to your buttons to give it gradient button styled look.

Bootstrap Style Button Classes

You can below given classes to style button using bootstrap. These classes have gives buttons with different gradient color and look and feel on hover. Below are the contextual classes of Bootstrap Button.

Class NameDescription
.btn-defaultThis is a default button style with a gray color gradient.
.btn-primaryUsed this style of button to indicate the primary action button in a group of buttons.
.btn-infoYou can use this style of a button as an alternative to the default style button.
.btn-successIf you want to specify any positive or successful action, you can use this button style.
.btn-warningIndicate caution style with a button to warn a user before clicking on the button.
.btn-dangerDisplay this style of button to indicate any negative action on click of the button.
.btn-linkDisplay a simple link using this class style.

Output


Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.