Source Admin
Predefined CSS Classes 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.
| 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 | .table-last-row-no-border-bottom | .width-250 (250px) | .height-250 (250px) | ||||
| .row.row-space-20 | .table-last-row-no-border-top | .width-300 (300px) | .height-300 (300px) | ||||
| .row.row-space-22 | .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 Color | Text Align | Text Overflow |
| .f-s-8 | .f-w-100 | .text-inverse / .text-inverse-light | .text-center | .text-ellipsis |
| .f-s-9 | .f-w-200 | .text-primary / .text-primary-light | .text-left | .text-nowrap |
| .f-s-10 | .f-w-300 | .text-info / .text-info-light | .text-right | |
| .f-s-11 | .f-w-400 | .text-purple / .text-purple-light | ||
| .f-s-12 | .f-w-500 | .text-success / .text-success-light | ||
| .f-s-13 | .f-w-600 | .text-lime / .text-lime-light | ||
| .f-s-14 | .f-w-700 | .text-warning / .text-warning-light | ||
| .f-s-15 | .text-danger / .text-danger-light | |||
| .f-s-16 | ||||
| .f-s-17 | ||||
| .f-s-18 | ||||
| .f-s-19 | ||||
| .f-s-20 | ||||
| .f-s-21 | ||||
| .f-s-22 | ||||
| .f-s-23 | ||||
| .f-s-24 | ||||
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.
| Color Name | Background Class Name | ||
|---|---|---|---|
| Lighter | Normal | Darker | |
| No Background | - | .no-bg | - |
| White | - | .bg-white | - |
| Inverse | .bg-inverse-light | .bg-inverse | .bg-inverse-dark |
| Grey | .bg-grey-light | .bg-grey | .bg-grey-dark |
| Purple | .bg-purple-light | .bg-purple | .bg-purple-dark |
| Red | .bg-red-lighter | .bg-red | .bg-red-darker |
| Primary | .bg-primary-light | .bg-primary | .bg-primary-dark |
| Info | .bg-info-light | .bg-info | .bg-info-dark |
| Success | .bg-success-light | .bg-success | .bg-success-dark |
| Lime | .bg-lime-light | .bg-lime | .bg-lime-dark |
| Warning | .bg-warning-light | .bg-warning | .bg-warning-dark |
| Danger | .bg-danger-light | .bg-danger | .bg-danger-dark |
