Unlimited Websites Cpanel Hosting Only $0.99 per month - Click here

Grid

Usage

Butter Cake's grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox like Bootstrap css framework and is fully responsive. Check the examples below

Offet classes available { .offset-(1-12) }

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>
        

Responsive 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}
  

We hope you have enjoyed using Butter Cake and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.

Patreon