Grid

Twelve columns that stack on a phone

Columns

col-12 on a phone; col-md and col-xl from the tablet and the desk up.

xl-3

xl-8

xl-4

Show the code

<div class="row w-100">
<div class="col-12 col-md-6 col-xl-3">
<div class="grid-box">xl-3</div>
</div>
<div class="col-12 col-md-6 col-xl-3">
<div class="grid-box">xl-3</div>
</div>
<div class="col-12 col-md-6 col-xl-3">
<div class="grid-box">xl-3</div>
</div>
<div class="col-12 col-md-6 col-xl-3">
<div class="grid-box">xl-3</div>
</div>
<div class="col-12 col-xl-8">
<div class="grid-box">xl-8</div>
</div>
<div class="col-12 col-xl-4">
<div class="grid-box">xl-4</div>
</div>
</div>

Auto grid

As many columns as fit, each at least a set width.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Show the code

<div class="grid-auto w-100" style="--min: 160px">
<div class="grid-box">Item 1</div>
<div class="grid-box">Item 2</div>
<div class="grid-box">Item 3</div>
<div class="grid-box">Item 4</div>
<div class="grid-box">Item 5</div>
<div class="grid-box">Item 6</div>
</div>