Bootstrap 5 Input group Segmented Buttons
Last Updated :
16 Dec, 2022
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 =
rel = "stylesheet" >
< script src =
</ script >
< script src =
</ 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 =
rel = "stylesheet" >
< script src =
</ script >
< script src =
</ 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
Share your thoughts in the comments
Please Login to comment...