Bootstrap - Bootstrap Shadows

Bootstrap Shadows is a utility feature used to add depth and visual separation to HTML elements. Shadows can make cards, panels, buttons, navigation sections, and other interface elements appear elevated above the page. Bootstrap provides predefined shadow classes so developers can add these effects without writing custom CSS.

1. Why Use Shadows in Bootstrap?

A webpage can sometimes look flat when every element has the same visual level. Shadows help establish a visual hierarchy between different sections.

For example, a card containing important information can be visually separated from the page background by adding a shadow.

Bootstrap provides three main shadow utility classes:

  • shadow-sm — Small shadow

  • shadow — Regular shadow

  • shadow-lg — Large shadow

There is also:

  • shadow-none — Removes the shadow

These classes can be applied directly to HTML elements.

2. Small Shadow

The shadow-sm class applies a subtle shadow to an element.

Example:

<div class="shadow-sm p-3 mb-4 bg-body rounded">
    This element has a small shadow.
</div>

Here:

  • shadow-sm adds a small shadow.

  • p-3 adds padding.

  • mb-4 adds bottom margin.

  • bg-body gives the element the body background color.

  • rounded adds rounded corners.

A small shadow is useful when you want a slight separation without making the element appear heavily elevated.

3. Regular Shadow

The shadow class applies Bootstrap's standard shadow.

Example:

<div class="shadow p-4 mb-4 bg-body rounded">
    This element has a regular shadow.
</div>

The regular shadow is stronger than shadow-sm and is commonly used for cards, content boxes, and other important sections.

For example:

<div class="container mt-4">
    <div class="shadow p-4 bg-white rounded">
        <h3>Student Information</h3>
        <p>
            This section contains information about the student.
        </p>
    </div>
</div>

The shadow visually separates the information box from the surrounding page.

4. Large Shadow

The shadow-lg class creates a more prominent shadow.

Example:

<div class="shadow-lg p-5 mb-4 bg-body rounded">
    This element has a large shadow.
</div>

Large shadows should generally be used selectively. If every element on a page uses shadow-lg, the interface can become visually heavy.

It is more appropriate for elements that need strong visual emphasis.

For example:

<div class="shadow-lg p-4 bg-white rounded">
    <h2>Important Notice</h2>
    <p>
        Please read this information carefully before continuing.
    </p>
</div>

5. Removing a Shadow

Bootstrap also provides the shadow-none class.

Example:

<div class="shadow-none p-3 bg-light">
    Shadow has been removed from this element.
</div>

This can be useful when a component receives a shadow from another class or when you want to override the visual appearance.

6. Comparing the Shadow Classes

The four commonly used shadow classes can be understood as follows:

Class Purpose
shadow-sm Adds a subtle shadow
shadow Adds a standard shadow
shadow-lg Adds a prominent shadow
shadow-none Removes the shadow

The exact visual appearance is controlled by Bootstrap's CSS rather than requiring you to define box-shadow manually.

7. Using Shadows with Cards

Cards are one of the most common places to use Bootstrap shadows.

Example:

<div class="card shadow">
    <div class="card-body">
        <h5 class="card-title">Bootstrap Course</h5>
        <p class="card-text">
            Learn Bootstrap utilities and components.
        </p>
        <button class="btn btn-primary">
            Learn More
        </button>
    </div>
</div>

The shadow class adds depth to the card.

You can also use:

<div class="card shadow-sm">

or:

<div class="card shadow-lg">

depending on the desired visual effect.

8. Combining Shadows with Rounded Corners

Shadows often work well with rounded corners.

Example:

<div class="p-4 bg-white shadow rounded">
    <h3>Welcome</h3>
    <p>
        Welcome to the Bootstrap learning section.
    </p>
</div>

Here, rounded controls the corner shape while shadow controls the elevation effect.

These utilities perform different jobs and can be combined on the same element.

9. Shadows on Images

A shadow can also be applied directly to an image.

Example:

<img src="image.jpg"
     class="img-fluid shadow rounded"
     alt="Sample image">

In this example:

  • img-fluid makes the image responsive.

  • shadow adds a shadow.

  • rounded rounds the image corners.

This can make an image stand out from the page background.

