Bootstrap 5 Input group Buttons with dropdowns

Last Updated : 23 Jul, 2025

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>