Predefined CSS Class header small text goes here...

General CSS Class

All the predefined css classes will override the defined css styling in your classes, UNLESS the !important is declared in your defined css styling.

Row Space Table Float Border Radius Display Overflow
.row.gx-1
.row.gx-2
.row.gx-3
.row.gx-4
.row.gx-5
.align-baseline
.align-top
.align-middle
.align-bottom
.align-text-top
.align-text-bottom
.float-start
.float-end
.float-none
.rounded-0
.rounded-1
.rounded-2
.rounded-3
.rounded-top
.rounded-end
.rounded-bottom
.rounded-start
.rounded-circle
.rounded-pill
.d-none
.d-inline
.d-inline-block
.d-block
.d-grid
.d-table
.d-table-cell
.d-table-row
.d-flex
.d-inline-flex
.overflow-auto
.overflow-hidden
.overflow-visible
.overflow-scroll
Flex Borders Position Interactions Shadows Visibility
.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-evenly
.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.flex-grow-1
.flex-grow-0
.flex-shrink-1
.flex-shrink-0
.flex-nowrap
.flex-wrap
.flex-wrap-reverse
.order-{1|2|3|4|5}
.border
.border-top
.border-end
.border-bottom
.border-start
.border-0
.border-top-0
.border-end-0
.border-bottom-0
.border-start-0
.border-1
.border-2
.border-3
.border-4
.border-5
.border-primary
.border-secondary
.border-success
.border-danger
.border-warning
.border-info
.border-light
.border-dark
.border-white
.position-static
.position-relative
.position-absolute
.position-fixed
.position-sticky
.top-0
.top-50
.top-100
.end-0
.end-50
.end-100
.bottom-0
.bottom-50
.bottom-100
.start-0
.start-50
.start-100
.translate-middle
.translate-middle-x
.translate-middle-y
.user-select-all
.user-select-auto
.user-select-none
.pe-none
.pe-auto
.shadow-none
.shadow-sm
.shadow
.shadow-lg
.d-inline-flex
.visible
.invisible

Width & Height CSS Class

All the predefined css classes will override the defined css styling in your classes, UNLESS the !important is declared in your defined css styling.

Width Height
.w-100
.w-75
.w-50
.w-25
.w-auto
.vw-100
.min-vw-100
.w-5px
.w-10px
.w-15px
.w-20px
.w-25px
.w-30px
.w-35px
.w-40px
.w-45px
.w-50px
.w-100px
.w-150px
.w-200px
.w-250px
.w-300px
.w-350px
.w-400px
.w-450px
.w-500px
.w-550px
.w-600px
.h-100
.h-75
.h-50
.h-25
.h-auto
.vh-100
.min-vh-100
.h-5px
.h-10px
.h-15px
.h-20px
.h-25px
.h-30px
.h-35px
.h-40px
.h-45px
.h-50px
.h-100px
.h-150px
.h-200px
.h-250px
.h-300px
.h-350px
.h-400px
.h-450px
.h-500px
.h-550px
.h-600px

Text & Font CSS Class

All the predefined css classes will override the defined css styling in your classes, UNLESS the !important is declared in your defined css styling.

Font Size Font Weight Text Align Text Overflow
.fs-1
.fs-2
.fs-3
.fs-4
.fs-5
.fs-6
.fs-{1px, 2px... to 80px}
Line Height
.lh-1
.lh-sm
.lh-base
.lh-lg
.fw-bold
.fw-bolder
.fw-normal
.fw-light
.fw-lighter
.fw-{100 to 800}
Italics
.fst-italic
.fst-normal
.text-center
.text-start
.text-end
Text decoration
.text-decoration-underline
.text-decoration-line-through
.text-decoration-none
Reset Color
.reset-link
.text-wrap
.text-nowrap
.text-ellipsis
Text Transform
.text-lowercase
.text-uppercase
.text-capitalize
Word Break
.text-break
Monospace
.font-monospace

Margin CSS Class

All the predefined css classes will override the defined css styling in your classes, UNLESS the !important is declared in your defined css styling.

Margin Margin Top Margin Right Margin Bottom Margin Left
.m-0
.m-1
.m-2
.m-3
.m-4
.m-5
.m-auto
.m-{1px, 2px... to 10px}
.m-{15px, 20px... to 50px}
.mt-0
.mt-1
.mt-2
.mt-3
.mt-4
.mt-5
.mt-auto
.mt-{1px, 2px... to 10px}
.mt-{15px, 20px... to 50px}
.me-0
.me-1
.me-2
.me-3
.me-4
.me-5
.me-auto
.me-{1px, 2px... to 10px}
.me-{15px, 20px... to 50px}
.mb-0
.mb-1
.mb-2
.mb-3
.mb-4
.mb-5
.mb-auto
.mb-{1px, 2px... to 10px}
.mb-{15px, 20px... to 50px}
.ms-0
.ms-1
.ms-2
.ms-3
.ms-4
.ms-5
.ms-auto
.ms-{1px, 2px... to 10px}
.ms-{15px, 20px... to 50px}

Padding CSS Class

All the predefined css classes will override the defined css styling in your classes, UNLESS the !important is declared in your defined css styling.

Padding Padding Top Padding Right Padding Bottom Padding Left
.p-0
.p-1
.p-2
.p-3
.p-4
.p-5
.p-auto
.p-{1px, 2px... to 10px}
.p-{15px, 20px... to 50px}
.pt-0
.pt-1
.pt-2
.pt-3
.pt-4
.pt-5
.pt-auto
.pt-{1px, 2px... to 10px}
.pt-{15px, 20px... to 50px}
.pe-0
.pe-1
.pe-2
.pe-3
.pe-4
.pe-5
.pe-auto
.pe-{1px, 2px... to 10px}
.pe-{15px, 20px... to 50px}
.pb-0
.pb-1
.pb-2
.pb-3
.pb-4
.pb-5
.pb-auto
.pb-{1px, 2px... to 10px}
.pb-{15px, 20px... to 50px}
.ps-0
.ps-1
.ps-2
.ps-3
.ps-4
.ps-5
.ps-auto
.ps-{1px, 2px... to 10px}
.ps-{15px, 20px... to 50px}

Background CSS Class

All the predefined css classes will override the defined css styling in your classes, UNLESS the !important is declared in your defined css styling.

Blue Indigo Purple Aqua Teal
.bg-blue-100
.bg-blue-200
.bg-blue-300
.bg-blue-400
.bg-blue-500 / .bg-blue
.bg-blue-600
.bg-blue-700
.bg-blue-800
.bg-blue-900
.bg-gradient-blue
.bg-indigo-100
.bg-indigo-200
.bg-indigo-300
.bg-indigo-400
.bg-indigo-500 / .bg-indigo
.bg-indigo-600
.bg-indigo-700
.bg-indigo-800
.bg-indigo-900
.bg-gradient-indigo
.bg-purple-100
.bg-purple-200
.bg-purple-300
.bg-purple-400
.bg-purple-500 / .bg-purple
.bg-purple-600
.bg-purple-700
.bg-purple-800
.bg-purple-900
.bg-gradient-purple
.bg-cyan-100
.bg-cyan-200
.bg-cyan-300
.bg-cyan-400
.bg-cyan-500 / .bg-cyan
.bg-cyan-600
.bg-cyan-700
.bg-cyan-800
.bg-cyan-900
.bg-gradient-cyan
.bg-teal-100
.bg-teal-200
.bg-teal-300
.bg-teal-400
.bg-teal-500 / .bg-teal
.bg-teal-600
.bg-teal-700
.bg-teal-800
.bg-teal-900
.bg-gradient-teal
Green Lime Orange Yellow Red
.bg-green-100
.bg-green-200
.bg-green-300
.bg-green-400
.bg-green-500 / .bg-green
.bg-green-600
.bg-green-700
.bg-green-800
.bg-green-900
.bg-gradient-green
.bg-lime-100
.bg-lime-200
.bg-lime-300
.bg-lime-400
.bg-lime-500 / .bg-lime
.bg-lime-600
.bg-lime-700
.bg-lime-800
.bg-lime-900
.bg-gradient-lime
.bg-orange-100
.bg-orange-200
.bg-orange-300
.bg-orange-400
.bg-orange-500 / .bg-orange
.bg-orange-600
.bg-orange-700
.bg-orange-800
.bg-orange-900
.bg-gradient-orange
.bg-yellow-100
.bg-yellow-200
.bg-yellow-300
.bg-yellow-400
.bg-yellow-500 / .bg-yellow
.bg-yellow-600
.bg-yellow-700
.bg-yellow-800
.bg-yellow-900
.bg-gradient-yellow
.bg-red-100
.bg-red-200
.bg-red-300
.bg-red-400
.bg-red-500 / .bg-red
.bg-red-600
.bg-red-700
.bg-red-800
.bg-red-900
.bg-gradient-red
Pink Black Grey Silver White
.bg-pink-100
.bg-pink-200
.bg-pink-300
.bg-pink-400
.bg-pink-500 / .bg-pink
.bg-pink-600
.bg-pink-700
.bg-pink-800
.bg-pink-900
.bg-gradient-pink
.bg-black-100
.bg-black-200
.bg-black-300
.bg-black-400
.bg-black-500 / .bg-black
.bg-black-600
.bg-black-700
.bg-black-800
.bg-black-900
.bg-gradient-black
.bg-gray-100
.bg-gray-200
.bg-gray-300
.bg-gray-400
.bg-gray-500 / .bg-gray
.bg-gray-600
.bg-gray-700
.bg-gray-800
.bg-gray-900
.bg-gradient-gray
.bg-silver-100
.bg-silver-200
.bg-silver-300
.bg-silver-400
.bg-silver-500 / .bg-silver
.bg-silver-600
.bg-silver-700
.bg-silver-800
.bg-silver-900
.bg-gradient-silver
.bg-white-100
.bg-white-200
.bg-white-300
.bg-white-400
.bg-white-500 / .bg-white
.bg-white-600
.bg-white-700
.bg-white-800
.bg-white-900
.bg-gradient-white
Extra Custom Background
.bg-none
.bg-transparent
.bg-gradient-red-pink
.bg-gradient-orange-red
.bg-gradient-yellow-orange
.bg-gradient-yellow-red
.bg-gradient-teal-green
.bg-gradient-yellow-green
.bg-gradient-blue-purple
.bg-gradient-cyan-blue
.bg-gradient-cyan-purple
.bg-gradient-cyan-indigo
.bg-gradient-blue-indigo
.bg-gradient-purple-indigo
.bg-gradient-silver-black

Text Color CSS Class

All the predefined css classes will override the defined css styling in your classes, UNLESS the !important is declared in your defined css styling.

Blue Indigo Purple Aqua Teal
.bg-blue-100
.bg-blue-200
.bg-blue-300
.bg-blue-400
.bg-blue-500 / .bg-blue
.bg-blue-600
.bg-blue-700
.bg-blue-800
.bg-blue-900
.bg-indigo-100
.bg-indigo-200
.bg-indigo-300
.bg-indigo-400
.bg-indigo-500 / .bg-indigo
.bg-indigo-600
.bg-indigo-700
.bg-indigo-800
.bg-indigo-900
.bg-purple-100
.bg-purple-200
.bg-purple-300
.bg-purple-400
.bg-purple-500 / .bg-purple
.bg-purple-600
.bg-purple-700
.bg-purple-800
.bg-purple-900
.bg-cyan-100
.bg-cyan-200
.bg-cyan-300
.bg-cyan-400
.bg-cyan-500 / .bg-cyan
.bg-cyan-600
.bg-cyan-700
.bg-cyan-800
.bg-cyan-900
.bg-teal-100
.bg-teal-200
.bg-teal-300
.bg-teal-400
.bg-teal-500 / .bg-teal
.bg-teal-600
.bg-teal-700
.bg-teal-800
.bg-teal-900
Green Lime Orange Yellow Red
.bg-green-100
.bg-green-200
.bg-green-300
.bg-green-400
.bg-green-500 / .bg-green
.bg-green-600
.bg-green-700
.bg-green-800
.bg-green-900
.bg-lime-100
.bg-lime-200
.bg-lime-300
.bg-lime-400
.bg-lime-500 / .bg-lime
.bg-lime-600
.bg-lime-700
.bg-lime-800
.bg-lime-900
.bg-orange-100
.bg-orange-200
.bg-orange-300
.bg-orange-400
.bg-orange-500 / .bg-orange
.bg-orange-600
.bg-orange-700
.bg-orange-800
.bg-orange-900
.bg-yellow-100
.bg-yellow-200
.bg-yellow-300
.bg-yellow-400
.bg-yellow-500 / .bg-yellow
.bg-yellow-600
.bg-yellow-700
.bg-yellow-800
.bg-yellow-900
.bg-red-100
.bg-red-200
.bg-red-300
.bg-red-400
.bg-red-500 / .bg-red
.bg-red-600
.bg-red-700
.bg-red-800
.bg-red-900
Pink Black Grey Silver White
.bg-pink-100
.bg-pink-200
.bg-pink-300
.bg-pink-400
.bg-pink-500 / .bg-pink
.bg-pink-600
.bg-pink-700
.bg-pink-800
.bg-pink-900
.bg-black-100
.bg-black-200
.bg-black-300
.bg-black-400
.bg-black-500 / .bg-black
.bg-black-600
.bg-black-700
.bg-black-800
.bg-black-900
.bg-gray-100
.bg-gray-200
.bg-gray-300
.bg-gray-400
.bg-gray-500 / .bg-gray
.bg-gray-600
.bg-gray-700
.bg-gray-800
.bg-gray-900
.bg-silver-100
.bg-silver-200
.bg-silver-300
.bg-silver-400
.bg-silver-500 / .bg-silver
.bg-silver-600
.bg-silver-700
.bg-silver-800
.bg-silver-900
.bg-white-100
.bg-white-200
.bg-white-300
.bg-white-400
.bg-white-500 / .bg-white
.bg-white-600
.bg-white-700
.bg-white-800
.bg-white-900
Extra


.text-gradient
.bg-gradient-*
App Settings
Header Fixed
Header Inverse
Sidebar Fixed
Sidebar Grid
Gradient Enabled
Admin Design (5)
Language Version (7)
Frontend Design (5)
Documentation Reset Local Storage