Shadow classes
Add .shadow-{level} to an element, where {level} is a number from 0 to 5.
.shadow-0.shadow-1.shadow-2.shadow-3.shadow-4.shadow-5Shadow on hover
Add .hover-shadow-{level} to an element, where {level} is a number from 0 to 5.
.shadow-0.shadow-1.shadow-2.shadow-3.shadow-4.shadow-5Material shadow
Add .shadow-material-{level} to an element, where {level} is a number from 0 to 5.
.shadow-material-0.shadow-material-1.shadow-material-2.shadow-material-3.shadow-material-4.shadow-material-5Shadow on hover
Add .hover-shadow-{level} to an element, where {level} is a number from 0 to 5.
.shadow-0.shadow-1.shadow-2.shadow-3.shadow-4.shadow-5Block centering classes
Align a block vertically or horizontaly center
| Class name | Description |
|---|---|
.center-v |
Using flexbox to center an element vertically. |
.center-h |
Centering an element horizontally using margin: 0 auto; |
.center-vh |
Using flexbox to center an element vertically and horizontally. |
default
.center-v
.center-h
.center-vh
<span>default</span>
<span class="center-v">.center-v</span>
<span class="center-h">.center-h</span>
<span class="center-vh">.center-vh</span>Rotating classes
This classes are to rotate an inline or inline-block element.
| Class name | Description |
|---|---|
.rotate-45 |
Make an element inline-block and rotate it 45deg. |
.rotate-90 |
Make an element inline-block and rotate it 90deg. |
.rotate-180 |
Make an element inline-block and rotate it 180deg. |
45 deg
90 deg
180 deg
<div class="rotate-45"></div>
<div class="rotate-90"></div>
<div class="rotate-180"></div>Opacity classes
You can set opacity of an element using .opacity-{value} class, where {value} is a x5 number from 0 to 100 (e.g. opacity-50, opacity-75, etc.).
<div class="opacity-75 bg-info"></div>
<div class="opacity-50 bg-info"></div>
<div class="opacity-25 bg-info"></div>Cursor classes
You can set cursor property of an element using .cursor-* utility classes. This class only supports .cursor-default, .cursor-pointer, and .cursor-text.
Default cursor - hover to see
Pointer cursor - hover to see
Text cursor - hover to see
<div class="cursor-default">...</div>
<div class="cursor-pointer">...</div>
<div class="cursor-text">...</div>