Bootstrap 5 Shadows

Last Updated : 04 Apr, 2024

Bootstrap 5 Shadows utility comprises four classes: shadow-none, shadow-sm, shadow, and shadow-lg. They add or remove shadows from components, with `shadow-none` removing any existing shadow and others adding varying shadow sizes.

Bootstrap 5 Shadows:

Sass: It is a collection of variables and utilities to tweak the values of the shadow by changing the variables in Bootstrap's source code.

Bootstrap 5 Shadows Classes:

Class	Description
shadow	Apply default box shadow to the element.
shadow-none	Remove any box shadow from the element.
shadow-sm	Apply small box shadow to the element.
shadow-lg	Add a large box shadow to the element.

Examples of Bootstrap 5 Shadows

Example 1: In this example, we used the shadow-none and the shadow-lg classes to remove and add shadows to the card component.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <link
            href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />
        <script
            src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"
        ></script>
    </head>

    <body>
        <div class="container">
            <div class="mt-4">
                <strong
                    >Bootstrap 5 Shadows</strong
                >
            </div>

            <div
                class="card shadow-none w-25 my-5"
            >
                <div class="card-header">
                    <h5>Card 1</h5>
                    <div
                        class="card-body shadow-none"
                    >
                        This is a card with no
                        shadow.
                    </div>
                </div>
            </div>

            <div
                class="card shadow-lg w-25 bg-primary"
            >
                <div class="card-header">
                    <h5>Card 2</h5>
                    <div class="card-body">
                        This is a card with large
                        shadow.
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Output:

bootstrapShadow — Bootstrap 5 Shadows Example Output

Example 2: In this example, we used the shadow-sm and shadow classes to add the shadows to the cards.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
    </script>
</head>

<body>
    <div class="container">
        <div class="mt-4">
            <h1 class="text-success">GeeksforGeeks</h1>
            <strong>Bootstrap 5 Shadows</strong>
        </div>

        <div class="card shadow-sm w-25 my-5">
            <div class="card-header">
                <h5>Card 1</h5>
            </div>
            <div class="card-body">
                This is a card with small shadow.
            </div>
        </div>
        
        <div class="card shadow w-25">
            <div class="card-header">
                <h5>Card 2</h5>
            </div>
            <div class="card-body">
                This is a card with default shadow.
            </div>
        </div>
    </div>
</body>
</html>