Flexbox Grid

Utility for building flex layout.

Flexbox Grid

Flexbox grid has 12 percentage base column for creating responsive designs using the CSS flexbox module.
Use d-flex display utility to make a row and col-{size} for columns.

col-1

col-11

col-2

col-10

col-3

col-9

col-4

col-8

col-5

col-7

col-6

<div class="d-flex gap-2">
	<div class="col-1 p-2">col-1</div>
	<div class="col-11 p-2">col-11</div>
</div>
<div class="d-flex gap-2">
	<div class="col-2 p-2">col-2</div>
	<div class="col-10 p-2">col-10</div>
</div>
<div class="d-flex gap-2">
	<div class="col-3 p-2">col-3</div>
	<div class="col-9 p-2">col-9</div>
</div>

Gutters

For gutters use gap utilities.

col-6

<div class="d-flex gap-4">
	<div class="col-6 p-2">col-6</div>
	<div class="col-6 p-2">col-6</div>
</div>

Responsive Columns

Use col-{breakpoint}-{property} for responsive variants like col-md-4, col-sm-12.

col-8 col-md-6

col-4 col-md-6

<div class="d-flex gap-4">
	<div class="col-8 col-md-6">col-8 col-md-6</div>
	<div class="col-4 col-md-6 p-2">col-4 col-md-6</div>
</div>

Stack Columns

Use flex utilities along with responsive columns to stack columns at specific breakpoint.
flex-{breakpoint}-column to change flex direction.

col-8 col-md-6 col-sm-12

col-4 col-md-6 col-sm-12


<div class="d-flex flex-sm-column gap-4">
	<div class="col-8 col-md-6 col-sm-12 p-2">col-8 col-md-6 col-sm-12</div>
	<div class="col-4 col-md-6 col-sm-12 p-2">col-8 col-md-6 col-sm-12</div>
</div>