Bootstrap Buttons

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

Output

Default Primary Info Success Warning Danger Link

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

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

Output

Primary Primary Primary Primary

Default Default Default Default

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

Output

Primary Primary

Default Default

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	Primary

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.

Output

Primary
Default
Success

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

• Align Button to Right With Bootstrap and CSS
• Disable Submit Button Using Bootstrap
• Create Button Work Like Link Using Bootstrap
• Decrease/Increase Button Size Using Bootstrap
• Style Button Using Bootstrap CSS Class
• Left Align and Right Align Button Using Bootstrap?