Learn how to create button using Bootstap 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 input 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 Name Button Style Description
.btn-default Default class creates a button with white background and greyish border.
.btn-primary The primary class creates a button with blue background and dark blue border.
.btn-info Info class creates a button with deep sky blue color and dark sky blue border.
.btn-success Success class creates a button with green in color and dark green border.
.btn-warning Warning class creates a button with greyish orange color and dark orange border color.
.btn-danger Danger class creates a button with a dark red tomatoes like the color and dark red border color.
.btn-link Link class createa a button with link color text.

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

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

Example

Output


The above example gives you input 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 Name Button Style Description
.btn-lg Display a large size button by using this class in the button element.
.btn-md To create a medium size button for your forms, you can use this class for your button element.
.btn-sm The class creates a small size button by just adding it to your button element.
.btn-xs Create the smallest size button with this class.

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

Example

Output


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 Name Button Style Description
.active Create a button which looks like a clicked button or active button.
.disabled If 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 input type button element. The example using the bootstrap primary and default class to create button element.
Example

Output


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 Name Button Style
.btn-block

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.
Example

Output




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.

Reference
getbootstrap v3 buttons
getbootstrap v4 buttons

Leave a Reply

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.