How to Decrease/Increase Button Size Using Bootstrap

Last Updated on July 16, 2021 by Roshan Parihar

In this tutorial, learn how to increase or decrease button size using Bootstrap. The short answer is: use the Bootstrap button size classes to add to the button element as given below:

  • .btn-lg
  • .btn-md
  • .btn-sm
  • .btn-xs (Removed in Bootstrap 4 but you can use with Bootstrap 3 given below)

Bootstrap provides many useful classes to create a button and use on your website. You can easily style a button using Bootstrap. Let’s find out below how to increase/decrease button size with Bootstrap.

How to 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 the 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 button type button HTML element.

Example

Output





Bonus: download a Free Bootstrap CHEAT SHEET that will show you 20+ most important examples to learn in Bootstrap.

Create a 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.

Example

Output


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 button using the Bootstrap tutorial page.

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

DOWNLOAD Free Bootstrap CHEAT SHEET

Related Posts