Helper ClassesHeader 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.
| Generals | Border | Width | Height | Overflow |
|---|---|---|---|---|
| .clearfix | .border-top | .width-full (100%) | .height-full (100%) | .overflow-auto |
| .center-block | .border-left | .width-lg (600px) | .height-lg (600px) | .overflow-visible |
| .hide | .border-right | .width-md (450px) | .height-md (450px) | .overflow-scroll |
| .show | .border-bottom | .width-sm (300px) | .height-sm (300px) | .overflow-x-hidden |
| .invisible | .border-left | .width-xs (150px) | .height-xs (150px) | .overflow-x-visible |
| .text-hide | .no-border | .width-50 (50px) | .height-50 (50px) | .overflow-x-scroll |
| .hidden | .border-primary | .width-100 (100px) | .height-100 (100px) | .overflow-y-hidden |
| .affix | .border-success | .width-150 (150px) | .height-150 (150px) | .overflow-y-visible |
| .inline-block | .border-warning | .width-200 (200px) | .height-200 (200px) | .overflow-y-scroll |
| .block | .border-info | .width-250 (250px) | .height-250 (250px) | |
| .verticle-align-top | .border-danger | .width-300 (300px) | .height-300 (300px) | |
| .verticle-align-middle | .border-orange | .width-350 (350px) | .height-350 (350px) | |
| .verticle-align-bottom | .border-pink | .width-400 (400px) | .height-400 (400px) | |
| .verticle-align-inherit | .border-purple | .width-450 (450px) | .height-450 (450px) | |
| .pull-left | .border-grey | .width-500 (500px) | .height-500 (500px) | |
| .pull-right | .border-black | .width-550 (550px) | .height-550 (550px) | |
| .pull-none | .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.
| Font Size | Font Weight | Text Color | Text Align | Text Transformation |
|---|---|---|---|---|
| .fz10 | .fw300 | .text-muted | .text-center | .text-lowercase |
| .fz11 | .fw400 | .text-primary | .text-left | .text-uppercase |
| .fz12 | .fw500 | .text-success | .text-right | .text-capitalize |
| .fz13 | .fw600 | .text-danger | .text-justify | |
| .fz14 | .fw700 | .text-info | .text-nowrap | |
| .fz16 | .text-warning | |||
| .fz18 | .text-orange | |||
| .fz20 | .text-pink | |||
| .fz25 | .text-purple | |||
| .fz30 | .text-grey | |||
| .text-black | ||||
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.
x: 3px s: 5px m: 10px sm: 15px l: 20px sl: 25px xl: 30px sxl: 35px xxl: 40px
| Margin All | Margin Top | Margin Right | Margin Bottom | Margin Left |
|---|---|---|---|---|
| .man | .mtn | .mrn | .mbn | .mln |
| .max | .mtx | .mrx | .mbx | .mlx |
| .mas | .mts | .mrs | .mbs | .mls |
| .mam | .mtm | .mrm | .mbm | .mlm |
| .masm | .mtsm | .mrsm | .mbsm | .mlsm |
| .mal | .mtl | .mrl | .mbl | .mll |
| .masl | .mtsl | .mrsl | .mbsl | .mlsl |
| .maxl | .mtxl | .mrxl | .mbxl | .mlxl |
| .masxl | .mtsxl | .mrsxl | .mbsxl | .mlsxl |
| .maxxl | .mtxxl | .mrxxl | .mbxxl | .mlxxl |
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.
x: 3px s: 5px m: 10px sm: 15px l: 20px sl: 25px xl: 30px sxl: 35px xxl: 40px
| Padding All | Padding Top | Padding Right | Padding Bottom | Padding Left |
|---|---|---|---|---|
| .pan | .ptn | .prn | .pbn | .pln |
| .pax | .ptx | .prx | .pbx | .plx |
| .pas | .pts | .prs | .pbs | .pls |
| .pam | .ptm | .prm | .pbm | .plm |
| .pasm | .ptsm | .prsm | .pbsm | .plsm |
| .pal | .ptl | .prl | .pbl | .pll |
| .pasl | .ptsl | .prsl | .pbsl | .plsl |
| .paxl | .ptxl | .prxl | .pbxl | .plxl |
| .pasxl | .ptsxl | .prsxl | .pbsxl | .plsxl |
| .paxxl | .ptxxl | .prxxl | .pbxxl | .plxxl |