Background color Classes
CSS Class Name Example
.no-bg
Removed Background Color
.bg-white
White Background Color
.bg-theme
Theme Background Color
.bg-primary
Primary Background Color
.bg-success
Success Background Color
.bg-info
Info Background Color
.bg-warning
Warning Background Color
.bg-danger
Danger Background Color
.bg-lg
This is Light Gray Background Color
.bg-mdg
This is Medium Dark Gray Background Color
.bg-dg
This is Dark Gray Background Color
.bg-mg
This is Metalic Gray Background Color
.bg-mb
This is Medium Black Background Color
Border Classes
CSS Class Name Example
.bordered

Apply Bordered

.no-border

Removed Border

.border-t

This is Top Border

.border-r

This is Right Border

.border-b

This is Bottom Border

.border-l

This is Left Border

.border-t-b

This is Top and Bottom Border

.border-l-r

This is Left and Right Border

Margin Classes
CSS Class Name Example
.no-margin
Removed Margins
.no-margin-t
Removed Top Margins
.no-margin-r
Removed Right Margins
.no-margin-b
Removed Bottom Margins
.no-margin-l
Removed Left Margins
.margin-xs
Apply Extra Small Margins
.margin-t-xs
Apply Extra Top Small Margins
.margin-r-xs
Apply Extra Right Small Margins
.margin-b-xs
Apply Extra Bottom Small Margins
.margin-l-xs
Apply Extra Left Small Margins
.margin-t-b-xs
Apply Extra Top and Bottom Small Margins
.margin-l-r-xs
Apply Extra Left and Right Small Margins
.margin-sm
Apply Small Margins
.margin-t-sm
Apply Top Small Margins
.margin-r-sm
Apply Right Small Margins
.margin-b-sm
Apply Bottom Small Margins
.margin-l-sm
Apply Left Small Margins
.margin-t-b-sm
Apply Top and Bottom Small Margins
.margin-l-r-sm
Apply Left and Right Small Margins
.margin
Apply Medium Margins
.margin-t
Apply Top Medium Margins
.margin-r
Apply Right Medium Margins
.margin-b
Apply Bottom Medium Margins
.margin-l
Apply Left Medium Margins
.margin-t-b
Apply Top and Bottom Medium Margins
.margin-l-r
Apply Left and Right Medium Margins
.margin-lg
Apply Large Margins
.margin-t-lg
Apply Top Large Margins
.margin-r-lg
Apply Right Large Margins
.margin-b-lg
Apply Bottom Large Margins
.margin-l-lg
Apply Left Large Margins
.margin-t-b-lg
Apply Top and Bottom Large Margins
.margin-l-r-lg
Apply Left and Right Large Margins
.margin-xlg
Apply Extra Large Margins
.margin-t-xlg
Apply Extra Top Large Margins
.margin-r-xlg
Apply Extra Right Large Margins
.margin-b-xlg
Apply Extra Bottom Large Margins
.margin-l-xlg
Apply Extra Left Large Margins
.margin-t-b-xlg
Apply Extra Top and Bottom Large Margins
.margin-l-r-xlg
Apply Extra Left and Right Large Margins
Font Classes
CSS Class Name Examples
.font-os-thin This is Open-sans Thin font
.font-os-bold This is Open-sans Bold font
.font-os-normal This is Open-sans Normal font
.font-16 This text font size is Font-16
.font-14 This text font size is Font-14
.font-12 This text font size is Font-12
.font-10 This text font size is Font-10
.font-roboto-thin This is Roboto Thin font
.font-roboto-bold This is Roboto Bold font
.font-roboto-normal This is Roboto Normal font
Image Classes
CSS Class Name Examples
.avatar RTDL Image This is Normal Size Image
.avatar-xxs RTDL Image This is More Extra Small Size Image
.avatar-xs RTDL Image This is Extra Small Size Image
.avatar-sm RTDL Image This is Small Size Image
.avatar-md RTDL Image This is Medium Size Image
.avatar-lg RTDL Image This is Large Size Image
.avatar-xl RTDL Image This is Extra Large Size Image
.avatar-xxlg RTDL Image This is More Extra Large Size Image
Text Color Classes
CSS Class Name Example
.text-white
This is Normal Text
.text-lg
This is Light Gray Text
.text-mdg
This is Medium Dark Gray Text
.text-dg
This is Dark Gray Text
.text-mg
This is Metalic Gray Text
.text-mb
This is Medium Black Text
.text-theme
This is Theme Color Text
.text-primary
This is Primary Text
.text-danger
This is Danger Text
.text-info
This is Info Text
.text-warning
This is Warning Text
.text-success
This is Sucess Text
Dark Text Color Classes
CSS Class Name Example
.text-dark-theme
This is Dark Theme Text
.text-dark-primary
This is Dark Primary Text
.text-dark-info
This is Dark Info Text
.text-dark-success
This is Dark Success Text
.text-dark-warning
This is Dark Warning Text
.text-dark-danger
This is Dark Danger Text
Border Radius Classes
CSS Class Name Example
.no-border-radius

