###### Utility Classes

statistics, charts and events

Buy Now

##### 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-color-scheme`, `.text-inverse`, `.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-color-scheme` | Default: `#51d2b7`
`.bg-color-scheme-light`
`.bg-color-scheme-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`

John Doe

Epic Cheeseburgers come in all kind of styles.

Cheeseburgers make your knees weak.

Cheeseburgers will never let you down.

They'll also never run around or desert you.

A great cheeseburger is a gastronomical event.

There's a cheesy incarnation waiting for you no matter what you palete preferences are.

If you are a vegan, we are sorry for you loss.