You can easily vertically center things by adding the class valign-wrapperto the container holding the items you want to vertically align.
This should be vertically aligned
These classes are for horizontally aligning content. We have .left-align, .right-alignand .center-align
This should be left aligned
This should be right aligned
This should be center aligned
leftor rightto the element. !importantis used to avoid specificity issues.
| Screen Range | |
|---|---|
.hide
|
Hidden for all Devices |
.hide-on-small-only
|
Hidden for Mobile Only |
.hide-on-med-only
|
Hidden for Tablet Only |
.hide-on-med-and-down
|
Hidden for Tablet and Below |
.hide-on-med-and-up
|
Hidden for Tablet and Above |
.hide-on-large-only
|
Hidden for Desktop Only |
To truncate long lines of text in an ellipsis, add the class truncateto the tag which contains the text. See an example below of a header being truncated inside a card.
This is an extremely long title that will be truncated
The hoverableis 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.