Helper classes

 

Text alignment

Add these classes to your elements you wish to align either left, right, or centered.

<div class="text-center"><div>

<div class="text-left"><div>

<div class="text-right"><div>

 

---

Zero element spacing

Removes padding and margin when it is needed.

<div class="zero-top"><div> - Removes any TOP margin and padding.

<div class="zero-bottom"><div> - Removes ANY bottom margin and padding.

<div class="zero-margin"><div> - Removes ALL margin.

<div class="zero-padding"><div> - Removes ALL padding.

<div class="zero-top-padding"><div> - Removes TOP padding.

<div class="zero-bottom-padding"><div> - Removes BOTTOM padding.

<div class="zero-bottom-margin"><div> - Removes BOTTOM margin.

<div class="zero-top-margin"><div> - Removes TOP margin.

 

---

Adding margin to all sides

Adds additional or changes margin around entire element.

Add padding and margin when it is needed.

<div class="m-1"><div> - Adds 1em of margin to all SIDES.

<div class="m-2"><div> - Adds 2em of margin to all SIDES.

<div class="m-3"><div> - Adds 3em of margin to all SIDES.

<div class="m-4"><div> - Adds 4em of margin to all SIDES.

<div class="m-5"><div> - Adds 5em of margin to all SIDES.

 

---

Adding top margin

Adds additional or changes margin where needed.

<div class="mt-1"><div> - Adds 1em of margin to TOP.

<div class="mt-2"><div> - Adds 2em of margin to TOP.

<div class="mt-3"><div> - Adds 3em of margin to TOP.

<div class="mt-4"><div> - Adds 4em of margin to TOP.

<div class="mt-5"><div> - Adds 5em of margin to TOP.

<div class="mt-half"><div> - Adds 0.5em of margin to TOP.

<div class="mt-third"><div> - Adds 0.33em of margin to TOP.

 

---

Adding bottom margin

<div class="mb-1"><div> - Adds 1em of margin to BOTTOM.

<div class="mb-2"><div> - Adds 2em of margin to BOTTOM.

<div class="mb-3"><div> - Adds 3em of margin to BOTTOM.

<div class="mb-4"><div> - Adds 4em of margin to BOTTOM.

<div class="mb-4"><div> - Adds 5em of margin to BOTTOM.

<div class="mb-half"><div> - Adds 0.5em of margin to BOTTOM.

<div class="mb-third"><div> - Adds 0.33em of margin to BOTTOM.

 

---

Adding left margin

<div class="ml-1"><div> - Adds 1em of margin to LEFT.

<div class="ml-2"><div> - Adds 2em of margin to LEFT.

<div class="ml-3"><div> - Adds 3em of margin to LEFT.

<div class="ml-4"><div> - Adds 4em of margin to LEFT.

<div class="ml-4"><div> - Adds 5em of margin to LEFT.

<div class="ml-half"><div> - Adds 0.5em of margin to LEFT.

<div class="ml-third"><div> - Adds 0.33em of margin to LEFT.

 

---

Adding right margin

<div class="mr-1"><div> - Adds 1em of margin to RIGHT.

<div class="mr-2"><div> - Adds 2em of margin to RIGHT.

<div class="mr-3"><div> - Adds 3em of margin to RIGHT.

<div class="mr-4"><div> - Adds 4em of margin to RIGHT.

<div class="mr-5"><div> - Adds 5em of margin to RIGHT.

<div class="mr-half"><div> - Adds 0.5em of margin to RIGHT.

<div class="mr-third"><div> - Adds 0.33em of margin to RIGHT.

 

---

Adding padding to all sides

Adds additional or changes padding around entire element.

<div class="p-1"><div> - Adds 1em of padding to all SIDES.

<div class="p-2"><div> - Adds 2em of padding to all SIDES.

<div class="p-3"><div> - Adds 3em of padding to all SIDES.

<div class="p-4"><div> - Adds 4em of padding to all SIDES.

<div class="p-4"><div> - Adds 5em of padding to all SIDES.

 

---

Adding top padding

Adds additional or changes padding where needed.

<div class="pt-1"><div> - Adds 1em of padding to TOP.

<div class="pt-2"><div> - Adds 2em of padding to TOP.

<div class="pt-3"><div> - Adds 3em of padding to TOP.

<div class="pt-4"><div> - Adds 4em of padding to TOP.

<div class="pt-5"><div> - Adds 5em of padding to TOP.

<div class="pt-half"><div> - Adds 0.5em of padding to TOP.

<div class="pt-third"><div> - Adds 0.33em of padding to TOP.

 

---

Adding bottom padding

Adds additional or changes bottom padding where needed.

<div class="pb-1"><div> - Adds 1em of padding to BOTTOM.

<div class="pb-2"><div> - Adds 2em of padding to BOTTOM.

<div class="pb-3"><div> - Adds 3em of padding to BOTTOM.

<div class="pb-4"><div> - Adds 4em of padding to BOTTOM.

<div class="pb-5"><div> - Adds 5em of padding to BOTTOM.

<div class="pb-half"><div> - Adds 0.5em of padding to BOTTOM.

<div class="pb-third"><div> - Adds 0.33em of padding to BOTTOM.

 

---

Adding left padding

<div class="pl-1"><div> - Adds 1em of padding to LEFT.

<div class="pl-2"><div> - Adds 2em of padding to LEFT.

<div class="pl-3"><div> - Adds 3em of padding to LEFT.

<div class="pl-4"><div> - Adds 4em of padding to LEFT.

<div class="pl-5"><div> - Adds 5em of padding to LEFT.

<div class="pl-half"><div> - Adds 0.5em of padding to LEFT.

<div class="pl-third"><div> - Adds 0.33em of padding to LEFT.

 

---

Adding right padding

<div class="pr-1"><div> - Adds 1em of padding to RIGHT.

<div class="pr-2"><div> - Adds 2em of padding to RIGHT.

<div class="pr-3"><div> - Adds 3em of padding to RIGHT.

<div class="pr-4"><div> - Adds 4em of padding to RIGHT.

<div class="pr-4"><div> - Adds 5em of padding to RIGHT.

<div class="pr-half"><div> - Adds 0.5em of padding to RIGHT.

<div class="pr-third"><div> - Adds 0.33em of padding to RIGHT.

 

---

Borders

<div class="bordered"><div> - Adds default 1px gray border to element.

 

---

Clearfix

<div class="clearfix"><div> - Clear floats by adding .clearfix to the parent element.

 

---

Screenreader

<div class="screenreader"><div> - Makes content visible only to screenreaders.

 

---

Hide Elements

<div class="hidden"><div> - Completely hides the element.