Shadowclasses
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 centeringclasses
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>Rotatingclasses
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. |
45deg
90deg
180deg
<div class="rotate-45"></div><div class="rotate-90"></div><div class="rotate-180"></div>Opacityclasses
You can set opacity of an element using .opacity-{value}class, where {value}is a x5number 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>Cursorclasses
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>