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

Class	Properties
`.shadow-sm`	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
`.shadow`	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
`.shadow-md`	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
`.shadow-lg`	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
`.shadow-none`	box-shadow: none;

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

shadow-sm

shadow

shadow-md

shadow-lg

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

shadow-none

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

Edit this page on Github

Last edited by zhengchun on November 30, 2023

Box Shadow

Basic usage

Removing the shadow