You don't need to create new css class for simple edits.We already did it for you.

Text Align

Right Aligned


This text is right aligned. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.

Left Aligned


In English and most European languages where words are read left-to-right, text is usually aligned "flush left", meaning that the text of a paragraph is aligned on the left-hand side with the right-hand side ragged. This is the default style of text alignment on the World Wide Web for left-to-right text Quotations are often indented.

Center Aligned


Text can also be "centered", or symmetrically aligned along an axis in the middle of a column. This is often used for the title of a work, headlines, and for poems and songs. As with flush-right alignment, centered text is often used to present data in tables. Centered text is considered less readable for a body of text made up of multiple lines because the ragged starting edges make it difficult for the reader to track from one line to the next.

Vertical Align

You can easily vertically center things by adding the class class="valign-wrapper" to the container holding the items you want to vertically align.

This should be vertically aligned

Hiding Content

We provide easy to use classes to hide content on specific screen sizes.

Screen Range Display Test
.hide-on-small-only Hidden for Mobile Only

Check Me !

.hide-on-med-only Hidden for Tablet Only

Check Me !

.hide-on-med-and-down Hidden for Tablet and Below

Check Me !

.hide-on-med-and-up Hidden for Tablet and Above

Check Me !

.hide-on-large-only Hidden for Desktop Only

Check Me !


To truncate long lines of text in an ellipsis, add the class="truncate" to the tag which contains the text. See an exaple below of a header being truncated inside a card.

Normal: This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm.

Truncate: This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm.


The hoverable is a hover class that adds an animation for box shadow as seen below. It can be used on most elements, but meant for use on cards.

Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.