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 | .width-250 (250px) | .height-250 (250px) | |||||
| .row.row-space-20 | .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) | ||||||
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-center | .text-ellipsis |
| .f-s-9 | .f-w-200 | .text-primary | .text-left | |
| .f-s-10 | .f-w-300 | .text-success | .text-right | |
| .f-s-11 | .f-w-400 | .text-danger | ||
| .f-s-12 | .f-w-500 | .text-info | ||
| .f-s-13 | .f-w-600 | .text-warning | ||
| .f-s-14 | .f-w-700 | .text-white | ||
| .f-s-15 | ||||
| .f-s-16 | ||||
| .f-s-17 | ||||
| .f-s-18 | ||||
| .f-s-19 | ||||
| .f-s-20 | ||||
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 | ||||
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 |
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 | - |
| Silver | .bg-silver-lighter | .bg-silver | .bg-silver-darker |
| Black | .bg-black-lighter | .bg-black | .bg-black-darker |
| Red | .bg-red-lighter | .bg-red | .bg-red-darker |
| Orange | .bg-orange-lighter | .bg-orange | .bg-orange-darker |
| Yellow | .bg-yellow-lighter | .bg-yellow | .bg-yellow-darker |
| Green | .bg-green-lighter | .bg-green | .bg-green-darker |
| Blue | .bg-blue-lighter | .bg-blue | .bg-blue-darker |
| Aqua | .bg-aqua-lighter | .bg-aqua | .bg-aqua-darker |
| Purple | .bg-purple-lighter | .bg-purple | .bg-purple-darker |