Stacks (5.1) are flexbox shorthands: .vstack is a column of full-width items, .hstack a row of vertically centered items only as wide as their content. Space items with .gap-*, push them apart with .ms-auto, and divide them with .vr (Other Helpers).
The z-index utilities .z-n1 and .z-0 to .z-3 (5.3.0) order overlapping elements that have a non-static position. They are deliberately low: Bootstrap 2,007 's own layers run from dropdowns (1000) through sticky (1020), fixed (1030), offcanvas (1045), modal (1055), popover (1070) and tooltip (1080) to toasts (1090).
<link rel=stylesheet href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<style>.avatars > * + * { margin-left: -0.75rem; }</style>
<div class="hstack gap-3 m-3 p-2 border rounded">
<div class="hstack avatars">
<span class="position-relative z-3 badge rounded-pill text-bg-primary border p-3">AL</span>
<span class="position-relative z-2 badge rounded-pill text-bg-success border p-3">BO</span>
<span class="position-relative z-1 badge rounded-pill text-bg-warning border p-3">CY</span>
</div>
<div class="vr"></div>
<strong>3 reviewers</strong>
<button class="btn btn-sm btn-outline-primary ms-auto">Invite</button>
</div>