Class Name | Live Preview | Description |
---|---|---|
.pad-all |
BOX
|
Add paddings. |
.pad-no |
BOX
|
Remove paddings. |
.pad-lft |
BOX
|
Add left padding. |
.pad-rgt |
BOX
|
Add right padding. |
.pad-top |
BOX
|
Add top padding. |
.pad-btm |
BOX
|
Add bottom padding. |
.pad-hor |
BOX
|
Add horizontal paddings. |
.pad-ver |
BOX
|
Add vertical paddings. |
Class Name | Live Preview | Description |
---|---|---|
.mar-all |
BOX
|
Add margins. |
.mar-no |
BOX
|
Remove margins. |
.mar-lft |
BOX
|
Add left margin. |
.mar-rgt |
BOX
|
Add right margin. |
.mar-top |
BOX
|
Add top margin. |
.mar-btm |
BOX
|
Add bottom margin. |
.mar-hor |
BOX
|
Add horizontal margins. |
.mar-ver |
BOX
|
Add vertical margins. |
Class Name | Live Preview | Description |
---|---|---|
.bord-all |
BOX
|
Add borders. |
.bord-no |
BOX
|
Remove all borders. |
.bord-top |
BOX
|
Add top border. |
.bord-btm |
BOX
|
Add bottom border. |
.bord-lft |
BOX
|
Add left border. |
.bord-rgt |
BOX
|
Add right border. |
.bord-hor |
BOX
|
Add horizontal borders. |
.bord-ver |
BOX
|
Add vertical borders. |
Class Name | Live Preview | Description |
---|---|---|
.text-thin |
Sample Text |
Thin font. |
.text-normal |
Sample Text |
Normal font. |
.text-semibold |
Sample Text |
Semibold font. |
.text-bold |
Sample Text |
Bold font. |
.text-xs |
Text |
Extra small text. |
.text-sm |
Text |
Small text. |
.text-2x |
Text |
Big text. |
.text-3x |
Text |
Large text. |
.text-4x |
Text |
Extra large text. |
.text-5x |
Text |
Super large text. |
.unselectable |
Sample Text |
Unselectable text. |
.text-overflow |
This is a really really long text |
Text overflow. |
Class Name | Live Preview | Description |
---|---|---|
.icon-wrap | Wrap icon. | |
.icon-circle | Circle icon. | |
.icon-wrap-xs | Extra small wrap icon. | |
.icon-wrap-sm | Small wrap icon. | |
.icon-wrap-md | Medium wrap icon. | |
.icon-wrap-lg | Large wrap icon. |
Class Name | Live Preview | Description |
---|---|---|
.img-circle | Circle image. | |
.img-xs | Extra small image. | |
.img-sm | Small size image. | |
.img-md | Medium size image. | |
.img-lg | Large size image. |
Class Name | Live Preview | Description |
---|---|---|
.text-light |
Sample Text |
White font. |
.text-muted |
Sample Text |
Gray text. |
.text-primary |
Sample Text |
Primary text. |
.text-info |
Sample Text |
Info text. |
.text-success |
Sample Text |
Success text. |
.text-mint |
Sample Text |
Mint text. |
.text-warning |
Sample Text |
Warning text. |
.text-danger |
Sample Text |
Danger text. |
.text-purple |
Sample Text |
Purple text. |
.text-pink |
Sample Text |
Pink text. |
.text-dark |
Sample Text |
Dark text. |
Class Name | Live Preview | Description |
---|---|---|
.text-lowercase |
Sample Text |
Lowercased text. |
.text-uppercase |
Sample Text |
Uppercased text. |
.text-capitalize |
Sample Text |
Capitalized text. |
.text-left |
Sample Text |
Left-aligned text. |
.text-center |
Sample Text |
Center-aligned text. |
.text-right |
Sample Text |
Right-aligned text. |
.text-xs-left |
Sample Text |
Left-aligned text on extra small screens. |
.text-sm-left |
Sample Text |
Left-aligned text on small screens. |
.text-md-left |
Sample Text |
Left-aligned text on medium screens. |
.text-lg-left |
Sample Text |
Left-aligned text on large screens. |
Class Name | Live Preview | Description |
---|---|---|
.text-xs-center |
Sample Text |
Center-aligned text on extra small screens. |
.text-sm-center |
Sample Text |
Center-aligned text on small screens. |
.text-md-center |
Sample Text |
Center-aligned text on medium screens. |
.text-lg-center |
Sample Text |
Center-aligned text on large screens. |
.text-xs-right |
Sample Text |
Right-aligned text on extra small screens. |
.text-sm-right |
Sample Text |
Right-aligned text on small screens. |
.text-md-right |
Sample Text |
Right-aligned text on medium screens. |
.text-lg-right |
Sample Text |
Right-aligned text on large screens. |
Class Name | Live Preview | Description |
---|---|---|
.bg-light |
BOX
|
White background. |
.bg-gray-light |
BOX
|
Ligth gray background. |
.bg-gray |
BOX
|
Gray background. |
.bg-gray-dark |
BOX
|
Dark gray background. |
.bg-primary |
BOX
|
Primary background. |
.bg-info |
BOX
|
Info background. |
.bg-success |
BOX
|
Success background. |
.bg-mint |
BOX
|
Mint background. |
Class Name | Live Preview | Description |
---|---|---|
.bg-warning |
BOX
|
Warning background. |
.bg-danger |
BOX
|
Danger background. |
.bg-purple |
BOX
|
Purple background. |
.bg-pink |
BOX
|
Pink background. |
.bg-dark |
BOX
|
Dark background. |
.bg-trans |
BOX
|
Transparent background. |
.bg-trans-light |
BOX
|
Background white with opacity. |
.bg-trans-dark |
BOX
|
Background black with opacity. |