How to Enable Shadows in Bootstrap ?

Last Updated : 18 Apr, 2024

In web development, shadows play a significant role in attracting user attention. By applying shadows to elements on our web pages, we can enhance their visual appearance and attract the user's focus.

Shadows are particularly effective when we apply them on hover, as they create a dynamic.

Shadow classes

Using the Bootstrap 5 Shadows utility classes we can add or remove shadows to bootstrap components or any HTML element. Bootstrap provides four classes, three for adding the shadows and one for removing any pre-applied shadow from the element.

Shadow Classes	Description
shadow-none	Removes any box shadow from the element.
shadow-sm	Adds a small box shadow to the element.
shadow	Applies the default box shadow to the element.
shadow-lg	Adds a large box shadow to the element.

Enable Shadows in Bootstrap 5

At first create a basic HTML structure and include Bootstrap 5 CDN links in your file.
Then create a container element with the classes "container", "d-flex", "justify-content-center", and "align-items-center" to center the content vertically and horizontally within the viewport.
Inside the container, include a HTML div with the class "mt-5" to provide spacing from the top. Add a h1 element with the class "text-success" to display the title.
Using JavaScript, select all elements with the class. And add mouseover event listeners to apply the shadow classes (shadow-sm, shadow, shadow-lg) based on the element's position in the collection.

Example: This example shows the implementation of above explain approach

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>
          Shadows and Background Colors with Bootstrap 5
      </title>
    <!-- Bootstrap CSS -->
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <style>
        .shadow-transition {
            transition: box-shadow 0.3s ease-in-out;
        }
    </style>
</head>

<body class="">
    <!-- vh-100 for full viewport height -->
    <div class="container d-flex justify-content-center 
            align-items-center vh-100">
        <div class="mt-5">
            <h1 class="text-success">
                  How to Enable Shadows in Bootstrap 5
              </h1>
            <div class="row">
                <div class="col-md-6">
                    <div
                        class="p-3 mb-5 bg-light rounded 
                               shadow-transition border">
                        No shadow
                    </div>
                </div>
                <div class="col-md-6">
                    <div
                        class="p-3 mb-5 bg-body rounded 
                               shadow-transition border">
                        Small shadow
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="p-3 mb-5 bg-body rounded text-primary 
                            shadow-transition border border-success">
                        Regular shadow
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="p-3 mb-5 bg-body rounded text-success 
                            shadow-transition border border-primary">
                        Larger shadow
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
    </script>
    <script>
        // Add event listeners to toggle different 
        // shadow classes based on div position
        const divs = 
              document.querySelectorAll('.shadow-transition');
        divs.forEach((div, index) => {
            // Set cursor:pointer for all divs
            div.style.cursor = 'pointer';

            if (index === 1) {
                div.addEventListener('mouseover', () => {
                    div.classList.add('shadow-sm');
                });
                div.addEventListener('mouseleave', () => {
                    div.classList.remove('shadow-sm');
                });
            } else if (index === 2) {
                div.addEventListener('mouseover', () => {
                    div.classList.add('shadow');
                });
                div.addEventListener('mouseleave', () => {
                    div.classList.remove('shadow');
                });
            } else if (index === 3) {
                div.addEventListener('mouseover', () => {
                    div.classList.add('shadow-lg');
                });
                div.addEventListener('mouseleave', () => {
                    div.classList.remove('shadow-lg');
                });
            }
        });
    </script>
</body>

</html>