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 NameButton StyleDescription
.btn-lgUse this class to create a large size button.
.btn-mdSpecify this class to create a medium size button.
.btn-smCreate a small size button using this class.
.btn-xsYou 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.

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.