gap-* / flex-wrap
class
gap-* adds spacing between flex items; flex-wrap allows items to wrap to a new line.
Syntax
class="d-flex flex-wrap gap-3"
Example
html
<!-- Card grid with gap -->
<div class="d-flex flex-wrap gap-3">
<div class="card" style="width:200px">Card 1</div>
<div class="card" style="width:200px">Card 2</div>
<div class="card" style="width:200px">Card 3</div>
</div>
<!-- No wrap / wrap reverse -->
<div class="d-flex flex-nowrap">No wrap</div>
<div class="d-flex flex-wrap-reverse">Wrap reverse</div>