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
|
1 2 3 4 |
<button type="button" class="btn btn-primary btn-lg">Primary</button> <button type="button" class="btn btn-primary btn-md">Primary</button> <button type="button" class="btn btn-primary btn-sm">Primary</button> <button type="button" class="btn btn-primary btn-xs">Primary</button> |
Output
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
|
1 |
<button type="button" class="btn btn-primary btn-block">Primary</button> |
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