Open In App

Bootstrap 5 Input group Buttons with dropdowns

Last Updated : 29 Dec, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Input group Buttons with dropdowns is used to display a button along with an input group. On Clicking this button, it gives a dropdown menu.

Input group Buttons with dropdowns Classes: No special classes are used in Input group Buttons with dropdowns. You can customize the component using input group and dropdown classes.

Syntax:

<div class="input-group">
     <button class="btn dropdown-toggle" type="button" 
             data-bs-toggle="dropdown">
         ...    
     </button>
     <ul class="dropdown-menu">
           ...
     </ul>
     ...
</div>

Example 1: In this example, we will learn about Buttons with dropdowns to the left and right also.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Bootstrap CDN -->
    <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>
    <div class="container">
        <h1 class="text-success">
          GeeksforGeeks
        </h1>
        <h2> Input group Buttons with dropdowns</h2>
        <div class="input-group mb-3">
            <button class="btn btn-success dropdown-toggle" 
                    type="button" data-bs-toggle="dropdown">
                    Dropdown
            </button>
            <ul class="dropdown-menu">
                <li>
                    <a class="dropdown-item" href="#">
                        A
                    </a>
                </li>
                <li>
                    <a class="dropdown-item" href="#">
                        B
                    </a>
                </li>
                <li>
                    <a class="dropdown-item" href="#">
                        C
                    </a>
                </li>
            </ul>
            <input type="text" class="form-control" 
                    placeholder="Dropdown Button">
        </div>
  
        <div class="input-group ">
            <input type="text" class="form-control" 
                    placeholder="Dropdown Button Right">
            <button class="btn btn-success dropdown-toggle" 
                    type="button" data-bs-toggle="dropdown">
                    Dropdown
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
                <li>
                    <a class="dropdown-item" href="#">
                        A
                    </a>
                </li>
                <li>
                    <a class="dropdown-item" href="#">
                        B
                    </a>
                </li>
                <li>
                    <a class="dropdown-item" href="#">
                        C
                    </a>
                </li>
            </ul>
        </div>
    </div>  
</body>
  
</html>
 






                        










Output:


 


Example 2: In this example, we will learn about buttons with dropdowns to the left and right both together.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


    <!-- Bootstrap CDN -->


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


    <div class="container"> 


        <h1 class="text-success"> 


          GeeksforGeeks 


        </h1> 


        <h2> Input group Buttons with dropdowns</h2> 


        <div class="input-group"> 


            <button class="btn btn-success dropdown-toggle" 


                    type="button" data-bs-toggle="dropdown"> 


                    Left Dropdown 


            </button> 


            <ul class="dropdown-menu"> 


                <li> 


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


                        A 


                    </a> 


                </li> 


                <li> 


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


                        B 


                    </a> 


                </li> 


                <li> 


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


                        C 


                    </a> 


                </li> 


            </ul> 


            <input type="text" class="form-control" 


                    aria-label= 


                "Text input with 2 dropdown buttons"> 


            <button class="btn btn-success dropdown-toggle" 


                    type="button" data-bs-toggle="dropdown"> 


                    Right Dropdown 


            </button> 


            <ul class="dropdown-menu dropdown-menu-end"> 


                <li> 


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


                        A 


                    </a> 


                </li> 


                <li> 


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


                        B 


                    </a> 


                </li> 


                <li> 


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


                        C 


                    </a> 


                </li> 


            </ul> 


        </div> 


    </div>  


</body> 


</html>



















                        







                        










Output:


 


References: https://getbootstrap.com/docs/5.0/forms/input-group/#buttons-with-dropdowns


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bootstrap 5 Input group Buttons with dropdowns
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bootstrap 5 Input group Custom forms
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bootstrap 5 Dropdowns Dark dropdowns
            

        
    
        
            

                Bootstrap 5 Input group Segmented Buttons
            

        
    
        
            

                Bootstrap 5 Buttons Block buttons
            

        
    
        
            

                Blaze UI Input Group Buttons
            

        
    
        
            

                Bootstrap 5 Input group Custom file input
            

        
    
        
            

                Bootstrap 5 List group Links and buttons
            

        
    
        
            

                Bootstrap 5 Button Group Buttons toolbar
            

        
    
        
            

                Bootstrap DropDowns and Responsive Tabs
            

        
    
        
            

                Bootstrap 4 | Dropdowns
            

        
    
        
            

                Bootstrap 5 Dropdowns
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
A

        

            
        

        

                                    


                                    

                                        akshitsaxena2                                

                            

                            

            
                                

                            

                                                                    

                                        
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