Utility Page
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 |
.b-b
|
Border bottom 1px. |
.b-l
|
border left 1px. |
.b-r
|
border right 1px |
| Extra small devices Portrait phones (<544px) | Small devices Landscape phones (≥544px - <768px) | Medium devices Tablets (≥768px - <992px) | Large devices Desktops (≥992px - <1200px) | Extra large devices Desktops (≥1200px) | |
|---|---|---|---|---|---|
.hidden-xs-down
|
Hidden | Visible | Visible | Visible | Visible |
.hidden-sm-down
|
Hidden | Hidden | Visible | Visible | Visible |
.hidden-md-down
|
Hidden | Hidden | Hidden | Visible | Visible |
.hidden-lg-down
|
Hidden | Hidden | Hidden | Hidden | Visible |
.hidden-xl-down
|
Hidden | Hidden | Hidden | Hidden | Hidden |
.hidden-xs-up
|
Hidden | Hidden | Hidden | Hidden | Hidden |
.hidden-sm-up
|
Visible | Hidden | Hidden | Hidden | Hidden |
.hidden-md-up
|
Visible | Visible | Hidden | Hidden | Hidden |
.hidden-lg-up
|
Visible | Visible | Visible | Hidden | Hidden |
.hidden-xl-up
|
Visible | 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 |
Image Radious
| Class | Description |
|---|---|
.rounded
|
For rounded corner to image or any element |
.rounded-top
|
Only top will be rounded not other |
.rounded-right
|
Only right will be rounded |
.rounded-bottom
|
Only bottom will be rounded not other |
.rounded-left
|
Only left will be rounded not other |
.rounded-circle
|
Full circle class |
.rounded-0
|
No radious to the element |
Service Panel
