- ☀️Light
- 🌙Dark
- 💻System
📐 What are columns used for?
Columns are used to build responsive layouts inside a
.row container.
The grid is based on 12 virtual columns and each
.col-* class defines how much horizontal space
a column takes. On small screens, columns stack vertically by default, and spread side by side
as the viewport gets larger.
💠 Examples
The grid uses a 12-column system. Each fixed column class
(.col-1 to
.col-12)
represents a fraction of the row width. Responsive variants such as
.col-6-md or
.col-4-xs
become active at their corresponding breakpoints.
.col-12 .col-6-md
.col-12 .col-6-md
.col-12 .col-4-md
.col-12 .col-4-md
.col-12 .col-4-md
.col-12 .col-3-md
.col-12 .col-6-md
.col-12 .col-3-md
💻 HTML Code
Column 1
Column 2
Column A
Column B
Column C
Sidebar
Content
Sidebar
Fluid column
Fluid column
📏 Column Sizes & Breakpoints
The grid is based on 12 columns. You can use:
.col for fluid columns,
.col-{number} for fixed spans of the 12-column grid,
and
.col-{number}-{breakpoint}
to change the column width from a specific breakpoint.
By default, any element inside
.row
with a class starting with
col-
is full-width on very small screens, then behaves as a grid column when its size classes become
active.
.col
Fluid column that automatically shares the available space with other
.col siblings in the same row.
.col-{number}
Fixed column width based on the 12-column grid
(for example:
.col-6 = 6/12 = 50%,
.col-4 = 4/12 ≈ 33.3%).
.col-{number}-{breakpoint}
Responsive column that applies its width only from the given breakpoint
(for example:
.col-6-md =
full-width on small screens, 6/12 from the md breakpoint).
⚙️ Column Variables
These variables control spacing and padding inside the grid system. They keep columns aligned and consistent across all breakpoints.
| Variable | Description |
|---|---|
--col-padding |
Internal horizontal padding applied to each column inside
.row.
|