Utilities

Butter Cake include 100+ helper classes

Navbar

  • .fixed-top
  • .expand-sm
  • .expand-md
  • .expand-lg
  • .expand-xl
  • .bg-primary

Grid - Classes

12 column grid
  • .row - main container
  • .column - auto column
  • .col-md-(x)
  • .col-lg-(x)
  • .col-xl-(x)
  • .offset-(x) - Offset from left
  • .order- { sm | md | lg | xl } -{1 - 10}

Wrappers

  • .container
  • .container-fluid

Display Property

  • .d-none { sm | md | lg | xl }
  • .d-block { sm | md | lg | xl }
  • .d-inline { sm | md | lg | xl }
  • .d-inline-block { sm | md | lg | xl }
  • .d-flex or .flex { sm | md | lg | xl }

Background Color

  • .bg-primary
  • .bg-secondary
  • .bg-dark
  • .bg-light
  • .bg-white
  • .bg-success
  • .bg-danger
  • .bg-warning
  • .bg-gray
  • .bg-muted
  • .bg-none

Text Color

  • .text-primary
  • .text-secondary
  • .text-dark
  • .text-light
  • .text-white
  • .text-success
  • .text-warning
  • .text-danger
  • .text-gray
  • .text-muted

Button

  • .btn .primary
  • .btn .secondary
  • .btn .gray
  • .btn .success
  • .btn .warning
  • .btn .danger
  • .btn .dark
  • .btn .light
  • .btn .white

  • .rounded (rounded)
  • .outline (outline)

Padding

.p-xx-{ sm | md | lg | xl }
  • .px-0 (left & right)
  • .py-0 (top & bottom)
  • p-0 to p-10 ( 0 - 100px (xy) )
  • pt-0 to pt-10 ( 0 - 100px (padding top))
  • pb-0 to pb-10 ( 0 - 100px (padding bottom) )
  • pl-0 to pl-10 ( 0 - 100px (padding left) )
  • pr-0 to pr-10 ( 0 - 100px (padding right) )

Margin

.m-xx-{ sm | md | lg | xl }
  • .mx-0 (top & bottom)
  • .my-0 (left & right)
  • .mx-auto ( margin: 0 auto)
  • .ml-auto ( margin-left: auto)
  • .mr-auto ( margin-right: auto)
  • .m-0 to m-10 ( 0 - 100px (xy) )
  • .mt-0 to mt-10 ( 0 - 100px (margin top) )
  • .mb-0 to mb-10 ( 0 - 100px (margin bottom) )
  • .ml-0 to ml-10 ( 0 - 100px (margin left) )
  • .mr-0 to mr-10 ( 0 - 100px (margin right) )

Width & Height

  • .w-100 (width: 100%)
  • .h-100 (height: 100%)

Normal Image

img tag

  • .img-fluid
  • .img-rounded
  • .img-circle - border-radius: 50%
  • .img-cover
  • .img-contain

Background Image

  • .bg-cover
  • .bg-contain
  • .bg-fixed

List

  • .list-unstyled

Shadow

  • .shadow - shadow with hover effect
  • .shadow-1 - shadow with hover effect

Border Radius

  • .radius-none

Border

  • .b-none - border none
  • .bt-none - border top none
  • .bb-none - border bottom none
  • .bl-none - border left none
  • .br-none - border right none

Text Helper

  • .text-center { sm | md | lg | xl }
  • .text-left { sm | md | lg | xl }
  • .text-right { sm | md | lg | xl }
  • .capitalize
  • .uppercase
  • .lowercase

Font Weight

  • .font-normal { sm | md | lg | xl }
  • .font-bold { sm | md | lg | xl }
  • .weight-100 to .weight-900 { sm | md | lg | xl }

Font Sizes

  • .display-1 -{ sm | md | lg | xl }
  • .display-2 -{ sm | md | lg | xl }
  • .display-3 -{ sm | md | lg | xl }
  • .display-4 -{ sm | md | lg | xl }

  • .h1 -{ sm | md | lg | xl }
  • .h2 -{ sm | md | lg | xl }
  • .h3 -{ sm | md | lg | xl }
  • .h4 -{ sm | md | lg | xl }
  • .h5 -{ sm | md | lg | xl }
  • .h6 -{ sm | md | lg | xl }

Float

  • .float-left
  • .float-right
  • .clearfix

Flexbox (.fj-)

justify-content: (x)

  • .fj-start -{ sm | md | lg | xl }
  • .fj-center -{ sm | md | lg | xl }
  • .fj-end -{ sm | md | lg | xl }
  • .fj-between -{ sm | md | lg | xl }
  • .fj-around -{ sm | md | lg | xl }
  • .fj-evenly -{ sm | md | lg | xl }
  • .fj-baseline -{ sm | md | lg | xl }

Flexbox (.fa-)

align-items: (x)

  • .fa-start -{ sm | md | lg | xl }
  • .fa-center -{ sm | md | lg | xl }
  • .fa-end -{ sm | md | lg | xl }
  • .fa-stretch -{ sm | md | lg | xl }

Flexbox

Flex align center - Vertically & Horizontally

  • .flex-center-center

Flexbox Direction

Flex Direction

  • .flex-column
  • .flex-row
  • .flex-wrap

Disable

  • disabled (attribute)

Overflow

  • .overflow-unset (Reset Overflow if already set)

Border Radius

  • .rounded (35px radius)

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-{ sm | md | lg | xl }-{1 - 10}
  • .weight- (100 - 900){ sm | md | lg | xl }
  • .display- (1 - 4){ sm | md | lg | xl }

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