grids
Butter Cake's grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Check the examples below
Offet classes available
{ .offset-(1-12) }
Examples
Sample 12 Column Grid.
col-1
col-2
col-3
col-4
col-5
col-6
col-7
col-8
col-9
col-10
col-11
col-12
Grid Table
You can easily customize grid breakpoints inside src/vars/variable.scss
See how aspects of the Butter Cake grid system work across multiple devices with a handy table.
|
Extra small <590px |
Small ≥590px |
Medium ≥790px |
Large ≥1160px |
Extra large ≥1260px |
|
|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| # of columns | 12 | ||||
| Gutter width | 20px (10px on each side of a column) | ||||
| Nestable | Yes | ||||
Auto Grid
Auto Column, use .column class.
One of three columns
One of three columns
One of three columns
<div class="row">
<div class="column">
One of three columns
</div>
<div class="column">
One of three columns
</div>
<div class="column">
One of three columns
</div>
</div>Respnosive Classes
.d-none-{ sm | md | lg | xl }
.hide-{ sm | md | lg | xl }
.d-block-{ sm | md | lg | xl }
.d-inline-block-{ sm | md | lg | xl }
.d-flex-{ sm | md | lg | xl }
.fa-center-{ sm | md | lg | xl }
.fa-baseline-{ sm | md | lg | xl }
.fa-start-{ sm | md | lg | xl }
.fa-end-{ sm | md | lg | xl }
.fa-stretch-{ sm | md | lg | xl }
.fa-end-{ sm | md | lg | xl }
.fj-center-{ sm | md | lg | xl }
.fj-baseline-{ sm | md | lg | xl }
.fj-start-{ sm | md | lg | xl }
.fj-end-{ sm | md | lg | xl }
.fj-between-{ sm | md | lg | xl }
.fj-around-{ sm | md | lg | xl }
<!-- ORDER -->
.order-{ sm | md | lg | xl }-{1 - 10}Feel free to Report any typo, any bug or request new Feature, you are always Welcome!!