Text Alignment Classes
Modify the alignment of the content. Mostly used for text but in some cases can also be used for other content.
class="text-align-left"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut lacinia ligula. Proin consectetur velit a mollis auctor. Cras ut rutrum tortor, ut lacinia urna. Phasellus fringilla massa quis libero aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer at molestie diam. Sed lobortis diam eros, hendrerit sodales neque mollis sed. Vestibulum quis arcu id quam mollis molestie non eu eros. In vehicula ex risus, non convallis arcu tempus ac.
class="text-align-right"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut lacinia ligula. Proin consectetur velit a mollis auctor. Cras ut rutrum tortor, ut lacinia urna. Phasellus fringilla massa quis libero aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer at molestie diam. Sed lobortis diam eros, hendrerit sodales neque mollis sed. Vestibulum quis arcu id quam mollis molestie non eu eros. In vehicula ex risus, non convallis arcu tempus ac.
class="text-align-center"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut lacinia ligula. Proin consectetur velit a mollis auctor. Cras ut rutrum tortor, ut lacinia urna. Phasellus fringilla massa quis libero aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer at molestie diam. Sed lobortis diam eros, hendrerit sodales neque mollis sed. Vestibulum quis arcu id quam mollis molestie non eu eros. In vehicula ex risus, non convallis arcu tempus ac.
class="text-align-justify"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut lacinia ligula. Proin consectetur velit a mollis auctor. Cras ut rutrum tortor, ut lacinia urna. Phasellus fringilla massa quis libero aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer at molestie diam. Sed lobortis diam eros, hendrerit sodales neque mollis sed. Vestibulum quis arcu id quam mollis molestie non eu eros. In vehicula ex risus, non convallis arcu tempus ac.
Image Classes
Modify how a image is displayed.
class="image-cover"
Apply the class to the parent and the child image will then cover the parent.
Don't forget to set a height to the parent!
TIP: You can use the vheight classes for this
Mouse Pointer
class="mousepointer"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut lacinia ligula. Proin consectetur velit a mollis auctor. Cras ut rutrum tortor, ut lacinia urna. Phasellus fringilla massa quis libero aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer at molestie diam. Sed lobortis diam eros, hendrerit sodales neque mollis sed. Vestibulum quis arcu id quam mollis molestie non eu eros. In vehicula ex risus, non convallis arcu tempus ac.
Opacity Classes
Modify the opacity of the element the class is used on. This allows for quick transparency settings.
class="opacity-#" Where # ranges from 0 - 100 with increments of 5
| 0 | 5% | 10% | 15% | 20% |
| 25% | 30% | 35% | 40% | 45% |
| 50% | 55% | 60% | 65% | 70% |
| 75% | 80% | 85% | 90% | 95% |
| 100% |
Z-Index Classes
Modify the z-index of the element the class is used on. This allows for quick changing of the stack order.
class="zindex-#" Where # ranges from -10 - 10 with increments of 1
View Height Classes
Modify the minimal height of the element the class is used on by assigning a view height to it.
class="vheight-#" Where # ranges from 0 - 100 with increments of 1
class="vheight-5"
class="vheight-25"
class="vheight-41"
View Width Classes
Modify the minimal width of the element the class is used on by assigning a view width to it.
class="vwidth-#" Where # ranges from 0 - 100 with increments of 1
class="vwidth-5"
class="vwidth-50"
class="vwidth-93"
Margin Classes
Modify the margin of the element the class is used on
class="margin-#" Where # ranges from 0 - 100 with increments of 1
Individual Settings
class="margin-top-#" Where # ranges from 0 - 100 with increments of 1
class="margin-bottom-#" Where # ranges from 0 - 100 with increments of 1
class="margin-left-#" Where # ranges from 0 - 100 with increments of 1
class="margin-right-#" Where # ranges from 0 - 100 with increments of 1
No Margin Settings
class="no-margin-all"
class="no-margin-top"
class="no-margin-bottom"
class="no-margin-left"
class="no-margin-right"
class="margin-10 no-margin-left"
class="margin-37"
class="margin-left-14"
Padding Classes
Modify the padding of the element the class is used on
class="padding-#" Where # ranges from 0 - 100 with increments of 1
Individual Settings
class="padding-top-#" Where # ranges from 0 - 100 with increments of 1
class="padding-bottom-#" Where # ranges from 0 - 100 with increments of 1
class="padding-left-#" Where # ranges from 0 - 100 with increments of 1
class="padding-right-#" Where # ranges from 0 - 100 with increments of 1
No padding Settings
class="no-padding-all"
class="no-padding-top"
class="no-padding-bottom"
class="no-padding-left"
class="no-padding-right"