Utility Classes
statistics, charts and events
- Dashboard
- Utility Classes
Float Classes
| Class | Style Rule | Description |
|---|---|---|
.float-left
|
float: left
|
Element to the left. |
.float-right
|
float: right
|
Element to the right. |
.clearfix
|
To Clear floats |
| Class | Style Rule | Description |
|---|---|---|
.show
|
display: block
|
Element to Show |
.hidden
|
display: none
|
Element to hide |
Text Color Classes
| Class | Style Rule | Description |
|---|---|---|
.text-muted
|
text-color: #8d9ea7
|
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. |
.text-primary
|
text-color: #fb9678
|
Nullam id dolor id nibh ultricies vehicula ut id elit. |
.text-success
|
text-color: #38d57a
|
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. |
.text-info
|
text-color: #03a9f3
|
Nullam id dolor id nibh ultricies vehicula ut id elit. |
.text-warning
|
text-color: #ffcc02
|
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. |
.text-danger
|
text-color: #e6614f
|
Nullam id dolor id nibh ultricies vehicula ut id elit. |
Other Classes: .text-white, .text-facebook, .text-youtube ... |
||
Padding Classes
| Class | Style Rule | Description |
|---|---|---|
.pd-0
|
padding: 0
|
Padding will be 0 from all sides |
.pd-10
|
padding: 0.625rem
|
Padding will be 0.625rem (10px) from all sides |
.pd-20
|
padding: 1.25rem
|
Padding will be 1.25rem (20px) from all sides |
Padding Left-Right
| Class | Style Rule | Description |
|---|---|---|
.pd-l-0
|
padding-left: 0
|
Padding left will be 0. |
.pd-r-10
|
padding-right: 0.625rem
|
Padding right will be 0.625rem (10px). |
.pd-lr-20
|
padding-left: 1.25rem padding-right: 1.25rem
|
Padding left and right will be 1.25rem (20px). |
Padding Top-Bottom
| Class | Style Rule | Description |
|---|---|---|
.pd-t-0
|
padding-top: 0
|
Padding top will be 0 |
.pd-b-10
|
padding-bottom: 0.625rem
|
Padding bottom will be 0.625rem (10px) |
.pd-tb-20
|
padding-top: 1.25rem padding-bottom: 1.25rem
|
Padding top and bottom will be 1.25rem (20px) |
Margin Classes
| Class | Style Rule | Description |
|---|---|---|
.mr-0
|
margin: 0
|
Margin will be 0 from all sides |
.mr-10
|
margin: 0.625rem
|
Margin will be 0.625rem (10px) from all sides |
.mr-20
|
margin: 1.25rem
|
Margin will be 1.25rem (20px) from all sides |
Margin Left-Right
| Class | Style Rule | Description |
|---|---|---|
.mr-l-0
|
margin-left: 0
|
Margin left will be 0. |
.mr-r-10
|
margin-right: 0.625rem
|
Margin right will be 0.625rem (10px). |
.mr-lr-20
|
margin-left: 1.25rem margin-right: 1.25rem
|
Margin left and right will be 1.25rem (20px). |
.padded-reverse
|
margin-left: -1.25rem margin-right: -1.25rem
|
The item would stretch 1.25rem (20px) to the left and 1.25rem (20px) to the right. |
Margin Top-Bottom
| Class | Style Rule | Description |
|---|---|---|
.mr-t-0
|
margin-top: 0
|
Margin top will be 0 |
.mr-b-10
|
margin-bottom: 0.625rem
|
Margin bottom will be 0.625rem (10px) |
.mr-tb-20
|
margin-top: 1.25rem margin-bottom: 1.25rem
|
Margin top and bottom will be 1.25rem (20px) |
Font Classes
| Class | Style Rule | Description |
|---|---|---|
.fs-10
|
font-size: 0.625rem
|
Font size 0.625rem (10px). Ranges from 0.625rem (10px) to 3.125rem (50px). |
.fw-400
|
font-weight: 400
|
Font weight 400. Ranges from 100-900 |
.h1
|
Text displayed with h1 styles. Ranges from h1 to h6. |
Font Families
| Class | Style Rule | Description |
|---|---|---|
.heading-font-family
|
font-family: 'Nunito Sans'
|
Text font family will be that of Headings. Default is "Nunito Sans" |
.content-font-family
|
font-family: 'Roboto'
|
Default is "Roboto" |
.sub-heading-font-family
|
font-family: 'Open Sans'
|
Default is "Open Sans" |
Display Classes
| Class | Style Rule | Description |
|---|---|---|
.hide
|
display: none
|
Hide the element |
.inline
|
display: inline
|
Display the content of the element inline |
.block
|
display: block
|
Display the content of the element in full width |
.inline-block
|
display: inline-block
|
Display the content of the element in its own width |
Other Classes
| Class | Description |
|---|---|
.horizontal-center
|
Element is center aligned horizontally |
.vertical-center
|
Element is center aligned vertically |
.absolute-center
|
Element is center alignef both horizontally and vertically |
Image Thumbails
| Class | Description |
|---|---|
.thumb-xs
|
For small thumbnails. Used as: <figure class="thumb-xs"><img /></figure>
|
.thumb-sm
|
Image size 60x60 |
.thumb-md
|
Image size 120x120 |
.thumb-lg
|
Image size 180x180 |
| 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 Classes
| Class | Description |
|---|---|
.bg-primary
|
Default: #51d2b7
|
.bg-primary-light
|
|
.bg-primary-dark
|
|
.bg-white
|
|
.bg-primary
|
|
| Class |
|---|
.bg-info
|
.bg-success
|
.bg-warning
|
.bg-danger
|
.bg-facebook
|
.bg-twitter
|
| Class |
|---|
.bg-googleplus
|
.bg-linkedin
|
.bg-instagram
|
.bg-pinteres
|
.bg-dribbble
|
.bg-youtube
|
