Box Shadow

The box-shadow utilities to add or remove the shadow of an element.

Basic usage

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 .shadow-none and three default sizes (which have associated variables to match).

<div class="shadow-sm ..."></div>
<div class="shadow ..."></div>
<div class="shadow-md ..."></div>
<div class="shadow-lg ..."></div>

Removing the shadow

Use shadow-none to remove an existing box shadow from an element. This is most commonly used to remove a shadow that was applied at a smaller breakpoint.

<div class="shadow-none ..."></div>

Hover state

The utility classes supports hover states, using the following format .shadow-*-hover. For example, use shadow-lg-hover to only apply the shadow-lg utility on hover.