Bootstrap 5 Button Group Buttons toolbar
Last Updated :
17 Nov, 2022
Button Group Buttons toolbar components are used to create a toolbar of Button groups. It combines the sets of buttons in a group of button toolbars for complex components.
Pre-requisite: Bootstrap 5 Button Group to create a group of buttons.
Button Group Buttons toolbar Class:
- btn-toolbar: This class is used to give the Button group a toolbar look.
Syntax:
<div class="btn-toolbar" >
<div class="btn-group ..." >
<button type="button" class="...">....</button>
....
</div>
Below example illustrate the Button Group Buttons toolbar:
Example 1: In this example, we will create a single Button Group Toolbar. We used a border so you can distinguish the buttons.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" />
< title >Bootstrap 5 Button Group Buttons Toolbar</ title >
</ head >
< body >
< center >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< strong >Bootstrap 5 Button Group BUttons Toolbar</ strong >
< div class = "btn-toolbar m-3" >
< div class = "btn-group" >
< button type = "button" class = "btn border-primary" >
Button 1
</ button >
< button type = "button" class = "btn border-primary" >
Button 2
</ button >
< button type = "button" class = "btn border-primary" >
Button 3
</ button >
< button type = "button" class = "btn border-primary" >
Button 4
</ button >
</ div >
</ div >
</ center >
</ body >
</ html >
|
Output:
Bootstrap 5 Button Group Buttons toolbar
Example 2: In this example, we will create multiple Button Group Toolbars. We used background colors and border colors on another button group toolbar so you can differentiate the buttons.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" />
< title >Bootstrap 5 Button Group Buttons Toolbar</ title >
</ head >
< body >
< center >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< strong >Bootstrap 5 Button Group BUttons Toolbar</ strong >
< div class = "btn-toolbar m-3" >
< div class = "btn-group me-2" >
< button type = "button" class = "btn bg-primary" >
Button 1
</ button >
< button type = "button" class = "btn bg-info" >
Button 2
</ button >
< button type = "button" class = "btn bg-danger" >
Button 3
</ button >
< button type = "button" class = "btn bg-warning" >
Button 4
</ button >
< button type = "button" class = "btn bg-success" >
Button 5
</ button >
</ div >
< div class = "btn-group me-2" >
< button type = "button" class = "border-success btn bg-info" >
Button 1
</ button >
< button type = "button" class = "border-success btn bg-info" >
Button 2
</ button >
< button type = "button" class = "border-success btn bg-info" >
Button 3
</ button >
</ div >
</ div >
</ center >
</ body >
</ html >
|
Output:
Bootstrap 5 Button Group Buttons toolbar
Reference: https://getbootstrap.com/docs/5.0/components/button-group/#button-toolbar
Share your thoughts in the comments
Please Login to comment...