Shadow classes
Bootstrap 5 Shadows utilities are used to add or remove shadows to bootstrap components or any HTML element in general. There are a total of four shadow utility classes, three for adding the shadows and one for removing any pre-applied shadow from the element.
| Shadow Classes | Description |
|---|---|
| shadow | Applies the default box shadow to the element. |
| shadow-none | Removes any box shadow from the element. |
| shadow-sm | Adds a small box shadow to the element. |
| shadow-lg | Adds a large box shadow to the element. |
Example: Implementation to add shadow to elements using shadow classes.
HTML
<!DOCTYPE html><html lang="en"><head> <title>Adding shadow to elements</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" /></head><body> <div class="text-center"> <h1 class="text-success">w3wiki</h1> <h3>Adding shadow to elements using Bootstrap5 Classes</h3> <button type="button" class="btn btn-warning shadow-lg"> With Shadow </button> <button type="button" class="btn btn-warning"> Without Shadow </button> </div></body></html> |
Output:
How to Add a Border or Shadow to Elements using Bootstrap 5 Classes ?
To add a border in Bootstrap 5, we can use classes like ‘border' for a full border or border-top, border-end, border-bottom, border-start for specific sides.
For shadows, apply classes like ‘shadow' for a default shadow, shadow-sm for a small shadow, or shadow-lg for a large shadow.
Table of Content
- Shadow classes
- Border Classes