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>