Famous UI include 100+ helper classes.
.row
- main container.column
- auto column.col-md-(x)
.col-lg-(x)
.col-xl-(x)
.offset-(x)
- Offset from left.fui-container
.fui-container-fluid
.d-none
.d-block
.d-inline
.d-inline-block
.d-flex or .flex
.bg-primary
.bg-secondary
.bg-dark
.bg-light
.bg-white
.bg-success
.bg-danger
.bg-warning
.bg-gray
.bg-muted
.bg-none
.text-primary
.text-secondary
.text-dark
.text-light
.text-white
.text-success
.text-warning
.text-danger
.text-gray
.text-muted
.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)
.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) ).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) ).w-100
(width: 100%)img
tag
.img-fluid
.img-rounded
.img-circle
- border-radius: 50%.img-cover
.img-contain
.bg-cover
.bg-contain
.bg-fixed
.list-unstyled
.radius-none
.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-center
.text-left
.text-right
.capitalize
.uppercase
.lowercase
.font-normal
.font-bold
.weight-100 to .weight-900
.display-1
.display-2
.display-3
.display-4
.h1
.h2
.h3
.h4
.h5
.h6
.float-left
.float-right
.clearfix
justify-content: (x)
.fj-start
.fj-center
.fj-end
.fj-between
.fj-around
.fj-evenly
.fj-baseline
align-items: (x)
.fa-start
.fa-center
.fa-end
.fa-stretch
Flex align center - Vertically & Horizontally
.flex-center-center
Flex Direction
.flex-column
.flex-row
.flex-wrap
disabled
(attribute).overflow-unset
(Reset Overflow if already set).rounded
(35px radius)