Advertisement
Google Ad Slot: content-top
Bootstrap 5 Button Group
Bootstrap 5 provides a button group component, which allows you to group a series of buttons together on a single line for compact user interfaces.
btn-group: Wraps the group of buttons.btn: Styles the buttons within the group.
Example
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div>
Vertical Button Group:
To stack buttons vertically, use the btn-group-vertical class:
Example
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-secondary">Button 1</button>
<button type="button" class="btn btn-secondary">Button 2</button>
<button type="button" class="btn btn-secondary">Button 3</button>
</div>
Sizing Button Groups:
You can create small or large button groups by adding .btn-group-sm or .btn-group-lg.
Example
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<div class="btn-group btn-group" role="group" aria-label="Small button group">
<button type="button" class="btn btn-success">Left</button>
<button type="button" class="btn btn-success">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
<button type="button" class="btn btn-success">Left</button>
<button type="button" class="btn btn-success">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div>
Justified Button Groups:
To make buttons stretch to fill the width of their parent, use utilities like d-flex and w-100.
Example
<div class="btn-group d-flex" role="group" aria-label="Justified button group">
<button type="button" class="btn btn-dark w-100">Left</button>
<button type="button" class="btn btn-dark w-100">Middle</button>
<button type="button" class="btn btn-dark w-100">Right</button>
</div>
Disabled Buttons in Groups:
You can disable buttons individually in a group by adding the disabled attribute.
Example
<div class="btn-group" role="group" aria-label="Disabled button group">
<button type="button" class="btn btn-danger">Enabled</button>
<button type="button" class="btn btn-danger" disabled>Disabled</button>
</div>