10. Shadows on Buttons

Shadows can also be applied to buttons.

Example:

<button class="btn btn-primary shadow">
    Submit
</button>

You can use a smaller shadow:

<button class="btn btn-primary shadow-sm">
    Submit
</button>

However, shadows should not be used excessively on interactive elements because strong visual effects can distract from the button's actual purpose.

11. Shadows on Navigation Elements

A navigation bar can use a shadow to visually separate it from the content below.

Example:

<nav class="navbar bg-body shadow-sm">
    <div class="container">
        <a class="navbar-brand" href="#">
            My Website
        </a>
    </div>
</nav>

The shadow-sm class creates a subtle separation between the navigation area and the main content.

12. Combining Shadows with Background Colors

The shadow becomes easier to see when there is sufficient contrast between the element and its surrounding background.

Example:

<div class="p-4 bg-white shadow rounded">
    <h2>Course Details</h2>
    <p>
        Bootstrap provides several utility classes for designing
        responsive websites.
    </p>
</div>

A white content box against a different page background can clearly demonstrate the effect of the shadow.

13. Multiple Elements with Different Shadows

You can use different shadow levels to establish hierarchy.

Example:

<div class="shadow-sm p-3 mb-3 bg-white rounded">
    Secondary Information
</div>

<div class="shadow p-4 mb-3 bg-white rounded">
    Main Information
</div>

<div class="shadow-lg p-5 bg-white rounded">
    Important Information
</div>

This creates three different levels of visual elevation.

The important principle is to use the strongest shadow for the element that deserves the greatest visual emphasis.

14. Bootstrap Shadow Versus Custom CSS

Without Bootstrap, you might create a shadow using CSS:

.card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

Then apply it to an element:

<div class="card">
    Content
</div>

With Bootstrap, you can simply write:

<div class="card shadow">
    Content
</div>

This makes development faster and reduces the amount of custom CSS required.

15. When Should You Use Each Shadow?

The choice of shadow depends on the importance of the element.

shadow-sm is suitable for subtle separation, such as navigation bars, small information boxes, and secondary content.

shadow is suitable for common elevated elements such as cards, content panels, and forms.

shadow-lg is suitable when an element needs stronger visual emphasis, such as a featured panel or prominent content section.

shadow-none is useful when you want to remove an existing shadow.

16. Complete Example

Here is a simple Bootstrap page demonstrating all four shadow utilities:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Bootstrap Shadows</title>

    <link
        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        rel="stylesheet">
</head>

<body class="bg-light">

    <div class="container py-5">

        <h1 class="mb-4">Bootstrap Shadows</h1>

        <div class="bg-white shadow-sm p-4 mb-4 rounded">
            <h3>Small Shadow</h3>
            <p>
                This element uses the shadow-sm class.
            </p>
        </div>

        <div class="bg-white shadow p-4 mb-4 rounded">
            <h3>Regular Shadow</h3>
            <p>
                This element uses the shadow class.
            </p>
        </div>

        <div class="bg-white shadow-lg p-4 mb-4 rounded">
            <h3>Large Shadow</h3>
            <p>
                This element uses the shadow-lg class.
            </p>
        </div>

        <div class="bg-white shadow-none p-4 rounded">
            <h3>No Shadow</h3>
            <p>
                This element uses the shadow-none class.
            </p>
        </div>

    </div>

</body>
</html>

17. Important Points to Remember

Bootstrap's shadow utilities are mainly designed to provide quick and consistent visual depth without writing custom CSS.

The most important classes are:

shadow-sm
shadow
shadow-lg
shadow-none

They can be combined with other Bootstrap utilities such as:

p-3
p-4
mb-4
bg-white
rounded

For example:

<div class="bg-white shadow p-4 rounded">
    Content
</div>

This combination is particularly useful for creating clean content panels and cards.

Conclusion

Bootstrap Shadows provide a simple way to add depth and visual hierarchy to webpages. Instead of manually writing CSS box-shadow properties, developers can use Bootstrap's predefined shadow-sm, shadow, shadow-lg, and shadow-none classes. These utilities can be combined with Bootstrap's spacing, background, border-radius, card, image, and other utilities to create visually organized interfaces while keeping the HTML relatively simple.