Utilities

Famous UI include 100+ helper classes.

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
Wrappers
  • .fui-container
  • .fui-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
  • .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
  • .fui-btn .fui-btn-primary
  • .fui-btn .fui-btn-secondary
  • .fui-btn .fui-btn-gray
  • .fui-btn .fui-btn-success
  • .fui-btn .fui-btn-warning
  • .fui-btn .fui-btn-danger
  • .fui-btn .fui-btn-dark
  • .fui-btn .fui-btn-light
  • .fui-btn .fui-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-circle - border-radius: 50%
  • .img-cover
  • .img-contain
Background Image
  • .bg-cover
  • .bg-contain
  • .bg-fixed
List
  • .list-unstyled
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 (.fj-)

justify-content: (x)

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

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
  • .flex-wrap
Disable
  • disabled (attribute)
Overflow
  • .overflow-unset (Reset Overflow if already set)
Border Radius
  • .rounded (35px radius)