Bootstrap - Shadows

This chapter discusses about the box-shadow utilities. Bootstrap provides a set of CSS classes that allows you to apply different types of box shadows to elements.

The predefined classes available are as follows:

Class Description
.shadow-none No shadow effect.
.shadow-sm Adds a small and subtle shadow effect.
.shadow Applies a medium strength shadow effect.
.shadow-lg Applies a large and prominent shadow effect.

Let us see an example:


You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
      <title>Bootstrap - Shadows</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="" rel="stylesheet">
      <script src=""></script>
     <div class="container mt-3">
       <h4>Shadow effect</h4>
       <div><button class="btn shadow-none">Button with no shadow</button></div>
       <div><button class="btn shadow">Button with a subtle shadow</button></div>
       <div><button class="btn shadow-sm">Button with a regular shadow</button></div>
       <div><button class="btn shadow-lg">Button with a larger shadow</button></div>
Kickstart Your Career

Get certified by completing the course

Get Started