core-logo

Shadows

Add or remove shadows to elements with box-shadow utilities.

Examples

While shadows on components are disabled by default in Bootstrap and can be enabled via $enable-shadows, you can also quickly add or remove a shadow with our box-shadow utility classes. Includes support for .c-shadow-none and three default sizes (which have associated variables to match).

No shadow
Small shadow
Regular shadow
Larger shadow
<div class="c-shadow-none c-p-3 c-mb-5 c-bg-light c-rounded">No shadow</div>
<div class="c-shadow-sm c-p-3 c-mb-5 c-bg-white c-rounded">Small shadow</div>
<div class="c-shadow c-p-3 c-mb-5 c-bg-white c-rounded">Regular shadow</div>
<div class="c-shadow-lg c-p-3 c-mb-5 c-bg-white c-rounded">Larger shadow</div>