Helper Classes
Margin
| Class Name | Preview | Description |
|---|---|---|
| .m-10 |
BOX
|
Margin 10px |
| .m-20 |
BOX
|
Margin 20px |
| .m-t-0 |
BOX
|
No margin top |
| .m-t-10 |
BOX
|
Margin top 10px |
| .m-t-20 |
BOX
|
Margin top 20px |
| .m-b-0 |
BOX
|
Margin bottom 0 |
| .m-b-10 |
BOX
|
Margin bottom 10px |
| .m-b-20 |
BOX
|
Margin bottom 20px |
| .m-l-0 |
BOX
|
Margin left 0 |
| .m-l-10 |
BOX
|
Margin left 10px |
| .m-l-20 |
BOX
|
Margin left 20px |
| .m-r-0 |
BOX
|
Margin right 0 |
| .m-r-10 |
BOX
|
Margin right 10px |
| .m-r-20 |
BOX
|
Margin right 20px |
Padding
| Class Name | Preview | Description |
|---|---|---|
| .p-10 |
BOX
|
Padding 10px |
| .p-20 |
BOX
|
Padding 20px |
| .p-t-0 |
BOX
|
No padding top |
| .p-t-10 |
BOX
|
Padding top 10px |
| .p-t-20 |
BOX
|
Padding top 20px |
| .p-b-0 |
BOX
|
Padding bottom 0 |
| .p-b-10 |
BOX
|
Padding bottom 10px |
| .p-b-20 |
BOX
|
Padding bottom 20px |
| .p-l-0 |
BOX
|
Padding left 0 |
| .p-l-10 |
BOX
|
Padding left 10px |
| .p-l-20 |
BOX
|
Padding left 20px |
| .p-r-0 |
BOX
|
Padding right 0 |
| .p-r-10 |
BOX
|
Padding right 10px |
| .p-r-20 |
BOX
|
Padding right 20px |
Borders
| Class Name | Preview | Description |
|---|---|---|
| .border |
BOX
|
Border |
| .no-border |
BOX
|
No Border |
| .border-top |
BOX
|
Border top |
| .border-bottom |
BOX
|
Border bottom |
| .border-left |
BOX
|
Border left |
| .border-right |
BOX
|
Border right |
| .border-hor |
BOX
|
Border hor |
| .border-ver |
BOX
|
Border ver |
Images
| Class Name | Preview | Description |
|---|---|---|
| .img-circle |
|
Image Circle |
| .img-rounded |
|
Image Rounded |
| .img-thumbnail |
|
Image Thumbnail |
| .img-sm |
|
Image Small |
| .img-md |
|
Image Medium |
| .img-lg |
|
Image Large |
Text
| Class Name | Preview | Description |
|---|---|---|
| .f-10 |
Your Text |
Font size 10 |
| .f-12 |
Your Text |
Font size 12 |
| .f-14 |
Your Text |
Font size 14 |
| .f-16 |
Your Text |
Font size 16 |
| .f-18 |
Your Text |
Font size 18 |
| .f-20 |
Your Text |
Font size 20 |
| .f-24 |
Your Text |
Font size 24 |
| .f-32 |
Your Text |
Font size 32 |
| .bold |
Your Text |
Bold |
| .t-center |
Your Text |
Text center |
| .t-left |
Your Text |
Text left |
| .t-right |
Your Text |
Text right |
| .t-right |
Your Text is too long for the container so it will be cut to preserv your CSS. |
Text ellipsis |
| .line-through |
Your Text. |
Line Through |
| .text-sm |
Your Text. |
Text Small |
| .text-2x |
Your Text. |
Text bigger |
| .text-3x |
Your Text. |
Text Very bigger |
Text Colors
| Class Name | Preview | Description |
|---|---|---|
| .c-primary |
Your Text Color |
Color primary |
| .c-red |
Your Text Color |
Color red |
| .c-blue |
Your Text Color |
Color blue |
| .c-purple |
Your Text Color |
Color purple |
| .c-brown |
Your Text Color |
Color brown |
| .c-orange |
Your Text Color |
Color orange |
| .c-green |
Your Text Color |
Color green |
| .c-gray |
Your Text Color |
Color gray |
| .c-yellow |
Your Text Color |
Color yellow |
| .c-light |
Your Text Color |
Color light |
| .c-gray-light |
Your Text Color |
Color gray light |
| .c-white |
Your Text Color |
Color white |
Background Colors
| Class Name | Preview | Description |
|---|---|---|
| .bg-primary |
BOX
|
Background primary |
| .bg-blue |
BOX
|
Background blue |
| .bg-aero |
BOX
|
Background aero |
| .bg-yellow |
BOX
|
Background yellow |
| .bg-orange |
BOX
|
Background orange |
| .bg-red |
BOX
|
Background red |
| .bg-purple |
BOX
|
Background purple |
| .bg-pink |
BOX
|
Background pink |
| .bg-green |
BOX
|
Background green |
| .bg-white |
BOX
|
Background white |
| .bg-light |
BOX
|
Background light |
| .bg-dark |
BOX
|
Background dark |
Border Radius
| Class Name | Preview | Description |
|---|---|---|
| .bd-0 |
BOX
|
No border radius |
| .bd-3 |
BOX
|
border radius 3px |
| .bd-6 |
BOX
|
border radius 6px |
| .bd-9 |
BOX
|
border radius 9px |
| .bd-full |
BOX
|
border radius 50% |
