Examples of Bootstrap 5 Shadows
Example 1: In this example, we used the shadow-none and the shadow-lg classes to remove and add shadows to the card component.
<!DOCTYPE html>
<html lang="en">
<head>
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script
src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="container">
<div class="mt-4">
<strong
>Bootstrap 5 Shadows</strong
>
</div>
<div
class="card shadow-none w-25 my-5"
>
<div class="card-header">
<h5>Card 1</h5>
<div
class="card-body shadow-none"
>
This is a card with no
shadow.
</div>
</div>
</div>
<div
class="card shadow-lg w-25 bg-primary"
>
<div class="card-header">
<h5>Card 2</h5>
<div class="card-body">
This is a card with large
shadow.
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: In this example, we used the shadow-sm and shadow classes to add the shadows to the cards.
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<div class="mt-4">
<h1 class="text-success">w3wiki</h1>
<strong>Bootstrap 5 Shadows</strong>
</div>
<div class="card shadow-sm w-25 my-5">
<div class="card-header">
<h5>Card 1</h5>
</div>
<div class="card-body">
This is a card with small shadow.
</div>
</div>
<div class="card shadow w-25">
<div class="card-header">
<h5>Card 2</h5>
</div>
<div class="card-body">
This is a card with default shadow.
</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.2/utilities/shadows/
Bootstrap 5 Shadows
Bootstrap 5 Shadows utility comprises four classes: shadow-none, shadow-sm, shadow, and shadow-lg. They add or remove shadows from components, with `shadow-none` removing any existing shadow and others adding varying shadow sizes.
Bootstrap 5 Shadows:
- Sass: It is a collection of variables and utilities to tweak the values of the shadow by changing the variables in Bootstrap’s source code.
Bootstrap 5 Shadows Classes:
Class | Description |
---|---|
shadow | Apply default box shadow to the element. |
shadow-none | Remove any box shadow from the element. |
shadow-sm | Apply small box shadow to the element. |
shadow-lg | Add a large box shadow to the element. |
Contact Us