Bootstrap button sizes examples
April 22, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
To change button size in bootstrap, you can use the btn-lg
, btn-sm
, and btn-xs
class or you can use padding
and font-size
css style it all help you to change the size of the bootstrap button and work in all bootstrap versions 1, 2, 3, 4, 5.
Here is a short example of a change bootstrap button using bootstrap classes.
<button class="btn btn-success btn-lg">
aGuideHub
</button>
For custom size button tip: make padding half of your button font size for example.
.btn-custom {
padding: 10px;
font-size: 20px;
}
In this article, we will see
- Bootstrap installation
- Change button sizes using the bootstrap class
- Change bootstrap button sizes using css
Let’s start today’s tutorial How to change bootstrap button sizes
Bootstrap installation
First, add the below meta tag in your html file in the head tag for proper responsive behavior on mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1">
Add below CSS link in your head tag to install the bootstrap 5 library
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
and javascript scripts in your body tag.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
Put the below javascript scripts in your body tag if you planning to use dropdowns, popovers, or tooltips in your project.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
Change button sizes using the bootstrap class
Here, we will use the bootstrap class to change the size of the bootstrap button.
- The
btn-lg
class to make the button large size. - The
btn-sm
class to make the button small size. - The
btn-xs
class to make the button extra small size.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
<title>Buttons</title>
</head>
<body>
<h3>Bootstrap sizes examples</h3>
<button type="button" class="btn btn-success btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-warning btn-sm">Small</button>
<button type="button" class="btn btn-danger btn-xs">XSmall</button>
<!-- Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
The output of the above program of bootstrap buttons changes size using class.
Here, we are provided code sandbox links for the above program for the bootstrap button sizes examples. Then you can use it whenever you want and do the changes as per your requirements.
Change button sizes using css
Here, we will use css to change the size of the bootstrap button.
- The
padding
css will help to change the space between button text and button border. - The
font-size
css will help to change the size of the button text.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
<title>Buttons</title>
<style>
.btn-custom {
padding: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<h3>Bootstrap custom size example</h3>
<button type="button" class="btn btn-success btn-custom">Custom</button>
<!-- Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
The output of the above program of bootstrap buttons changes size using css.
Here, we are provided code sandbox links for the above program for the bootstrap button sizes examples. Then you can use it whenever you want and do the changes as per your requirements.
Happy Coding,
I hope the above example with help you to do your task.