Bootstrap button – 9 demos of custom color, size, dropdown, navbar and more

The buttons in Bootstrap

Bootstrap buttons can be created by using the main class btn followed by its style and size optional classes.

For example, btn-info specifies a light blue button with normal size. Similarly, btn-primary is dark blue, btn-success is green and so on.

A button with Bootstrap classes:

Quick demo of buttons in this tutorial

sizes & colors active & disabled Custom buttons

Dropdown button Split dropdown navbar button

A few points to create Bootstrap styled buttons:

• You can create buttons by using the input tag, button tag or a link tag.
• The main button class to be used is btn which is Bootstrap class.
• The color of the buttons can be changed by using pre-defined classes like btn-info, btn-default, btn-primary, btn-danger.
• The size of the button can also be defined by using the pre-defined classes e.g. for large button use .btn-lg For the small button, use .btn-sm and for extra small use btn-xs class.

See the following example for creating buttons by using Bootstrap classes. In next section, I will show you how to override the default classes to change certain properties like using some other color with same Bootstrap style OR changing the size as per the need of your website.

Bootstrap buttons with different sizes and colors

In this demo, I will only use the pre-defined classes to show how you can create buttons with bootstrap classes. See online demo with code:

See online demo and code

In the demo, you can see different sizes and styled buttons in different rows. Following are the codes for each style:

For normal size of Bootstrap buttons, do not specify any size as follows:

 

For Large size buttons use btn-lg class:

 

 

For small sized buttons, use the btn-sm class, e.g.:

 

For extra small size buttons, use btn-xs class, e.g.:

 

And Block level buttons are using the btn-block class, for example:

 

You can see code of all buttons with respective classes in the code section of demo page.

A demo with active and disabled button Bootstrap

The following example uses the .active class in a button. While the other row uses the disabled attribute of the button to make button disabled.

See online demo and code

The active class is a little darker to the normal state that shows a button is “active” or clicked to stand it out from other buttons.

For example:

 

 

The disabled attribute is just a normal button attribute that is not clickable.

 

 

Customizing Bootstrap buttons by overriding classes

The buttons are nicely styled in the Bootstrap framework by using its classes. However, the colors are limited while using the available classes. In certain scenarios, you may want to use custom colors for buttons to match the theme of your website.

To accomplish that, one of the ways is to override the classes of Bootstrap related to the buttons. For example, you may take the btn-default class from the Bootstrap CSS file, copy it to style section and use custom properties.

If you just want to change the color, the rest will retain e.g. round edges etc.

See a demo with different colors:

See online demo and code

In the demo, you can see different color scheme is used for the buttons with same styles as in the above examples. If you look at the code of buttons in the demo page, it is also the same as used in above example:

 

The only difference is the classes used in the head section:

 

What I have done is, taken the classes from Bootstrap CSS for the btn-default style and in that demo just overridden the background-color, border and font color properties. As other properties are not changed, so other properties will remain the same.

Similarly, you can change just btn class that will change the color of all buttons. Or change other classes like btn-danger, btn-info etc.

One important thing is, you have to place this style after including the Bootstrap CSS file.

Although, you can change these styles in the source file, however, this is not recommended for consistency purpose.

A button demo with CSS 3 properties

The following demo uses more properties including CSS3 properties to style Bootstrap buttons. See the demo online followed by how you can do it:

See online demo and code

This is almost the same example as above except I used a few CSS 3 properties. While this time I used btn-danger class to override its properties.

Just play with different colors and properties to design your own.

 

Also, note you may use custom names as well and just refer this after btn class, e.g.

btn btn-custom

Bootstrap button as dropdowns

You may turn a button into a dropdown (acting as a dropdown menu). By using a button tag with <ul> or <ol> tags and a few markup settings you may create it by using Bootstrap.

The buttons can be simple as shown in above examples or you may use split buttons as well. Both demos are shown below:

Simple button demo

See the demo and code online:

See online demo and code

The button tag is given a few data attributes to turn it into a dropdown menu:

 

 

After that, a list is created with menu items with dropdown-menu class of Bootstrap.

 

The dropdown-menu and divider Bootstrap classes are overridden for background and border properties to match the button’s color for the demo.

You can see the complete code in the demo page.

A split button dropdown example

In this demo, a split button is created to act button as a dropdown. One button is carrying the text or heading of the menu while another acts as the toggling dropdown.

See it online:

See online demo and code

You can see the difference between this and above example.

Note: For buttons to act as dropdowns, you have to include Bootstrap JS library as well. In all above examples (simple buttons), I only included CSS library.

Applying this split button in navbar example

The use of this split (with toggle) or single dropdown button can be in different places including navigation bar that uses Bootstrap’s navbar class.

The following example shows how to integrate a button dropdown that I created in above example to a navbar. See it online first:

See online demo and code

In the code, you can see a navbar is created with other menu items along with a button dropdown. The code for button dropdown is:

 

And CSS overridden to match the navbar color is:

 

This is placed in the head section.

Using icons in buttons of Bootstrap

You can use Glyphicons, provided by Bootstrap in buttons as well. In this demo, I have created a few buttons with different icons. See the demo and then I will tell you how you can do it easily:

See online demo and code

You can see, different sizes of buttons are created in the demo where icons are attached with each button. One of the ways is to use a span tag after the button tag and include icon class in the span tag. The placement of the text and icon can be changed as shown in the demo and code below:

 

A button Toolbar demo

You may create a button tool bar by using the btn-group class. In the following demo, media player toolbar, which is basically button group with glyphicons are created.

Three toolbars with extra small, small and normal sized buttons are created as shown below:

See online demo and code

You can see the complete code in the demo page, however, following is the code for extra small buttons acting as toolbar:

 

Conclusion

By using the Bootstrap’s framework, you may create nice looking buttons with many uses quite easily including different sizes, color, customization and icons in the buttons.

You may use these buttons in forms, navigations bars, as toolbars and more.