Utilities

Navbar

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

Grid - Classes

• .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

• .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 & 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 }