Shadows
Shadows convey meaning by implying the elevation of elements on a page. According to the principles of Material Design, "shadows provide important visual cues about objects’ depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An object’s elevation determines the appearance of its shadow."
In this adaptation of Material Design for Bootstrap, we have extended Bootstrap's shadow utilities to include all of the elevation options defined by Material Design.
Bootstrap Shadow Utilities
By default, Bootstrap uses the four following shadow utilities, which have been modified to fit the Material Design styling of this toolkit.
.shadow-none
.shadow-sm
.shadow
.shadow-lg
Material Design Shadows Utilities
In addition to the default Bootstrap shadow utilities, this toolkit has been expanded to include the complete set of Material Design elevation variations.
This expanded set of utility classes are named using the format
.shadow-{elevation}
where
elevation
is any number between 0 and 24. See all of the variations in the examples below.
.shadow-0
.shadow-1
.shadow-2
.shadow-3
.shadow-4
.shadow-5
.shadow-6
.shadow-7
.shadow-8
.shadow-9
.shadow-10
.shadow-11
.shadow-12
.shadow-13
.shadow-14
.shadow-15
.shadow-16
.shadow-17
.shadow-18
.shadow-19
.shadow-20
.shadow-21
.shadow-22
.shadow-23
.shadow-24