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
<!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/bootstrap@5.3.0-alpha1/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/bootstrap@5.3.0-alpha1/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>
Output:
Output: Enable Shadows in Bootstrap 5