Text Utility Classes
These utilities can be added to text or text containers to impact the output of the text. Most of these are self explanitory but are here for quick reference.
text-center| text is justified centertext-right| text is justified righttext-left| text is justified lefttext-normal| - font-weight = normal (similar to fw-400)text-bold| text is bolded (similar to fw-700)lowercase| text is made all lowercaseuppercase| text is made all uppercasecapitalize| text is changed to capitalized case
List Utility Classes
These utilities can be added to an unordered list (<ul>) to change the basic behavior of the list. These are simple utilities. More list-based blocks/components will be added that will do more.
list-bare| removes list markerlist-h| removes list marker and aligns list items horizontal
Default List
- List item #1
- List item #2
- List item #3
- List item #4
list-bare
list-h
- List item #1
- List item #2
- List item #3
- List item #4
Float Utility Classes
These utilities can be added to an image or text container float the item either to the left or right. This will take the item out of the regular flow of the document and can cause some issues. Considering making the items float only at larger breakpoints (TBD) — use sparingly!
float-right| floats content to the rightfloat-left| floats content to the left
Hidden Utility Classes
These utilities can be used to hide elements at specific breakpoints.
hidden-l:Hides the element from 0px → 900pxhidden-xl:Hides the element from 0px → 1080pxhidden-2xl:Hides the element from 0px → 1280px
Width Utility Classes
These utilities can be used to adjut the width on elements.
w-full:Gives the element a width of 100%.