Bootstrap 5 Button Group
Learn button group-related classes in bootstrap 5. It is used to style the group button.
Types of btn group classes
btn-group
- It removes space between the elements.
- It removes the top right and bottom right rounded corners from all the buttons except for the last button in the group.
- It removes the top left and bottom left rounded corners from all the buttons except the first button in the group.
- It keeps the buttons horizontally in the group etc.
Example:
<div class="btn-group" role="group">
<input type="submit" class="btn btn=primary">
<input type="submit" class="btn btn=primary">
<input type="submit" class="btn btn=primary">
</div>
Output:
btn-group-vertical
- It removes space between the elements.
- It removes the bottom left and bottom right rounded corners from all the buttons except the last button in the group,
- It removes the top left and top right rounded corners from all the buttons except the first button in the group.
- It keeps the buttons vertically in the group etc.
Example:
<div class="btn-group-vertical" role="group">
<input type="submit" class="btn btn=primary">
<input type="submit" class="btn btn=primary">
<input type="submit" class="btn btn=primary">
</div>
Output:
btn-group-lg
It displays buttons a little bit larger than the normal size
Example:
<div class="btn-group-lg" role="group">
<input type="submit" class="btn btn=primary">
<input type="submit" class="btn btn=primary">
<input type="submit" class="btn btn=primary">
</div>