Removed Radius Border

.border-r-sm

This is Small Radius Border

.border-r-md

This is Medium Radius Border

.border-r-lg

This is Large Radius Border

.border-r-xlg

This is Extra Large Radius Border

Padding Classes
CSS Class Name Example
.no-padding
Removed Paddings.
.no-padding-t
Removed Top Paddings
.no-padding-r
Removed Right Paddings
.no-padding-b
Removed Bottom Paddings
.no-padding-l
Removed Left Paddings
.padding-xs
Apply Extra Small Paddings
.padding-t-xs
Apply Extra Top Small Paddings
.padding-r-xs
Apply Extra Right Small Paddings
.padding-b-xs
Apply Extra Bottom Small Paddings
.padding-l-xs
Apply Extra Left Small Paddings
.padding-t-b-xs
Apply Extra Top and Bottom Small Paddings
.padding-l-r-xs
Apply Extra Left and Right Small Paddings
.padding-sm
Apply Small Paddings
.padding-t-sm
Apply Top Small Paddings
.padding-r-sm
Apply Right Small Paddings
.padding-b-sm
Apply Bottom Small Paddings
.padding-l-sm
Apply Left Small Paddings
.padding-t-b-sm
Apply Top and Bottom Small Paddings
.padding-l-r-sm
Apply Left and Right Small Paddings
.padding-md
Apply Medium Paddings
.padding-t
Apply Top Medium Paddings
.padding-r
Apply Right Medium Paddings
.padding-b
Apply Bottom Medium Paddings
.padding-l
Apply Left Medium Paddings
.padding-t-b
Apply Top and Bottom Medium Paddings
.padding-l-r
Apply Left and Right Medium Paddings
.padding-lg
Apply Large Paddings
.padding-t-lg
Apply Top Large Paddings
.padding-r-lg
Apply Right Large Paddings
.padding-b-lg
Apply Bottom Large Paddings
.padding-l-lg
Apply Left Large Paddings
.padding-t-b-lg
Apply Top and Bottom Large Paddings
.padding-l-r-lg
Apply Left and Right Large Paddings
.padding-xlg
Apply Extra Large Paddings
.padding-t-xlg
Apply Extra Top Large Paddings
.padding-r-xlg
Apply Extra Right Large Paddings
.padding-b-xlg
Apply Extra Bottom Large Paddings
.padding-l-xlg
Apply Extra Left Large Paddings
.padding-t-b-xlg
Apply Extra Top and Bottom Large Paddings
.padding-l-r-xlg
Apply Extra Left and Right Large Paddings
Text Classes
CSS Class Name Example
.text-normal

This is Normal Text

.text-bold

This is Bold Text

.text-italic

This is Italic Text

.text-strike

This is Strike Text

.text-underline

This is Underline Text

.text-lowercase

This is Lowercase Text

.text-uppercase

This is Uppercase Text

.text-caps

This is Caps Text

Height Classes
CSS Class Name Example
.height-30
Set Minimum Height 30px
.height-40
Set Minimum Height 40px
.height-50
Set Minimum Height 50px
.height-100
Set Minimum Height 100px
.height-150
Set Minimum Height 150px
.height-200
Set Minimum Height 200px
.height-320
Set Minimum Height 320px
Width Classes
CSS Class Name Example
.width-30
Set Minimum Width 30px
.width-40
Set Minimum Width 40px
.width-50
Set Minimum Width 50px
.width-100
Set Minimum Width 100px
.width-150
Set Minimum Width 150px
.width-200
Set Minimum Width 200px
.width-320
Set Minimum Width 320px
Alignment Classes
CSS Class Name Example
.inline-block
Set Inline Block
.vertical-middle
Set Verticle Align Middle
.vertical-top
Set Verticle Align Top