Utility Styles

Quick Tip
When adding manual HTML to your pages, you can disable automatic paragraph formatting by adding a custom field name of wpautop with the value of false.

If you like to enter manual HTML into your content editor, then you know it’s always helpful to have a little more control. These simple utility classes will help you achieve great results without the need to keep adding rogue styles to your stylesheets.

Available Helper Classes

  • .remove-bottom
    • removes bottom padding/margin spacing
  • .remove-top
    • removes top padding/margin spacing
  • .half-bottom
    • removes 10px from bottom margin
  • .add-bottom
    • adds 20px to bottom margin
  • .add-top
    • adds 20px to top margin
  • .alignright
    • aligns the element to the right
  • .alignleft
    • aligns the element to the left
  • .center
    • centers the element
  • .nopad
    • removes all padding and margins

Example Usage:

<h1 class="remove-bottom">Heading with no bottom margin</h1>
<h2 class="remove-top">Heading with no top margin</h2>

The above code would produce:

Heading with no bottom margin

Heading with no top margin

All classes can be applied to any element e.g; P, DIV, IMG, etc.