Bootstrap 5 Button Group Sizing – GeeksforGeeks

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/[email protected]/dist/css/bootstrap.min.css" 

        rel="stylesheet" integrity=

        "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 

        crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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">

            GeeksforGeeks

        </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/[email protected]/dist/css/bootstrap.min.css" 

        rel="stylesheet"

        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 

        crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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">

            GeeksforGeeks

        </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

My Personal Notes

arrow_drop_up

Alternate Text Gọi ngay