Box shadow

Use the box-shadow utilities to controlling the shadow of an element.

Contents

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

Class	Properties
`.shadow-sm`	box-shadow: 0 2px 4px -1px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31);
`.shadow`	box-shadow: 0 4px 8px -2px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31);
`.shadow-lg`	box-shadow: 0 6px 12px -2px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31);
`.shadow-none`	box-shadow: none;

Basic example

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).

shadow-sm

shadow

shadow-lg

<div class="shadow-sm p-3 bg-white rounded">shadow-sm</div>
<div class="shadow p-3 bg-white rounded">shadow</div>
<div class="shadow-lg p-3 bg-white rounded">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.

shadow-none

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