Shadows in Bootstrap with Examples

Bootstrap Shadow is a property that provides shadow to an element with box-shadow utilities, the intensity can vary from user to user. The shadow property can be very much useful when the user needs to highlight something specifically on the web page.

Example 1: The below example represents 4 different shadow intensities from no shadow effect to a high shadow effect. It is implemented using .shadow class within the div element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1
        shrink-to-fit=no">
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
  
    <title>Bootstrap 4 Shadow</title>
</head>
  
<body bgcolor>
    <div class="container">
        <h2>Shadow</h2>
        <div class="shadow-none p-3 mb-5 
            bg-light rounded">No shadow</div>
        <div class="shadow-sm p-3 mb-5 
            bg-white rounded">Small shadow</div>
        <div class="shadow p-3 mb-5 
            bg-white rounded">Regular shadow</div>
        <div class="shadow-lg p-3 mb-5
            bg-white rounded">Larger shadow</div>
    </div>
  
    <!-- jQuery first, then Popper.js, 
        then Bootstrap JS -->
    <script src=
        integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous">
    </script>
      
    <!-- Popper -->
    <script src=
        integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous">
    </script>
      
    <!-- Latest compiled and minified 
        Bootstrap JavaScript -->
    <script src=
        integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous">
    </script>
</body>
  
</html>

chevron_right


Output:

Example 2: The below example represents a hover over shadow box i.e. it shows the shadow when the cursor points on the box and when the cursor is removed from the box the shadow disappears. The intensity of the shadow in this example is high.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" 
                content="IE=edge">
  
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <title>Bootstrap Shadow</title>
  
    <!-- Bootstrap -->
    <link rel="stylesheet" href=
        integrity=
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
  
    <style>
        .box-shadow-hover:hover {
            box-shadow: 0 2px 5px 0 
            rgba(0, 0, 0, 0.5), 0 
            2px 10px 0 rgba(0, 0, 0, 1);
        }
  
        .pointer {
            cursor: pointer;
        }
  
        img {
            width: auto;
            max-height: 100px;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-6 
                            col-xl-4 my-3">
                <div class="card d-block h-100 
                    box-shadow-hover pointer">
                    <div class="pt-3 h-75p 
                        align-items-center d-flex 
                        justify-content-center">
                        <img class="img-fluid w-xs-120p"
                            src=
                            alt="valkyrie ship image">
                    </div>
  
                    <div class="card-body p-4">
                      
                        <hr>
                        <p>
                            Bootstrap Shadow is a property 
                            that provides shadow to an element 
                            with box-shadow utilities, the 
                            intensity can vary from user to 
                            user. The shadow property can be 
                            very much useful when the user needs
                            to highlight something specifically 
                            on the web page.
                        </p>
  
                        <p>
                            Bootstrap Shadow is a property that 
                            provides shadow to an element with 
                            box-shadow utilities, the intensity 
                            can vary from user to user. The 
                            shadow property can be very much 
                            useful when the user needs to 
                            highlight something specifically 
                            on the web page.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
      
    <!-- jQuery (necessary for Bootstrap's 
        JavaScript plugins) -->
        <script src=
        </script>
  
        <!-- Include all compiled plugins (below), 
            or include individual files as needed -->
        <script src=
"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js">
    </script>
</body>
  
</html>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.