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

<button type="button" class="btn btn-secondary">Middle</button>

<button type="button" class="btn btn-success">Right</button>

</div>

Try it yourself

Vertical Button Group:

To stack buttons vertically, use the btn-group-vertical class:

Example

<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>

Try it yourself

Sizing Button Groups:

You can create small or large button groups by adding .btn-group-sm or .btn-group-lg.

Example

<button type="button" class="btn btn-primary">Middle</button>

<button type="button" class="btn btn-primary">Right</button>

</div>

<button type="button" class="btn btn-success">Middle</button>

<button type="button" class="btn btn-success">Right</button>

</div>

<button type="button" class="btn btn-success">Middle</button>

<button type="button" class="btn btn-success">Right</button>

</div>

Try it yourself

Justified Button Groups:

To make buttons stretch to fill the width of their parent, use utilities like d-flex and w-100.

Example

<button type="button" class="btn btn-dark w-100">Middle</button>

<button type="button" class="btn btn-dark w-100">Right</button>

</div>

Try it yourself

Disabled Buttons in Groups:

You can disable buttons individually in a group by adding the disabled attribute.

Example

<button type="button" class="btn btn-danger">Enabled</button>

<button type="button" class="btn btn-danger" disabled>Disabled</button>

</div>

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.