.btn-group joins buttons into one segmented control (inner corners lose their radius); .btn-group-vertical stacks them, .btn-group-lg and .btn-group-sm resize the whole group, and .btn-toolbar lines up several groups. Add role="group" or role="toolbar" with an aria-label so screen readers announce a set. For a segmented choice, hide real radio or checkbox inputs with .btn-check and style their labels as buttons: the form still submits normal values.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel=stylesheet>
<div class="btn-toolbar gap-2 p-3" role="toolbar" aria-label="Text formatting">
<div class="btn-group" role="group" aria-label="Alignment">
<input type="radio" class="btn-check" name="align" id="al" checked>
<label class="btn btn-outline-primary" for="al">Left</label>
<input type="radio" class="btn-check" name="align" id="ac">
<label class="btn btn-outline-primary" for="ac">Center</label>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Style">
<input type="checkbox" class="btn-check" id="b" checked>
<label class="btn btn-outline-dark fw-bold" for="b">B</label>
<input type="checkbox" class="btn-check" id="i">
<label class="btn btn-outline-dark fst-italic" for="i">I</label>
</div>
</div>
Groups can also hold dropdowns (Dropdown), though split dropdowns do not work in vertical groups.