Bootstrap 5 Button Group Sizing
Bootstrap 5 provides different classes that allow changing button group sizes. Instead of using button sizing classes to every button element in a group, we can just add .btn-group-* class to set the button size in a button group.
Button Group Sizing Classes:
- .btn-group-lg: This class is used to create large-size button groups.
- .btn-group-sm: This class is used to create small-size button groups.
Syntax:
<div class="btn-group btn-group-lg"
role="group" aria-label="...">
...
</div>
Example 1: In this example, we will use button group sizing classes to create button groups in different sizes.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 5 Button Group Sizing</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity= "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> </head> <body style="text-align:center;"> <div class="container mt-3"> <h1 class="text-success"> w3wiki </h1> <h2>Bootstrap 5 Button Group Sizing</h2> <h3>Button Group Large Sizing</h3> <div class="btn-group btn-group-lg" role="group" aria-label="Basic outlined example"> <button type="button" class="btn btn-primary"> Primary </button> <button type="button" class="btn btn-secondary"> Secondary </button> <button type="button" class="btn btn-success"> Success </button> <button type="button" class="btn btn-danger"> Danger </button> <button type="button" class="btn btn-warning"> Warning </button> <button type="button" class="btn btn-info"> Info </button> <button type="button" class="btn btn-light"> Light </button> <button type="button" class="btn btn-dark"> Dark </button> </div> <br><br> <h3>Button Group Medium Sizing</h3> <div class="btn-group" role="group" aria-label="Basic outlined example"> <button type="button" class="btn btn-primary"> Primary </button> <button type="button" class="btn btn-secondary"> Secondary </button> <button type="button" class="btn btn-success"> Success </button> <button type="button" class="btn btn-danger"> Danger </button> <button type="button" class="btn btn-warning"> Warning </button> <button type="button" class="btn btn-info"> Info </button> <button type="button" class="btn btn-light"> Light </button> <button type="button" class="btn btn-dark"> Dark </button> </div> <br><br> <h3>Button Group Small Sizing</h3> <div class="btn-group btn-group-sm" role="group" aria-label="Basic outlined example"> <button type="button" class="btn btn-primary"> Primary </button> <button type="button" class="btn btn-secondary"> Secondary </button> <button type="button" class="btn btn-success"> Success </button> <button type="button" class="btn btn-danger"> Danger </button> <button type="button" class="btn btn-warning"> Warning </button> <button type="button" class="btn btn-info"> Info </button> <button type="button" class="btn btn-light"> Light </button> <button type="button" class="btn btn-dark"> Dark </button> </div> </div> </body> </html> |
Output:
Example 2: In this example, we will use button group sizing classes to create button groups in different sizes with font awesome icons.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 5 Button Group Sizing</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body style="text-align:center;"> <div class="container mt-3"> <h1 class="text-success"> w3wiki </h1> <h2>Bootstrap 5 Button Group Sizing</h2> <h3>Button Group Large</h3> <div class="btn-group btn-group-lg" role="group" aria-label="Basic outlined example"> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-home"></i> </button> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-code"></i> </button> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-folder"></i> </button> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-file"></i> </button> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-filter"></i> </button> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-barcode"></i> </button> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-bug"></i> </button> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-gears"></i> </button> </div> <br><br> <h3>Button Group Medium</h3> <div class="btn-group" role="group" aria-label="Basic outlined example"> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-home"></i> </button> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-code"></i> </button> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-folder"></i> </button> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-file"></i> </button> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-filter"></i> </button> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-barcode"></i> </button> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-bug"></i> </button> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-gears"></i> </button> </div> <br><br> <h3>Button Group Small</h3> <div class="btn-group btn-group-sm" role="group" aria-label="Basic outlined example"> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-home"></i> </button> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-code"></i> </button> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-folder"></i> </button> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-file"></i> </button> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-filter"></i> </button> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-barcode"></i> </button> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-bug"></i> </button> <button type="button" class="btn btn-outline-primary"> <i class="fa fa-gears"></i> </button> </div> </div> </body> </html> |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/button-group/#sizing
Contact Us