How to Decrease/Increase Button Size Using Bootstrap

Increase button size needs CSS to add to the button element with some extra color to style button. Bootstrap provides many useful classes to create a button and use on your website. You can easily style a button using bootstrap.

Decrease or Increase Button Size Using Bootstrap

To increase button size, bootstrap provides four different useful classes to add and change the size of a button to smaller, medium and larger. You just need to add these classes to your button to decrease or increase the size of a button.

If you want to learn the classes of Bootstrap to create your own button, you must read our tutorial on Bootstrap button. However, if you want to decrease/increase button size, read further for the example and answer this question.

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

Class Name Button Style Description
.btn-lg Use this class to create a large size button.
.btn-md Specify this class to create a medium size button.
.btn-sm Create a small size button using this class.
.btn-xs You can also create an extra small size button using this class.

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



Create Full-Width Button Using Bootstrap

You can also create a full-width button element using bootstrap. In the above example, you can decrease or increase button size. However, to make a button appear in the whole container width, you have to use the block button using the class .btn-block.



The above example contains the primary action type. If you want to get more button type, you can use contextual classes given in the style a button using bootstrap tutorial page.

If you want to learn more about creating buttons, you can visit our bootstrao tutorial page on how to create a button using bootstrap.


Get FREE Access to Toolkit and Resources that we are using in Tutorialdeep that Every Professional Should Have! in one handy PDF.

Get the PDF

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.

Download Link Will be Send to Your Email id