Utility Classes
Float Classes
| Class | Description |
|---|---|
.pull-left |
Element to the left (float:left). |
.pull-right |
Element to the right(float:right). |
.clearfix |
To Clear floats.(clreafix) |
| Class | Description |
|---|---|
.show |
Element to Show (display: block) |
.hidden |
Element to hide (display: none) |
Text Color Classes
| Class | Description |
|---|---|
.text-muted |
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. |
.text-primary |
Nullam id dolor id nibh ultricies vehicula ut id elit. |
.text-success |
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. |
.text-info |
Nullam id dolor id nibh ultricies vehicula ut id elit. |
.text-warning |
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. |
.text-danger |
Nullam id dolor id nibh ultricies vehicula ut id elit. |
Padding Classes
| Class | Description |
|---|---|
.p-0 |
Padding will be 0px from all side. |
.p-10 |
Padding will be 10px from all side. |
.p-20 |
Padding will be 20px from all side |
Padding Left Classes
| Class | Description |
|---|---|
.p-l-0 |
Only Padding Left will be 0px. |
.p-l-10 |
Only Padding Left will be 10px. |
.p-l-20 |
Only Padding Left will be 20px. |
Padding right Classes
| Class | Description |
|---|---|
.p-r-0 |
Only Padding right will be 0px. |
.p-r-10 |
Only Padding right will be 10px. |
.p-r-20 |
Only Padding right will be 20px. |
Padding top Classes
| Class | Description |
|---|---|
.p-t-0 |
Only Padding top will be 0px. |
.p-t-10 |
Only Padding top will be 10px. |
.p-t-20 |
Only Padding top will be 20px. |
Margin top Classes
| Class | Description |
|---|---|
.m-t-5 |
Only Margin top will be 5px. |
.m-t-10 |
Only Margin top will be 10px. |
.m-t-15 |
Only Margin top will be 15px. |
.m-t-20 |
Only Margin top will be 20px. |
.m-t-30 |
Only Margin top will be 30px. |
.m-t-40 |
Only Margin top will be 40px. |
Margin Bottom Classes
| Class | Description |
|---|---|
.m-b-5 |
Only Margin Bottom will be 5px. |
.m-b-10 |
Only Margin Bottom will be 10px. |
.m-b-15 |
Only Margin Bottom will be 15px. |
.m-b-20 |
Only Margin Bottom will be 20px. |
.m-b-30 |
Only Margin Bottom will be 30px. |
.m-t-40 |
Only Margin top will be 40px. |
Margin Right Classes
| Class | Description |
|---|---|
.m-r-5 |
Only Margin Right will be 5px. |
.m-r-10 |
Only Margin Right will be 10px. |
.m-r-15 |
Only Margin Right will be 15px. |
.m-r-20 |
Only Margin Right will be 20px. |
.m-r-30 |
Only Margin Right will be 30px. |
.m-r-40 |
Only Margin Right will be 40px. |
Margin Left Classes
| Class | Description |
|---|---|
.m-l-5 |
Only Margin Left will be 5px. |
.m-l-10 |
Only Margin Left will be 10px. |
.m-l-15 |
Only Margin Left will be 15px. |
.m-l-20 |
Only Margin Left will be 20px. |
.m-l-30 |
Only Margin Left will be 30px. |
.m-l-40 |
Only Margin Left will be 40px. |
Vertical Align
| Class | Description |
|---|---|
.vt |
Element - vertical align top. |
.vb |
Element - vertical align bottom. |
.vertical-middle |
Element - vertical align middle. |
Font Weight
| Class | Description |
|---|---|
.font-light |
Font weight will be light (300). |
.font-normal |
Font weight will be normal |
.font-bold |
Font weight will be bold (700) |
Border
| Class | Description |
|---|---|
.b-all |
Border 1px all side. |
.b-none |
border none all side |
.b-t |
border top 1px |
| Class | Description |
|---|---|
.b-b |
Border bottom 1px. |
.b-l |
border left 1px. |
.b-r |
border right 1px |
| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
Visible | Hidden | Hidden | Hidden |
.visible-sm-* |
Hidden | Visible | Hidden | Hidden |
.visible-md-* |
Hidden | Hidden | Visible | Hidden |
.visible-lg-* |
Hidden | Hidden | Hidden | Visible |
.hidden-xs |
Hidden | Visible | Visible | Visible |
.hidden-sm |
Visible | Hidden | Visible | Visible |
.hidden-md |
Visible | Visible | Hidden | Visible |
.hidden-lg |
Visible | Visible | Visible | Hidden |
Background Colors
| Class | Description |
|---|---|
.bg-primary |
For Primary background color |
.bg-success |
For Success (green) background color |
.bg-info |
For info (Blue) background color |
| Class | Description |
|---|---|
.bg-warning |
For Warning (yellow) background color |
.bg-danger |
For Danger (red) background color |
.bg-theme |
For Theme background color |
| Class | Description |
|---|---|
.bg-theme-dark |
For theme dark background color |
.bg-inverse |
For inverse (dark) background color |
.bg-purple |
For Purple background color |
Service Panel
- Choose other demos
