Button group

Group a series of buttons together on a single line or stack them in a vertical column.

Basic example

Wrap a series of buttons with <xref outputclass="btn-*"> in a <div outputclass="btn-group">

<div outputclass="btn-group">
  <xref outputclass="btn-primary" href="#">Left</xref>
  <xref outputclass="btn-primary" href="#">Middle</xref>
  <xref outputclass="btn-primary" href="#">Right</xref>
</div>

Mixed styles

<div outputclass="btn-group">
  <xref outputclass="btn-danger" href="#">Left</xref>
  <xref outputclass="btn-warning" href="#">Middle</xref>
  <xref outputclass="btn-success" href="#">Right</xref>
</div>

Outlined styles

<div outputclass="btn-group">
  <xref outputclass="btn-outline-primary" href="#">Left</xref>
  <xref outputclass="btn-outline-primary" href="#">Middle</xref>
  <xref outputclass="btn-outline-primary" href="#">Right</xref>
</div>

Button toolbar

Combine sets of button groups into button toolbars for more complex components.

<div outputclass="btn-toolbar">
  <div outputclass="btn-group me-2">
    <xref outputclass="btn-primary" href="#">1</xref>
    <xref outputclass="btn-primary" href="#">2</xref>
    <xref outputclass="btn-primary" href="#">3</xref>
    <xref outputclass="btn-primary" href="#">4</xref>
  </div>
  <div outputclass="btn-group me-2">
    <xref outputclass="btn-secondary" href="#">5</xref>
    <xref outputclass="btn-secondary" href="#">6</xref>
    <xref outputclass="btn-secondary" href="#">7</xref>
  </div>
  <div outputclass="btn-group me-2">
    <xref outputclass="btn-info" href="#">8</xref>
  </div>
</div>

Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally.

<div class="btn-group-vertical">
  ...etc
</div>