Button group is two or more two button together in a sequence. In this chapter different classes for groups buttons are explained.
Buttons group
In this example bootstrap class btn-group is used.
There are four other buttons inside. This makes a group of buttons.
<divclass="btn-group"><buttontype="button"class="btn btn-primary">Primary button</button><buttontype="button"class="btn btn-secondary">Secondary button</button><buttontype="button"class="btn btn-success">Success button</button><buttontype="button"class="btn btn-info">Info button</button></div>
Output of above code
Button Sizes
In this example size of the button is specified for all
the buttons in the group. There two classes are used,
btn-group-lg and btn-group-sm.
<divclass="btn-group"><buttontype="button"class="btn btn-primary">Primary</button><buttontype="button"class="btn btn-success">Success</button><buttontype="button"class="btn btn-info">Info</button></div>Default size groups
<divclass="btn-group btn-group-lg"><buttontype="button"class="btn btn-primary">Primary</button><buttontype="button"class="btn btn-success">Success</button><buttontype="button"class="btn btn-info">Info</button></div>Large size groups
<divclass="btn-group btn-group-sm"><buttontype="button"class="btn btn-primary">Primary</button><buttontype="button"class="btn btn-success">Success</button><buttontype="button"class="btn btn-info">Info</button></div>Small size groups
Default size groups
Large size groups
Small size groups
Drowpdown in grouped buttons
In this group of buttons a drowpdown menu is added
in a button. drowpdown-toggle class is added
in the info button and drowndown menu is declared below.
<divclass="btn-group"><buttontype="button"class="btn btn-primary">Primary</button><buttontype="button"class="btn btn-success">Success</button><divclass="btn-group"><buttontype="button"class="btn btn-info dropdown-toggle"data-toggle="dropdown">Info</button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Info 1</a><aclass="dropdown-item"href="#">Info 2</a><aclass="dropdown-item"href="#">Info 3</a></div></div></div>
Output of above code
Vertical group of buttons
In this example btn-group-vertical class is used
make a vertical group of buttons.
<divclass="btn-group-vertical"><buttontype="button"class="btn btn-primary">Primary</button><buttontype="button"class="btn btn-secondary">Secondary</button><buttontype="button"class="btn btn-success">Success</button><buttontype="button"class="btn btn-info">Info</button></div>
Output of above code
Dropdown menu in vertical group
In this example btn-group-vertical class is used to
make a vertical group of button and a drowpdown is added in info
button.
<divclass="btn-group-vertical"><buttontype="button"class="btn btn-primary">Primary</button><buttontype="button"class="btn btn-success">Success</button><divclass="btn-group"><buttontype="button"class="btn btn-info dropdown-toggle"data-toggle="dropdown">Info</button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Info 1</a><aclass="dropdown-item"href="#">Info 2</a><aclass="dropdown-item"href="#">Info 3</a></div></div></div>
Output of above code
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
