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.
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.
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.
