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.
<!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.
<!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>
Output:
Reference: https://getbootstrap.com/docs/5.0/forms/input-group/#segmented-buttons
