Bootstrap Shadows

Bootstrap Shadows Overview

Bootstrap provides four shadow utilities: shadow-sm for a subtle, barely-there shadow, shadow for a standard, noticeable shadow, shadow-lg for a more pronounced, elevated shadow, and shadow-none to explicitly remove any shadow, often used to override a shadow inherited from a component's default styling.

Shadows are most effective when used sparingly to create visual hierarchy, drawing attention to elevated elements like modals, dropdowns, and featured cards, rather than being applied uniformly across every element on a page.

Bootstrap Shadows Example

<div class="card shadow-sm p-3 mb-3">Subtle shadow card</div>
<div class="card shadow p-3 mb-3">Standard shadow card</div>
<div class="card shadow-lg p-3">Pronounced shadow, feels elevated</div>

<button class="btn btn-primary shadow-none">No shadow button</button>

The three cards demonstrate the shadow scale from subtle to pronounced, useful for signaling increasing visual importance or elevation. The button example shows shadow-none explicitly removing a shadow that might otherwise be applied by custom theme styles.

Top 10 Bootstrap Shadows Examples

These are the shadow utility patterns you'll use to add depth and elevation to UI elements.

Popular Real-World Bootstrap Shadows Examples

These shadow patterns commonly add depth to cards, overlays, and floating UI elements.

Best Practices

• Use shadows to signal elevation or importance, not as a purely decorative default on every element.
• Keep shadow intensity consistent for elements of similar importance across a page.
• Use shadow-sm for everyday cards and shadow-lg only for genuinely elevated content like modals.
• Pair shadows with border-0 on cards for a cleaner, purely shadow-based separation instead of double borders.
• Use shadow-none to intentionally override a shadow inherited from a component's default class.
• Test shadows against both light and dark backgrounds, since contrast affects visibility.
• Avoid combining multiple heavy shadow utilities on nested elements, which can look muddy.

Common Mistakes

• Applying shadow-lg everywhere, flattening the visual hierarchy shadows are meant to create.
• Combining a heavy border and a heavy shadow on the same element, creating a busy, double-outlined look.
• Not testing shadows on dark backgrounds, where default shadows can become nearly invisible.
• Forgetting shadow-none when a component's default theme shadow doesn't fit a specific design.
• Using inconsistent shadow levels for visually similar cards across the same page.
• Relying on shadows alone to indicate interactivity without using cursor or hover state utilities as well.

Key Takeaways

• Bootstrap provides four shadow levels: shadow-sm, shadow, shadow-lg, and shadow-none.
• Shadows should communicate elevation and importance rather than being applied everywhere.
• shadow-none explicitly removes shadows that might come from a component's default styling.
• Consistent shadow usage across similar elements maintains a coherent visual hierarchy.
• Shadows pair well with border-0 for a softer, modern card appearance.