Dark Themes
Light Themes
Background color Classes
CSS Class Name Example
.no-bg
Removed Background Color
.bg-theme
Theme 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

.border-theme

Apply Theme 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
.m-xs
Apply Extra Small Margins
.mt-xs
Apply Extra Top Small Margins
.mr-xs
Apply Extra Right Small Margins
.mb-xs
Apply Extra Bottom Small Margins
.ml-xs
Apply Extra Left Small Margins
.my-xs
Apply Extra Top and Bottom Small Margins
.mx-xs
Apply Extra Left and Right Small Margins
.m-sm
Apply Small Margins
.mt-sm
Apply Top Small Margins
.mr-sm
Apply Right Small Margins
.mb-sm
Apply Bottom Small Margins
.ml-sm
Apply Left Small Margins
.my-sm
Apply Top and Bottom Small Margins
.mx-sm
Apply Left and Right Small Margins
.m-md
Apply Medium Margins
.mt-md
Apply Top Medium Margins
.mr-md
Apply Right Medium Margins
.mb-md
Apply Bottom Medium Margins
.ml-md
Apply Left Medium Margins
.my-md
Apply Top and Bottom Medium Margins
.mx-md
Apply Left and Right Medium Margins
.m-lg
Apply Large Margins
.mt-lg
Apply Top Large Margins
.mr-lg
Apply Right Large Margins
.mb-lg
Apply Bottom Large Margins
.ml-lg
Apply Left Large Margins
.my-lg
Apply Top and Bottom Large Margins
.mx-lg
Apply Left and Right Large Margins
.m-xlg
Apply Extra Large Margins
.mt-xlg
Apply Extra Top Large Margins
.mr-xlg
Apply Extra Right Large Margins
.mb-xlg
Apply Extra Bottom Large Margins
.ml-xlg
Apply Extra Left Large Margins
.my-xlg
Apply Extra Top and Bottom Large Margins
.mx-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-roboto-thin This is Roboto Thin font
.font-roboto-bold This is Roboto Bold font
.font-roboto-normal This is Roboto 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
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-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
Border Radius Classes
CSS Class Name Example
.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
.p-xs
Apply Extra Small Paddings
.pt-xs
Apply Extra Top Small Paddings
.pr-xs
Apply Extra Right Small Paddings
.pb-xs
Apply Extra Bottom Small Paddings
.pl-xs
Apply Extra Left Small Paddings
.py-xs
Apply Extra Top and Bottom Small Paddings
.px-xs
Apply Extra Left and Right Small Paddings
.p-sm
Apply Small Paddings
.pt-sm
Apply Top Small Paddings
.pr-sm
Apply Right Small Paddings
.pb-sm
Apply Bottom Small Paddings
.pl-sm
Apply Left Small Paddings
.py-sm
Apply Top and Bottom Small Paddings
.px-sm
Apply Left and Right Small Paddings
.p-md
Apply Medium Paddings
.pt-md
Apply Top Medium Paddings
.pr-md
Apply Right Medium Paddings
.pb-md
Apply Bottom Medium Paddings
.pl-md
Apply Left Medium Paddings
.py-md
Apply Top and Bottom Medium Paddings
.px-md
Apply Left and Right Medium Paddings
.p-lg
Apply Large Paddings
.pt-lg
Apply Top Large Paddings
.pr-lg
Apply Right Large Paddings
.pb-lg
Apply Bottom Large Paddings
.pl-lg
Apply Left Large Paddings
.py-lg
Apply Top and Bottom Large Paddings
.px-lg
Apply Left and Right Large Paddings
.p-xlg
Apply Extra Large Paddings
.pt-xlg
Apply Extra Top Large Paddings
.pr-xlg
Apply Extra Right Large Paddings
.pb-xlg
Apply Extra Bottom Large Paddings
.pl-xlg
Apply Extra Left Large Paddings
.py-xlg
Apply Extra Top and Bottom Large Paddings
.px-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

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

Settings

Customize Theme layout, sidebars, and color schemes. This is for demonstration purpose. All options are available via code.

Fixed Position
Sidebar
Header
Footer
Layout
Amazing sidebars for your smart admin, Get second version of sidebar here.
Color schemes
Dark Themes
Light Themes