Signup/Sign In
PUBLISHED ON: JUNE 4, 2021

Bootstrap Shadow

The shadows are used to draw attention to certain elements by giving them a unique look. The added shadows to the elements with good opacity make the website look more realistic. Bootstrap 5 provides box-shadow utilities to add shadows to the element. The shadows on components are disabled by default.

Example: Adding shadows to the elements using box-utility class

The .shadow class is used to add shadow to the elements. The shadows can also be removed using the .shadow-none class.

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap </title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
  <div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
  <div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
</body>
</html>

Output:

Here is the output of the above program.

shadows to element

Example: Adding Size to the shadows

There are other two classes used to add shadows with variable sizes to the elements. The .shadow-lg class is used to add large shadows to the element whereas the .shadow-sm class is used to add small shadows to the element.

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap </title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
  <div class="shadow-sm p-3 mb-5 bg-body rounded">small shadows</div>
  <div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>
</body>
</html>

Output:

Here is the output of the above program.

Shadow with size

Conclusion

Bootstrap provides an easier way to add shadows using its box-utility classes. The shadows enhance the elements and give them a more realistic look. So start using the shadows class to your bootstrap elements.



About the author: