Helper Classes

Custom classes to apply to HTML elements to help easily add style.

Helper Classes

Listed below are helper classes that can be applied to HTML elements on Renderosity for styling fonts, elements & etc. These can be used in the comments, articles & forums to achieve customizable style with ease.

In addition, Renderoisty uses Twitter Bootstrap as its CSS framework, therefore any of Bootstrap's Helper classes can also be used; the most common are already included below.

Font Size & Weight & Color

.font-size-24
.font-size-14
.font-size-12
.font-weight-normal
.font-weight-100
.font-weight-200
.lead //Twitter Bootstrap class
.text-muted //Twitter Bootstrap class
.text-primary //Twitter Bootstrap class
.text-success //Twitter Bootstrap class
.text-info //Twitter Bootstrap class
.text-warning //Twitter Bootstrap class
.text-danger //Twitter Bootstrap class

Background Colors

.bg-transparent
.bg-444
.bg-222
.bg-333
.bg-white
.bg-black
.bg-primary //Twitter Bootstrap class
.bg-success //Twitter Bootstrap class
.bg-info //Twitter Bootstrap class
.bg-warning //Twitter Bootstrap class
.bg-danger //Twitter Bootstrap class

Margin

The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

/* Margin None */
.margin-none
.margin-left-none
.margin-right-none
.margin-top-none
.margin-bottom-none

/* Margin Top */
.margin-top-default
.margin-top-2
.margin-top-3
.margin-top-4
.margin-top-5
.margin-top-8
.margin-top-10
.margin-top-15
.margin-top-20
.margin-top-25
.margin-top-30
.margin-top-40
.margin-top-50

/* Margin Bottom */
.margin-bottom-default
.margin-bottom-2
.margin-bottom-3
.margin-bottom-4
.margin-bottom-5
.margin-bottom-8
.margin-bottom-10
.margin-bottom-15
.margin-bottom-20
.margin-bottom-25
.margin-bottom-30
.margin-bottom-40
.margin-bottom-50

/* Margin Left */
.margin-left-2
.margin-left-3
.margin-left-4
.margin-left-5
.margin-left-8
.margin-left-10
.margin-left-15
.margin-left-20
.margin-left-25
.margin-left-30
.margin-left-40
.margin-left-50

/* Margin Right */
.margin-right-2
.margin-right-3
.margin-right-4
.margin-right-5
.margin-right-8
.margin-right-10
.margin-right-15
.margin-right-20
.margin-right-25
.margin-right-30
.margin-right-40
.margin-right-50

Padding

The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.

/* Padding None */
.padding-none
.padding-left-none
.padding-right-none
.padding-top-none
.padding-bottom-none

/* Padding Top */
.padding-top-default
.padding-top-2
.padding-top-3
.padding-top-4
.padding-top-5
.padding-top-8
.padding-top-10
.padding-top-15
.padding-top-20
.padding-top-25
.padding-top-30
.padding-top-40
.padding-top-50

/* Padding Bottom */
.padding-bottom-default
.padding-bottom-2
.padding-bottom-3
.padding-bottom-4
.padding-bottom-5
.padding-bottom-8
.padding-bottom-10
.padding-bottom-15
.padding-bottom-20
.padding-bottom-25
.padding-bottom-30
.padding-bottom-40
.padding-bottom-50

/* Padding Left */
.padding-left-2
.padding-left-3
.padding-left-4
.padding-left-5
.padding-left-8
.padding-left-10
.padding-left-15
.padding-left-20
.padding-left-25
.padding-left-30
.padding-left-40
.padding-left-50

/* Padding Right */
.padding-right-2
.padding-right-3
.padding-right-4
.padding-right-5
.padding-right-8
.padding-right-10
.padding-right-15
.padding-right-20
.padding-right-25
.padding-right-30
.padding-right-40
.padding-right-50

Alignment

/* Alignment */
.txt-align-left
.txt-align-right
.txt-align-center
.img-align-center
.vertical-align-middle
.center-block //Twitter Bootstrap class
.pull-right //Twitter Bootstrap class
.pull-left //Twitter Bootstrap class
.clearfix //Twitter Bootstrap class

Alerts

Provide contextual feedback messages for typical with the handful of available and flexible alert messages by using Twitter Bootstrap's Alerts.

Responsive

For faster mobile-friendly development, use Twitter Bootstrap's Responsive utilities utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

Privacy Notice

This site uses cookies to deliver the best experience. Our own cookies make user accounts and other features possible. Third-party cookies are used to display relevant ads and to analyze how Renderosity is used. By using our site, you acknowledge that you have read and understood our Terms of Service, including our Cookie Policy and our Privacy Policy.