Bootstrap 5 Input group Segmented Buttons

Last Updated : 29 Jul, 2024

Bootstrap 5 Input group Segmented buttons used to segment dropdowns in input groups, use the same general style as the dropdown button.

Bootstrap 5 Input group Segmented buttons used classes: There is no specific class used to group Segmented buttons. To create a button, we use the .btn class, and to create a dropdown-menu, we use the .dropdown-menu class.

Syntax:

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

Example 1: In this example illustrates how to show segments with a dropdown menu on the left side of the text input.

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"> <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> <div class="container text-center "> <div class="mt-4"> <h1 class="text-success"> GeeksforGeeks </h1> <h5> Bootstrap 5 Input group Segmented buttons </h5> </div> <div class="input-group mt-4"> <button class="btn btn-success"> Course </button> <button type="button" class="btn btn-outline-danger   dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"> </button> <ul class="dropdown-menu"> <li> <a class="dropdown-item"> Btech computer science </a> </li> <li> <a class="dropdown-item"> Btech mechanical </a> </li> <li> <a class="dropdown-item"> Btech civil </a> </li> <li> <a class="dropdown-item"> other course </a> </li> </ul> <input type="text" class="form-control" placeholder="Enter course"> </div> </div> </body> </html>

Output:

Example 2: In this example illustrates how to show segments with a dropdown menu on the right side of the text input.

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"> <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> <div class="container text-center"> <div class="mt-3"> <h1 class="text-success"> GeeksforGeeks </h1> <h5> Bootstrap 5 Input group Segmented buttons </h5> </div> <div class="input-group mt-4 "> <input type="text" class="form-control" placeholder="Enter course"> <button class="btn btn-success"> Course </button> <button type="button" class="btn btn-outline-danger dropdown-toggle   dropdown-toggle-split" data-bs-toggle="dropdown"> </button> <ul class="dropdown-menu dropdown-menu-end"> <li> <a class="dropdown-item"> Btech computer science </a> </li> <li> <a class="dropdown-item"> Btech mechanical </a> </li> <li> <a class="dropdown-item"> Btech civil </a> </li> <li> <a class="dropdown-item"> other course </a> </li> </ul> </div> </div> </body> </html>