Open In App

Bootstrap 5 Button Group Sizing

Last Updated : 06 Nov, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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


            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


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bootstrap 5 Button Group Sizing
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bootstrap 5 Button group Vertical variation
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Foundation CSS Button Group Sizing
            

        
    
        
            

                Bootstrap 5 Input group Sizing
            

        
    
        
            

                Foundation CSS Button Sizing
            

        
    
        
            

                Bootstrap | Sizing an element with Examples
            

        
    
        
            

                Bootstrap 5 Form Controls Sizing
            

        
    
        
            

                Bootstrap 5 Cards Sizing using custom CSS
            

        
    
        
            

                Bootstrap 5 Layout Column sizing
            

        
    
        
            

                Bootstrap 5 Layout Horizontal form label sizing
            

        
    
        
            

                Bootstrap 5 Select Sizing
            

        
    
        
            

                Bootstrap 5 Cards Sizing using Utilities
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
V

        

            
        

        

                                    


                                    

                                        vkash8574                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox