Helper page header description 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.
| General CSS Class Name | |||||||
|---|---|---|---|---|---|---|---|
| Row Space | Table | Float | Border Radius | Width | Height | Vertical Box | Overflow |
| .row.row-space-0 | .table-valign-middle | .pull-left | .no-rounded-corner | .width-full (100%) | .height-full (100%) | .vertical-box | .overflow-auto |
| .row.row-space-2 | .table-th-valign-middle | .pull-right | .rounded-corner | .width-lg (600px) | .height-lg (600px) | .vertical-box-column | .overflow-visible |
| .row.row-space-4 | .table-td-valign-middle | .pull-none | .width-md (450px) | .height-md (450px) | .vertical-box-row | .overflow-scroll | |
| .row.row-space-6 | .table-valign-top | .width-sm (300px) | .height-sm (300px) | .vertical-box-cell | .overflow-x-hidden | ||
| .row.row-space-8 | .table-th-valign-top | .width-xs (150px) | .height-xs (150px) | .vertical-box-inner-cell | .overflow-x-visible | ||
| .row.row-space-10 | .table-td-valign-top | .width-50 (50px) | .height-50 (50px) | .overflow-x-scroll | |||
| .row.row-space-12 | .table-valign-bottom | .width-100 (100px) | .height-100 (100px) | .overflow-y-hidden | |||
| .row.row-space-14 | .table-th-valign-bottom | .width-150 (150px) | .height-150 (150px) | .overflow-y-visible | |||
| .row.row-space-16 | .table-td-valign-bottom | .width-200 (200px) | .height-200 (200px) | .overflow-y-scroll | |||
| .row.row-space-18 | .valign-top | .width-250 (250px) | .height-250 (250px) | ||||
| .row.row-space-20 | .valign-middle | .width-300 (300px) | .height-300 (300px) | ||||
| .row.row-space-22 | .valign-bottom | .width-350 (350px) | .height-350 (350px) | ||||
| .row.row-space-24 | .width-400 (400px) | .height-400 (400px) | |||||
| .row.row-space-26 | .width-450 (450px) | .height-450 (450px) | |||||
| .row.row-space-28 | .width-500 (500px) | .height-500 (500px) | |||||
| .row.row-space-30 | .width-550 (550px) | .height-550 (550px) | |||||
| .width-600 (600px) | .height-600 (600px) | ||||||
Text & Font - Align / Color / Size
All the predefined css classes will override the defined css styling in your classes, UNLESS the !important is declared in your defined css styling.
| Text / Font Class Name | ||||
|---|---|---|---|---|
| Font Size | Font Weight | Text Align | Text Overflow | |
| .f-s-8 | .f-w-100 | .text-center | .text-ellipsis | |
| .f-s-9 | .f-w-200 | .text-left | ||
| .f-s-10 | .f-w-300 | .text-right | ||
| .f-s-11 | .f-w-400 | |||
| .f-s-12 | .f-w-500 | |||
| .f-s-13 | .f-w-600 | |||
| .f-s-14 | .f-w-700 | |||
| .f-s-15 | ||||
| .f-s-16 | ||||
| .f-s-17 | ||||
| .f-s-18 | ||||
| .f-s-19 | ||||
| .f-s-20 | ||||
| Font Color | ||||
|---|---|---|---|---|
| .text-muted | .text-primary | .text-info | .text-success | .text-warning |
|
.text-muted - .text-muted-transparent-9 - .text-muted-transparent-8 - .text-muted-transparent-7 - .text-muted-transparent-6 - .text-muted-transparent-5 - .text-muted-transparent-4 - .text-muted-transparent-3 - .text-muted-transparent-2 - .text-muted-transparent-1 |
.text-primary - .text-primary-transparent-9 - .text-primary-transparent-8 - .text-primary-transparent-7 - .text-primary-transparent-6 - .text-primary-transparent-5 - .text-primary-transparent-4 - .text-primary-transparent-3 - .text-primary-transparent-2 - .text-primary-transparent-1 |
.text-info - .text-info-transparent-9 - .text-info-transparent-8 - .text-info-transparent-7 - .text-info-transparent-6 - .text-info-transparent-5 - .text-info-transparent-4 - .text-info-transparent-3 - .text-info-transparent-2 - .text-info-transparent-1 |
.text-success - .text-success-transparent-9 - .text-success-transparent-8 - .text-success-transparent-7 - .text-success-transparent-6 - .text-success-transparent-5 - .text-success-transparent-4 - .text-success-transparent-3 - .text-success-transparent-2 - .text-success-transparent-1 |
.text-warning - .text-warning-transparent-9 - .text-warning-transparent-8 - .text-warning-transparent-7 - .text-warning-transparent-6 - .text-warning-transparent-5 - .text-warning-transparent-4 - .text-warning-transparent-3 - .text-warning-transparent-2 - .text-warning-transparent-1 |
| .text-danger | .text-pink | .text-purple | .text-yellow | .text-inverse |
|---|---|---|---|---|
|
.text-danger - .text-danger-transparent-9 - .text-danger-transparent-8 - .text-danger-transparent-7 - .text-danger-transparent-6 - .text-danger-transparent-5 - .text-danger-transparent-4 - .text-danger-transparent-3 - .text-danger-transparent-2 - .text-danger-transparent-1 |
.text-pink - .text-pink-transparent-9 - .text-pink-transparent-8 - .text-pink-transparent-7 - .text-pink-transparent-6 - .text-pink-transparent-5 - .text-pink-transparent-4 - .text-pink-transparent-3 - .text-pink-transparent-2 - .text-pink-transparent-1 |
.text-purple - .text-purple-transparent-9 - .text-purple-transparent-8 - .text-purple-transparent-7 - .text-purple-transparent-6 - .text-purple-transparent-5 - .text-purple-transparent-4 - .text-purple-transparent-3 - .text-purple-transparent-2 - .text-purple-transparent-1 |
.text-yellow - .text-yellow-transparent-9 - .text-yellow-transparent-8 - .text-yellow-transparent-7 - .text-yellow-transparent-6 - .text-yellow-transparent-5 - .text-yellow-transparent-4 - .text-yellow-transparent-3 - .text-yellow-transparent-2 - .text-yellow-transparent-1 |
.text-inverse - .text-inverse-transparent-9 - .text-inverse-transparent-8 - .text-inverse-transparent-7 - .text-inverse-transparent-6 - .text-inverse-transparent-5 - .text-inverse-transparent-4 - .text-inverse-transparent-3 - .text-inverse-transparent-2 - .text-inverse-transparent-1 |
Margin - All / Top / Right / Bottom / Left
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 Class Name | ||||
|---|---|---|---|---|
| Margin | Margin Top | Margin Right | Margin Bottom | Margin Left |
| .m-0 | .m-t-0 | .m-r-0 | .m-b-0 | .m-l-0 |
| .m-1 | .m-t-1 | .m-r-1 | .m-b-1 | .m-l-1 |
| .m-2 | .m-t-2 | .m-r-2 | .m-b-2 | .m-l-2 |
| .m-3 | .m-t-3 | .m-r-3 | .m-b-3 | .m-l-3 |
| .m-4 | .m-t-4 | .m-r-4 | .m-b-4 | .m-l-4 |
| .m-5 | .m-t-5 | .m-r-5 | .m-b-5 | .m-l-5 |
| .m-10 | .m-t-10 | .m-r-10 | .m-b-10 | .m-l-10 |
| .m-15 | .m-t-15 | .m-r-15 | .m-b-15 | .m-l-15 |
| .m-20 | .m-t-20 | .m-r-20 | .m-b-20 | .m-l-20 |
| .m-25 | .m-t-25 | .m-r-25 | .m-b-25 | .m-l-25 |
| .m-30 | .m-t-30 | .m-r-30 | .m-b-30 | .m-l-30 |
| .m-35 | .m-t-35 | .m-r-35 | .m-b-35 | .m-l-35 |
| .m-40 | .m-t-40 | .m-r-40 | .m-b-40 | .m-l-40 |
| .m-auto | ||||
Padding - All / Top / Right / Bottom / Left
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 Class Name | ||||
|---|---|---|---|---|
| Padding | Padding Top | Padding Right | Padding Bottom | Padding Left |
| .p-0 | .p-t-0 | .p-r-0 | .p-b-0 | .p-l-0 |
| .p-1 | .p-t-1 | .p-r-1 | .p-b-1 | .p-l-1 |
| .p-2 | .p-t-2 | .p-r-2 | .p-b-2 | .p-l-2 |
| .p-3 | .p-t-3 | .p-r-3 | .p-b-3 | .p-l-3 |
| .p-4 | .p-t-4 | .p-r-4 | .p-b-4 | .p-l-4 |
| .p-5 | .p-t-5 | .p-r-5 | .p-b-5 | .p-l-5 |
| .p-10 | .p-t-10 | .p-r-10 | .p-b-10 | .p-l-10 |
| .p-15 / .wrapper | .p-t-15 | .p-r-15 | .p-b-15 | .p-l-15 |
| .p-20 | .p-t-20 | .p-r-20 | .p-b-20 | .p-l-20 |
| .p-25 | .p-t-25 | .p-r-25 | .p-b-25 | .p-l-25 |
| .p-30 | .p-t-30 | .p-r-30 | .p-b-30 | .p-l-30 |
| .p-35 | .p-t-35 | .p-r-35 | .p-b-35 | .p-l-35 |
| .p-40 | .p-t-40 | .p-r-40 | .p-b-40 | .p-l-40 |
Background
All the predefined css classes will override the defined css styling in your classes, UNLESS the !important is declared in your defined css styling.
| Gradient Background Class Name | ||||
|---|---|---|---|---|
| .bg-gradient-red | .bg-gradient-pink | .bg-gradient-red-orange | .bg-gradient-yellow | .bg-gradient-orange |
| .bg-gradient-orange-dark | .bg-gradient-green | .bg-gradient-green-light | .bg-gradient-green-dark | .bg-gradient-green-aqua |
| .bg-gradient-aqua | .bg-gradient-blue | .bg-gradient-blue-inverse | .bg-gradient-blue-dark | .bg-theme |
| .bg-gradient-dark-blue-light | .bg-gradient-dark-blue | .bg-gradient-purple | .bg-gradient-purple-inverse | .bg-gradient-silver |
| .bg-gradient-black | ||||
| Background Class Name | ||||
|---|---|---|---|---|
|
.bg-muted .bg-muted-transparent-9 .bg-muted-transparent-8 .bg-muted-transparent-7 .bg-muted-transparent-6 .bg-muted-transparent-5 .bg-muted-transparent-4 .bg-muted-transparent-3 .bg-muted-transparent-2 .bg-muted-transparent-1 |
.bg-danger .bg-danger-transparent-9 .bg-danger-transparent-8 .bg-danger-transparent-7 .bg-danger-transparent-6 .bg-danger-transparent-5 .bg-danger-transparent-4 .bg-danger-transparent-3 .bg-danger-transparent-2 .bg-danger-transparent-1 |
.bg-warning .bg-warning-transparent-9 .bg-warning-transparent-8 .bg-warning-transparent-7 .bg-warning-transparent-6 .bg-warning-transparent-5 .bg-warning-transparent-4 .bg-warning-transparent-3 .bg-warning-transparent-2 .bg-warning-transparent-1 |
.bg-yellow .bg-yellow-transparent-9 .bg-yellow-transparent-8 .bg-yellow-transparent-7 .bg-yellow-transparent-6 .bg-yellow-transparent-5 .bg-yellow-transparent-4 .bg-yellow-transparent-3 .bg-yellow-transparent-2 .bg-yellow-transparent-1 |
.bg-success .bg-success-transparent-9 .bg-success-transparent-8 .bg-success-transparent-7 .bg-success-transparent-6 .bg-success-transparent-5 .bg-success-transparent-4 .bg-success-transparent-3 .bg-success-transparent-2 .bg-success-transparent-1 |
|
.bg-info .bg-info-transparent-9 .bg-info-transparent-8 .bg-info-transparent-7 .bg-info-transparent-6 .bg-info-transparent-5 .bg-info-transparent-4 .bg-info-transparent-3 .bg-info-transparent-2 .bg-info-transparent-1 |
.bg-primary .bg-primary-transparent-9 .bg-primary-transparent-8 .bg-primary-transparent-7 .bg-primary-transparent-6 .bg-primary-transparent-5 .bg-primary-transparent-4 .bg-primary-transparent-3 .bg-primary-transparent-2 .bg-primary-transparent-1 |
.bg-purple .bg-purple-transparent-9 .bg-purple-transparent-8 .bg-purple-transparent-7 .bg-purple-transparent-6 .bg-purple-transparent-5 .bg-purple-transparent-4 .bg-purple-transparent-3 .bg-purple-transparent-2 .bg-purple-transparent-1 |
.bg-pink .bg-pink-transparent-9 .bg-pink-transparent-8 .bg-pink-transparent-7 .bg-pink-transparent-6 .bg-pink-transparent-5 .bg-pink-transparent-4 .bg-pink-transparent-3 .bg-pink-transparent-2 .bg-pink-transparent-1 |
.bg-grey .bg-grey-transparent-9 .bg-grey-transparent-8 .bg-grey-transparent-7 .bg-grey-transparent-6 .bg-grey-transparent-5 .bg-grey-transparent-4 .bg-grey-transparent-3 .bg-grey-transparent-2 .bg-grey-transparent-1 |
|
.bg-inverse .bg-inverse-transparent-9 .bg-inverse-transparent-8 .bg-inverse-transparent-7 .bg-inverse-transparent-6 .bg-inverse-transparent-5 .bg-inverse-transparent-4 .bg-inverse-transparent-3 .bg-inverse-transparent-2 .bg-inverse-transparent-1 |
.bg-white .bg-white-transparent-9 .bg-white-transparent-8 .bg-white-transparent-7 .bg-white-transparent-6 .bg-white-transparent-5 .bg-white-transparent-4 .bg-white-transparent-3 .bg-white-transparent-2 .bg-white-transparent-1 |
|||
Global Javascript Variable
All the javascript background variable is exactly same like the CSS color code.
| Global Variable | ||
|---|---|---|
|
MUTED_COLOR MUTED_TRANSPARENT_9_COLOR MUTED_TRANSPARENT_8_COLOR MUTED_TRANSPARENT_7_COLOR MUTED_TRANSPARENT_6_COLOR MUTED_TRANSPARENT_5_COLOR MUTED_TRANSPARENT_4_COLOR MUTED_TRANSPARENT_3_COLOR MUTED_TRANSPARENT_2_COLOR MUTED_TRANSPARENT_1_COLOR |
PRIMARY_COLOR PRIMARY_TRANSPARENT_9_COLOR PRIMARY_TRANSPARENT_8_COLOR PRIMARY_TRANSPARENT_7_COLOR PRIMARY_TRANSPARENT_6_COLOR PRIMARY_TRANSPARENT_5_COLOR PRIMARY_TRANSPARENT_4_COLOR PRIMARY_TRANSPARENT_3_COLOR PRIMARY_TRANSPARENT_2_COLOR PRIMARY_TRANSPARENT_1_COLOR |
SUCCESS_COLOR SUCCESS_TRANSPARENT_9_COLOR SUCCESS_TRANSPARENT_8_COLOR SUCCESS_TRANSPARENT_7_COLOR SUCCESS_TRANSPARENT_6_COLOR SUCCESS_TRANSPARENT_5_COLOR SUCCESS_TRANSPARENT_4_COLOR SUCCESS_TRANSPARENT_3_COLOR SUCCESS_TRANSPARENT_2_COLOR SUCCESS_TRANSPARENT_1_COLOR |
|
INFO_COLOR INFO_TRANSPARENT_9_COLOR INFO_TRANSPARENT_8_COLOR INFO_TRANSPARENT_7_COLOR INFO_TRANSPARENT_6_COLOR INFO_TRANSPARENT_5_COLOR INFO_TRANSPARENT_4_COLOR INFO_TRANSPARENT_3_COLOR INFO_TRANSPARENT_2_COLOR INFO_TRANSPARENT_1_COLOR |
WARNING_COLOR WARNING_TRANSPARENT_9_COLOR WARNING_TRANSPARENT_8_COLOR WARNING_TRANSPARENT_7_COLOR WARNING_TRANSPARENT_6_COLOR WARNING_TRANSPARENT_5_COLOR WARNING_TRANSPARENT_4_COLOR WARNING_TRANSPARENT_3_COLOR WARNING_TRANSPARENT_2_COLOR WARNING_TRANSPARENT_1_COLOR |
DANGER_COLOR DANGER_TRANSPARENT_9_COLOR DANGER_TRANSPARENT_8_COLOR DANGER_TRANSPARENT_7_COLOR DANGER_TRANSPARENT_6_COLOR DANGER_TRANSPARENT_5_COLOR DANGER_TRANSPARENT_4_COLOR DANGER_TRANSPARENT_3_COLOR DANGER_TRANSPARENT_2_COLOR DANGER_TRANSPARENT_1_COLOR |
|
PINK_COLOR PINK_TRANSPARENT_9_COLOR PINK_TRANSPARENT_8_COLOR PINK_TRANSPARENT_7_COLOR PINK_TRANSPARENT_6_COLOR PINK_TRANSPARENT_5_COLOR PINK_TRANSPARENT_4_COLOR PINK_TRANSPARENT_3_COLOR PINK_TRANSPARENT_2_COLOR PINK_TRANSPARENT_1_COLOR |
PURPLE_COLOR PURPLE_TRANSPARENT_9_COLOR PURPLE_TRANSPARENT_8_COLOR PURPLE_TRANSPARENT_7_COLOR PURPLE_TRANSPARENT_6_COLOR PURPLE_TRANSPARENT_5_COLOR PURPLE_TRANSPARENT_4_COLOR PURPLE_TRANSPARENT_3_COLOR PURPLE_TRANSPARENT_2_COLOR PURPLE_TRANSPARENT_1_COLOR |
YELLOW_COLOR YELLOW_TRANSPARENT_9_COLOR YELLOW_TRANSPARENT_8_COLOR YELLOW_TRANSPARENT_7_COLOR YELLOW_TRANSPARENT_6_COLOR YELLOW_TRANSPARENT_5_COLOR YELLOW_TRANSPARENT_4_COLOR YELLOW_TRANSPARENT_3_COLOR YELLOW_TRANSPARENT_2_COLOR YELLOW_TRANSPARENT_1_COLOR |
|
INVERSE_COLOR INVERSE_TRANSPARENT_9_COLOR INVERSE_TRANSPARENT_8_COLOR INVERSE_TRANSPARENT_7_COLOR INVERSE_TRANSPARENT_6_COLOR INVERSE_TRANSPARENT_5_COLOR INVERSE_TRANSPARENT_4_COLOR INVERSE_TRANSPARENT_3_COLOR INVERSE_TRANSPARENT_2_COLOR INVERSE_TRANSPARENT_1_COLOR |
WHITE_COLOR WHITE_TRANSPARENT_9_COLOR WHITE_TRANSPARENT_8_COLOR WHITE_TRANSPARENT_7_COLOR WHITE_TRANSPARENT_6_COLOR WHITE_TRANSPARENT_5_COLOR WHITE_TRANSPARENT_4_COLOR WHITE_TRANSPARENT_3_COLOR WHITE_TRANSPARENT_2_COLOR WHITE_TRANSPARENT_1_COLOR |
|