Open In App

Bootstrap 5 Dropdowns Split Button

Last Updated : 09 Jan, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Dropdowns split button is used to turn a button into a dropdown toggle with some basic markup. A dropdown button lets the user select from a number of items. 

Bootstrap 5  Dropdowns split button class:

  • dropdown-toggle-split: This class is used for proper spacing around the dropdown caret icon or symbol.

Syntax:

<div class="btn-group">   
    <button type="button" class="btn dropdown-toggle dropdown-toggle-split" 
            data-bs-toggle="dropdown">
            <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">....</a></li>
        ...
    </ul>
</div>

Example 1: In this example, we set a button using .btn class with dropdown toggle on the right side of the button and used .dropdown-toggle-split for proper spacing around the dropdown.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Bootstrap 5-GeeksforGeeks </title>
  
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
        rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
    </script>
</head>
  
<body class="m-3">
    <div class="container text-center">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h5>Bootstrap 5 Dropdowns Split button</h5>
    </div>
    <div class="p-3 border bg-light" style="height:120px;">
        <div class="btn-group">
            <button type="button" class="btn btn-success">
                Action
            </button>
            <button type="button" class="btn btn-secondary 
                    dropdown-toggle dropdown-toggle-split"
                    data-bs-toggle="dropdown">
                <span class="visually-hidden">
                    Toggle Dropdown
                </span>
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">
                    Option</a>
                </li>
                <li><a class="dropdown-item" href="#">
                    Other option</a>
                </li>
                <li><a class="dropdown-item" href="#">
                    Something related to the option</a>
                </li>
            </ul>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-primary">
                Action</button>
            <button type="button" class="btn btn-dark 
                dropdown-toggle dropdown-toggle-split" 
                data-bs-toggle="dropdown">
                <span class="visually-hidden">
                    Toggle Dropdown
                </span>
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">
                    Option</a></li>
                <li><a class="dropdown-item" href="#">
                    Other option</a></li>
                <li><a class="dropdown-item" href="#">
                    Something related to the option</a>
                </li>
            </ul>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-warning">
                Action</button>
            <button type="button" class="btn btn-danger 
                dropdown-toggle dropdown-toggle-split"
                data-bs-toggle="dropdown">
                <span class="visually-hidden">
                    Toggle Dropdown
                </span>
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">
                    Option</a></li>
                <li><a class="dropdown-item" href="#">
                    Other option</a></li>
                <li><a class="dropdown-item" href="#">
                    Something related to the option</a></li>
            </ul>
        </div>
    </div>
</body>
</html>
 






                        










Output:


Bootstrap 5  Dropdowns Split Button
Bootstrap 5  Dropdowns Split Button


Example 2: In this example, we set a button using .btn class with dropdown toggle on the left side of the button and we use .dropdown-toggle-split for proper spacing around the dropdown.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html lang="en"> 


  


<head> 


    <meta charset="UTF-8"> 


    <meta http-equiv="X-UA-Compatible" 


        content="IE=edge"> 


    <meta name="viewport" content= 


"width=device-width, initial-scale=1.0"> 


    <title>Bootstrap 5-GeeksforGeeks </title> 


  


    <link href= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 


        rel="stylesheet"> 


    <script src= 


"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"> 


    </script> 


    <script src= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"> 


    </script> 


</head> 


  


<body class="m-3"> 


    <div class="container text-center"> 


        <h1 class="text-success">GeeksforGeeks</h1> 


        <h5>Bootstrap 5 Dropdowns Split button</h5> 


    </div> 


    <div class="p-3 border bg-light" style="height:120px;"> 


        <div class="btn-group dropend"> 


            <button type="button" class="btn btn-primary  


                dropdown-toggle dropdown-toggle-split" 


                data-bs-toggle="dropdown"> 


                <button type="button" class="btn btn-secondary"> 


                    Action 


                </button> 


                <span class="visually-hidden"> 


                    Toggle Dropdown</span> 


            </button> 


            <ul class="dropdown-menu"> 


                <li><a class="dropdown-item" href="#"> 


                    Option</a></li> 


                <li><a class="dropdown-item" href="#"> 


                    Other option</a></li> 


                <li><a class="dropdown-item" href="#"> 


                    Something related to the option</a> 


                </li> 


            </ul> 


        </div> 


        <div class="btn-group dropend"> 


            <button type="button" class="btn btn-info  


                dropdown-toggle dropdown-toggle-split"  


                data-bs-toggle="dropdown"> 


                <span class="visually-hidden"> 


                    Toggle Dropdown</span> 


                <button type="button" class="btn btn-danger"> 


                    Action</button> 


            </button> 


            <ul class="dropdown-menu"> 


                <li><a class="dropdown-item" href="#"> 


                    Option</a></li> 


                <li><a class="dropdown-item" href="#"> 


                    Other option</a></li> 


                <li><a class="dropdown-item" href="#"> 


                    Something related to the option</a> 


                </li> 


            </ul> 


        </div> 


        <div class="btn-group dropend"> 


            <button type="button" class="btn btn-dark  


                dropdown-toggle dropdown-toggle-split"  


                data-bs-toggle="dropdown"> 


                <button type="button" class="btn btn-warning"> 


                    Action</button> 


                <span class="visually-hidden"> 


                    Toggle Dropdown</span> 


            </button> 


            <ul class="dropdown-menu"> 


                <li><a class="dropdown-item" href="#"> 


                    Option</a></li> 


                <li><a class="dropdown-item" href="#"> 


                    Other option</a></li> 


                <li><a class="dropdown-item" href="#"> 


                    Something related to the option</a></li> 


            </ul> 


        </div> 


    </div> 


</body> 


  


</html>



















                        







                        










Output:


Bootstrap 5  Dropdowns Split Button
Bootstrap 5  Dropdowns Split Button


Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#split-button


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bootstrap 5 Dropdowns Single Button
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bootstrap 5 Dropdowns Sizing
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bootstrap 5 Dropdowns Dark dropdowns
            

        
    
        
            

                Bootstrap 5 Dropdowns Single Button
            

        
    
        
            

                Bootstrap DropDowns and Responsive Tabs
            

        
    
        
            

                Bootstrap 4 | Dropdowns
            

        
    
        
            

                Bootstrap 5 Dropdowns
            

        
    
        
            

                Pills with Dropdowns in Bootstrap
            

        
    
        
            

                Bootstrap 5 Dropdowns Dropleft
            

        
    
        
            

                Bootstrap 5 Dropdowns Menu items
            

        
    
        
            

                Bootstrap 5 Dropdowns Alignment options
            

        
    
        
            

                Bootstrap 5 Dropdowns Responsive alignment
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
B

        

            
        

        

                                    


                                    

                                        bulbultomar                                

                            

                            

            
                                

                            

                                                                    

                                        
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