Bootstrap button sizes examples

April 22, 2022

Hi 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.

Try It Yourself

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.

Try It Yourself

Happy Coding,

I hope the above example with help you to do your task.

Bootstrap button sizes examples

Bootstrap installation

Change button sizes using the bootstrap class

Change button sizes using css

Premium Content

Books

Interview Questions

Portfolio Template

Cheat Sheets

Related Posts