utilities

Utilities

Butter Cake include 100+ helper classes.

Navbar
  • .fixed-top
Grid - Classes 12 column grid
  • .row - main container
  • .column - auto column
  • .col-md-(x)
  • .col-lg-(x)
  • .col-xl-(x)
Wrappers
  • .container
  • .container-fluid
Display Property
  • .d-none
  • .d-block
  • .d-inline
  • .d-inline-block
  • .d-flex or .flex
Background Color
  • .bg-primary
  • .bg-secondary
  • .bg-dark
  • .bg-light
  • .bg-white
  • .bg-success
  • .bg-danger
  • .bg-warning
  • .bg-gray
  • .bg-muted
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
  • .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
  • .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
  • .w-100 (width: 100%)
Normal Image - img tag
  • .img-fluid
  • .img-rounded
  • .img-cirle - border-radius: 50%
  • .img-cover
  • .img-contain
Background Image
  • .bg-cover
  • .bg-contain
  • .bg-fixed
List
  • .list-unstyled
Shadow
  • .shadow - 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
  • .text-left
  • .text-right
  • .capitalize
  • .uppercase
  • .lowercase
Font Weight
  • .font-normal
  • .font-bold
  • .weight-100 to .weight-900
Font Sizes
  • .display-1
  • .display-2
  • .display-3
  • .display-4

  • .h1
  • .h2
  • .h3
  • .h4
  • .h5
  • .h6
Float
  • .float-left
  • .float-right
  • .clearfix
Flexbox

justify-content: (x)

  • .fj-start
  • .fj-center
  • .fj-end
  • .fj-between
  • .fj-around
  • .fj-evenly
  • .fj-baseline
Flexbox

align-items: (x)

  • .fa-start
  • .fa-center
  • .fa-end
  • .fa-stretch
Flexbox

Flex align center - Vertically & Horizontally

  • .flex-center-center
Flexbox

Flex Direction

  • .flex-column
  • .flex-row
Disable
  • .disabled
  • disabled (attribute)