BootstrapHow-ToBeginner · 3 min read

How to Use Shadow Utilities in Bootstrap: Simple Guide

In Bootstrap, you can add shadows to elements using built-in classes like shadow-sm, shadow, and shadow-lg. Simply add one of these classes to your HTML element to apply a small, regular, or large shadow respectively.

📐

Syntax

Bootstrap provides three main shadow utility classes to add shadows to elements:

shadow-sm: Adds a small shadow.
shadow: Adds a regular default shadow.
shadow-lg: Adds a larger, more prominent shadow.

Just add one of these classes to any element's class attribute to apply the shadow effect.

html

<div class="shadow-sm p-3 mb-2 bg-white rounded">Small shadow</div>
<div class="shadow p-3 mb-2 bg-white rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-2 bg-white rounded">Large shadow</div>

Output

Three white boxes stacked vertically with rounded corners and shadows: the first with a small shadow, the second with a regular shadow, and the third with a large shadow.

💻

Example

This example shows how to use shadow utilities on cards to create depth and highlight content visually.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Shadow Utilities Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">
  <div class="container">
    <h2>Bootstrap Shadow Utilities</h2>
    <div class="card shadow-sm mb-3" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Small Shadow</h5>
        <p class="card-text">This card uses <code>shadow-sm</code> for a subtle shadow effect.</p>
      </div>
    </div>
    <div class="card shadow mb-3" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Regular Shadow</h5>
        <p class="card-text">This card uses <code>shadow</code> for a normal shadow effect.</p>
      </div>
    </div>
    <div class="card shadow-lg" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Large Shadow</h5>
        <p class="card-text">This card uses <code>shadow-lg</code> for a strong shadow effect.</p>
      </div>
    </div>
  </div>
</body>
</html>

Output

A webpage with three stacked cards each showing different shadow sizes: small, regular, and large shadows around white card boxes on a light gray background.

⚠️

Common Pitfalls

Some common mistakes when using Bootstrap shadow utilities include:

Not including Bootstrap CSS, so shadow classes have no effect.
Using multiple shadow classes on the same element, which can cause unexpected results.
Applying shadow classes to elements with transparent backgrounds, making shadows hard to see.
Forgetting to add padding or margin, so shadows may be clipped or not visible.

Always ensure your element has a visible background and enough space around it to show the shadow clearly.

html

<!-- Wrong: multiple shadow classes -->
<div class="shadow shadow-lg p-3 mb-2 bg-white rounded">Multiple shadows (wrong)</div>

<!-- Right: only one shadow class -->
<div class="shadow-lg p-3 mb-2 bg-white rounded">Single shadow (correct)</div>

Output

Two white boxes with rounded corners: the first tries to use two shadow classes but only the last one applies properly; the second uses a single shadow-lg class and shows a large shadow correctly.

📊

Quick Reference

Class	Effect
shadow-sm	Small shadow for subtle depth
shadow	Default regular shadow
shadow-lg	Large shadow for strong emphasis

✅

Key Takeaways

Use one of the shadow utility classes: shadow-sm, shadow, or shadow-lg to add shadows.

Make sure your element has a visible background and enough space to show the shadow.

Do not combine multiple shadow classes on the same element.

Include Bootstrap CSS for shadow utilities to work.

Shadows help create depth and highlight elements visually.