Bootstrap button sizes examples

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

  1. Bootstrap installation
  2. Change button sizes using the bootstrap class
  3. 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.

bootstrap, button size 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.

bootstrap, button size 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.

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts