Flex-box Grid

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve-column system, five default responsive tiers, Sass variables and mixin, and dozens of predefined classes.

How it Works

Breaking it down, here’s how the grid system comes together:

The grid system supports five responsive breakpoints. Breakpoints are based on min-width media queries, meaning they affect that breakpoint and all those above it (e.g., .col-sm-4 applies to sm, md, lg, and xl). This means you can control container and column sizing and behavior by each breakpoint.
Containers center and horizontally pad your content. Use .container a responsive pixel width, .container-fluid for width: 100% across all viewports and devices, or a responsive container (e.g., .container-md) for a combination of fluid and pixel widths.
Rows are wrappers for columns. support modifier classes to uniformly apply column sizing and gutter classes to change the spacing of your content.
Columns are incredibly flexible. There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., col-4 spans four). widths are set in percentages so you always have the same relative sizing.
Gutters are also responsive and customizable. Gutter classes are available across all breakpoints, with all the same sizes as our margin and padding spacing. Change horizontal gutters with .gpx-* classes, vertical gutters with, .gpy-* or all gutters with .gp-* classes. .gp-0 is also available to remove gutters.

Be aware of the limitations and bugs around flexbox, like the inability to use some HTML elements as flex containers.

Example :

here is an example of a grid layout for auto equal columns using container as wrapper and row to contain, pad, layouts auto adaptive three columns across all breakpoints,

<!-- Container -->
<div class="container">
    <!-- Row -->
    <div class="row">
        <!-- Column -->
        <div class="col">Column</div>
        <!-- Column -->
        <div class="col">Column</div>
        <!-- Column -->
        <div class="col">Column</div>
        <!-- // Column -->
    </div>
    <!-- // Row -->
</div>
<!-- // Container -->

Grid options

the grid system can adapt across all five default breakpoints, and any breakpoints you customize. The five default grid tiers are as mentioned and explained in the Responsive section,

As noted above, each of these breakpoints has its container, unique class prefix, and modifiers. Here’s how the grid changes across these breakpoints :

Feature	xSmall	Small	Medium	Large	xLarge
Breakpoint	> 0	> 576	> 768	> 1200	> 1366
Class Prefix	`col-*`	`col-sm-*`	`col-md-*`	`col-lg-*`	`col-xl-*`
# of columns	12 Columns	—–	—–	—–	—–
Gutter width	1.875rem	—–	—–	—–	—–
Custom gutters	Supported	—–	—–	—–	—–
Nestable	Supported	—–	—–	—–	—–
Column ordering	Supported	—–	—–	—–	—–

Note : ( —— ) refer to the same value as the column before.

Auto-layout columns

Utilize breakpoints-specific column classes for easy column sizing without an explicit numbered class like .col-sm-6 For example, here are two grid layouts that apply to every device and viewport, from xs to xl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.