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>

---

Common Mistakes to Avoid

---

Try It: A Card That Lifts on Hover

A second example — combining a small shadow with Bootstrap's shadow utilities to suggest interactivity:

<div class="card shadow-sm p-3" style="max-width: 300px;">
    <h5 class="card-title">Pricing Plan</h5>
    <p class="card-text">A subtle shadow makes this card feel clickable.</p>
</div>

---

Frequently Asked Questions