Grid System

Overview

The grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive.

Variables: $grid-columns: 12, $grid-gap: 1rem

Container

Containers are used to contain, pad, and center the content within them. The library provides two container classes.

.container

.container-fluid

Row and Columns

Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them.

.row

.col-3

.col-6

.col-12

Responsive Breakpoints

The grid includes five tiers of predefined classes for building complex responsive layouts.

Breakpoints: sm: 576px, md: 768px, lg: 992px, xl: 1200px

.col-12 .col-md-6 .col-lg-4

Offset and Order

Move columns to the right using offset classes. These classes increase the left margin of a column by a specified number of columns. Change the visual order of columns with order classes.

.col-4 .offset-3

.col-4 .order-2

.col-4 .order-1