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!!

Page Content