Bootstrap Shadows

Bootstrap includes a handful of utility classes to add a box-shadow to elements quickly. In modern web design, shadows simulate elevation (the Z-axis). Adding a shadow makes an element appear as if it is floating slightly above the page.

Elevation Levels

Bootstrap provides three distinct sizes of drop-shadows. You simply apply the corresponding class to generate a sense of depth.

• .shadow-sm: A subtle, small shadow. Often used for generic form inputs or buttons.
• .shadow: The standard, regular shadow. Great for cards and small UI panels.
• .shadow-lg: A massive, diffuse shadow. Used for things that float high above the page, like dropdown menus or popup modals.

<!-- A subtle, low-elevation shadow -->
<div class="shadow-sm bg-white rounded"></div>

<!-- The standard shadow size -->
<div class="shadow bg-white rounded"></div>

<!-- A large, highly elevated shadow -->
<div class="shadow-lg bg-white rounded"></div>

Removing Shadows

Sometimes you might use a generic Bootstrap component that inherently has a shadow (like certain Navbar styling or Cards), but you want to make it perfectly flat.

To explicitly delete any box-shadow from an element, just append the .shadow-none utility class.

<!-- Strip any shadow styling off this element completely -->
<div class="shadow-none p-3 bg-white rounded">Completely Flat</div>