XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:

Stacks


Vertical

Item in stack Item in stack Item in stack
<div class="vstack">
  <span class="bg-light border p-2">Item in stack</span>
  <span class="bg-light border p-2">Item in stack</span>
  <span class="bg-light border p-2">Item in stack</span>
</div>
<div class="vstack"> <span class="bg-light border p-2">Item in stack</span> <span class="bg-light border p-2">Item in stack</span> <span class="bg-light border p-2">Item in stack</span> </div>

Horizontal

Item in stack
Item in stack
Item in stack
<div class="hstack">
  <div class="bg-light border p-2">Item in stack</div>
  <div class="bg-light border p-2">Item in stack</div>
  <div class="bg-light border p-2">Item in stack</div>
</div>
<div class="hstack"> <div class="bg-light border p-2">Item in stack</div> <div class="bg-light border p-2">Item in stack</div> <div class="bg-light border p-2">Item in stack</div> </div>

Spacers

Gap

Item in stack
Item in stack
Item in stack

Margin

Item in stack
Item in stack
Item in stack
<h4 class="h5 text-muted mt-3">Gap</h4>
<div class="hstack gap-2">
  <div class="bg-light border p-2">Item in stack</div>
  <div class="bg-light border p-2">Item in stack</div>
  <div class="bg-light border p-2">Item in stack</div>
</div>
<h4 class="h5 text-muted mt-3">Margin</h4>
<div class="hstack">
  <div class="bg-light border p-2 me-2">Item in stack</div>
  <div class="bg-light border p-2">Item in stack</div>
  <div class="bg-light border p-2 ms-auto">Item in stack</div>
</div>
<h4 class="h5 text-muted mt-3">Gap</h4> <div class="hstack gap-2"> <div class="bg-light border p-2">Item in stack</div> <div class="bg-light border p-2">Item in stack</div> <div class="bg-light border p-2">Item in stack</div> </div> <h4 class="h5 text-muted mt-3">Margin</h4> <div class="hstack"> <div class="bg-light border p-2 me-2">Item in stack</div> <div class="bg-light border p-2">Item in stack</div> <div class="bg-light border p-2 ms-auto">Item in stack</div> </div>