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-5


Shadow 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-5


Material 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-5


Shadow 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-5

Block 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>