Bootstrap Shadows

Shadow utilities are Bootstrap classes used to add visual depth to elements.

They are useful for:

• Cards.
• Navigation elements.
• Images.
• Buttons.
• Modals and panels.
• Dashboard widgets.
• Important content sections.

The shadow class adds a standard box shadow to an element.

<div class="shadow p-4">

    Standard Shadow

</div>

It is useful when you want a visible but moderate shadow effect.

The shadow-sm class adds a smaller and more subtle shadow.

<div class="shadow-sm p-4">

    Small Shadow

</div>

It is useful for elements that need a light visual separation from the background.

The shadow-lg class adds a larger and more noticeable shadow.

<div class="shadow-lg p-4">

    Large Shadow

</div>

It can be useful for prominent cards, panels, or other important interface elements.

The shadow-none class removes the box shadow from an element.

<div class="shadow shadow-none p-4">

    No Shadow

</div>

It is useful when an existing component has a shadow that you want to remove.

Bootstrap provides three common visible shadow sizes:

• shadow-sm — small shadow.
• shadow — standard shadow.
• shadow-lg — large shadow.

<div class="shadow-sm p-3">
    Small
</div>

<div class="shadow p-3">
    Standard
</div>

<div class="shadow-lg p-3">
    Large
</div>

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

<div class="card shadow">

    <div class="card-body">

        <h4>
            Bootstrap Course
        </h4>

        <p>
            Learn Bootstrap step by step.
        </p>

    </div>

</div>

Use shadow-sm when you want a subtle card effect.

<div class="card shadow-sm">

    <div class="card-body">

        Small Card Shadow

    </div>

</div>

Use shadow-lg when you want a more prominent card effect.

<div class="card shadow-lg">

    <div class="card-body">

        Large Card Shadow

    </div>

</div>

A shadow is often combined with padding so the content does not touch the edges of the element.

<div class="shadow p-4">

    <h4>
        Shadow Box
    </h4>

    <p>
        This box has padding and a shadow.
    </p>

</div>

Shadows and rounded corners can be combined to create modern cards.

<div
class="shadow
rounded
p-4">

    Rounded Shadow Box

</div>

The rounded class controls the corners while shadow controls the box shadow.

A shadow can be combined with a border.

<div
class="border
shadow
p-4">

    Border and Shadow

</div>

The border defines the edge of the component while the shadow adds visual depth outside it.

You can apply a shadow directly to an image.

<img
src="photo.jpg"
class="img-fluid shadow"
alt="Example photo">

This can help visually separate an image from its background.

Use shadow-sm when you want a subtle image shadow.

<img
src="photo.jpg"
class="img-fluid shadow-sm"
alt="Example photo">

The shadow-lg class creates a more prominent shadow around an image.

<img
src="photo.jpg"
class="img-fluid shadow-lg"
alt="Example photo">

Shadow utilities can also be applied to buttons.

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

    Start Learning

</button>

Use this effect carefully so that buttons remain visually clear and accessible.

A subtle shadow can be applied to a button using shadow-sm.

<button
class="btn btn-success shadow-sm">

    Save

</button>

A large shadow can be applied with shadow-lg.

<button
class="btn btn-primary shadow-lg">

    Get Started

</button>

Large shadows should be used carefully because they can make small controls look visually heavy.

A container or custom section can use a shadow to visually separate it from the page.

<div
class="container
shadow
p-5">

    <h2>
        Course Section
    </h2>

    <p>
        Bootstrap learning content.
    </p>

</div>

Shadows are often combined with background utilities.

<div
class="bg-light
shadow
p-4">

    Light Background with Shadow

</div>

A suitable background can make the shadow easier to notice.

Spacing utilities can create space between multiple shadowed components.

<div class="shadow p-4 mb-4">

    First Box

</div>

<div class="shadow p-4">

    Second Box

</div>

Here, mb-4 adds bottom margin to the first element.

You can use shadow utilities on multiple cards in a layout.

<div class="row g-4">

    <div class="col-md-4">

        <div class="card shadow-sm">

            <div class="card-body">
                Card One
            </div>

        </div>

    </div>


    <div class="col-md-4">

        <div class="card shadow-sm">

            <div class="card-body">
                Card Two
            </div>

        </div>

    </div>


    <div class="col-md-4">

        <div class="card shadow-sm">

            <div class="card-body">
                Card Three
            </div>

        </div>

    </div>

</div>

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

<nav
class="navbar
navbar-expand-lg
bg-body-tertiary
shadow-sm">

    <div class="container">

        <a
        class="navbar-brand"
        href="#">

            My Website

        </a>

    </div>

</nav>

A small shadow is often enough for navigation elements.

Dashboard applications commonly use small shadows on statistic cards.

<div class="card shadow-sm">

    <div class="card-body">

        <h6>
            Total Students
        </h6>

        <h2>
            250
        </h2>

    </div>

</div>

If an element has a shadow and you want to remove it, use shadow-none.

<div
class="card
shadow-none">

    <div class="card-body">

        No Shadow Card

    </div>

</div>

This is useful when creating a flatter design.

Shadow utilities can be combined with responsive Bootstrap classes, but the basic shadow utilities themselves are not breakpoint-specific.

<div
class="shadow-sm
p-4">

    Responsive Card

</div>

Avoid these common mistakes:

• Using large shadows on every element.
• Using shadows where a simple border would be clearer.
• Creating too much visual depth on a page.
• Using a shadow without enough spacing around the element.
• Using strong shadows on small controls unnecessarily.
• Assuming Bootstrap shadow utilities provide custom colors.
• Creating breakpoint-specific shadow classes that Bootstrap does not provide by default.

Good shadow usage can make a website easier to understand visually.

• Use subtle shadows for normal cards.
• Use larger shadows for important elements.
• Keep shadow usage consistent across similar components.
• Combine shadows with appropriate spacing.
• Use borders when a clear edge is more important than depth.
• Make sure text and controls remain easy to see.
• Avoid using shadows on every element of a page.

The following example creates a simple course card with a small shadow.

<div
class="card
shadow-sm
rounded-3">


    <div class="card-body">


        <h3 class="card-title">

            Bootstrap Course

        </h3>


        <p class="card-text">

            Learn Bootstrap
            step by step.

        </p>


        <span
        class="badge
        bg-success
        rounded-pill">

            60 Lessons

        </span>


        <div class="mt-3">


            <button
            class="btn btn-primary">

                Start Learning

            </button>


        </div>


    </div>


</div>

This complete example combines shadow, border, rounded corners, spacing, background, badges, and buttons.

<div class="container py-5">


    <div
    class="card
    shadow-lg
    border-0
    rounded-4
    overflow-hidden">


        <div
        class="card-header
        bg-primary
        text-white
        p-4">

            <h2 class="mb-0">

                Bootstrap Course

            </h2>

        </div>


        <div class="card-body p-4">


            <span
            class="badge
            bg-success
            rounded-pill
            mb-3">

                60 Lessons

            </span>


            <h3>

                Learn Bootstrap

            </h3>


            <p>

                Learn Bootstrap
                from beginner to
                advanced level.

            </p>


            <button
            class="btn btn-primary
            rounded-pill">

                Start Learning

            </button>


        </div>


    </div>


</div>