Please note, this is a STATIC archive of website www.tutorialspoint.com from 11 May 2019, cach3.com does not collect or store any user information, there is no "phishing" involved.
Tutorialspoint

Add sizes for Bootstrap Buttons

How to set size for buttons in Bootstrap? I want to create small and large buttons in Bootstrap?


1 Answer
Maheshwari Thakur

To add size for buttons in Bootstrap, try the following classes:

Class
Description
.btn-lg
This makes the button size large.
.btn-sm
This makes the button size small.
.btn-xs
This makes the button size extra small.
.btn-block
This creates block level buttons—those that span the full width of a parent.

You can try to run the following code to create a small button:

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>  
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </head>
   <body>
      <button type = "button" class = "btn btn-default btn-sm">
         Small button
      </button>
   </body>
</html>
Advertisements

We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy.