Bootstrap Button

Learn how to create a button using Bootstrap button classes with the examples and tutorials. Style your button, give shape and size with the addition of single classes.

How to create Buttons Using Bootstrap

Bootstrap provides many useful classes to create a beautiful button by adding few classes to the HTML button element. You can create a button in many sizes like small, medium and large sizes.

Buttons are the elements you can use every time when creating a form to get user button data. To make these forms beautiful, bootstrap buttons are the easiest way to do this by just adding useful classes given below.

You just need to add the bootstrap button class to the button element and a beautiful button is ready to use in your forms.

What are the Bootstrap Button Classes to Create Button

Bootstrap provides seven different classes which are as given below and provides the seven types of beautiful buttons you can use to create beautiful forms. These classes are given below.

See each button style and hover over the buttons to feel them one by one.

Class NameButton StyleDescription
.btn-defaultDefault class creates a button with white background and greyish border.
.btn-primaryThe primary class creates a button with blue background and dark blue border.
.btn-infoInfo class creates a button with deep sky blue color and dark sky blue border.
.btn-successSuccess class creates a button with green in color and dark green border.
.btn-warningWarning class creates a button with greyish orange color and dark orange border color.
.btn-dangerDanger class creates a button with a dark red tomatoes like the color and dark red border color.
.btn-linkLink class createa a button with link color text.

You can get these button styles for the HTML elements like anchor, button and button by just adding these classes.

See the below example of how you can use these classes for the button type button HTML element.


Test it Live


The above example gives you button type button with seven styles of a bootstrap button by just adding the classes.

To give buttons a different look and style, you can use different styling class options given in the below tutorials.

Styling Bootstrap Button Using Bootstrap Classes

You can style a button using various bootstrap classes given below for each styling option.

Change the Size of Bootstrap Button Using Button Size Classes

To change the size of buttons bootstrap provides four different useful classes to achieve the predefined sizes as per your requirement. You just need to add these classes to your button and it changes the size of your button.

These classes are given below with the buttons created by them.

Class NameButton StyleDescription
.btn-lgDisplay a large size button by using this class in the button element.
.btn-mdTo create a medium size button for your forms, you can use this class for your button element.
.btn-smThe class creates a small size button by just adding it to your button element.
.btn-xsCreate the smallest size button with this class.

See the below-given example to use these classes to button type button HTML element.


Test it Live


The above example using the primary and default classes to create a button element for all sizes. The sequence of size is from the large button to the smallest button size type. You can use these size classes for other button classes like info, warning, danger etc.

Enable/Disable Bootstrap Button with active/disable classes

Now, If you want to create a form in which your user cannot able to click the button given in the form, you can make a button disable by using the bootstrap disable class.

There are two classes to make class enable or active and disable or inactive. These classes are given below.

Class NameButton StyleDescription
.activeCreate a button which looks like a clicked button or active button.
.disabledIf you want to create a disabled button which user cannot able to click on it, you can use this class.

Let’s see the example to use these classes with the button type button element. The example using the bootstrap primary and default class to create button element.

Test it Live


The above example contains the active/disabled primary buttons and active/disabled default buttons. Because the above example contains the disabled buttons, you can hover over these buttons to check the bootstrap stying of these buttons.

Bootstrap Block Level Buttons

To create a full container width button, you can use bootstrap block level buttons. There is a single class given below you can use to create a block-level button element.

Class NameButton Style

You can add this class to any type of button element to get a full container width button. If you want to get a different sized full width button, you can add button size classes given above in the bootstrap button size section.

Test it Live


The above example contain the three types of buttons primary, default and success. Each button using the bootstrap block level button class to create a full block width button.

You may also like to read

I hope, you like this post of using the Bootstrap button. If you have any queries regarding the tutorial, please comment below.

Also tell me, what other methods you are using to create your buttons using Bootstrap by commenting below.

getbootstrap v3

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.