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
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:
Border Classes
Bootstrap 5 Border utilities allow adding or removing borders from elements. The classes include ‘border’, ‘border-0’, ‘border-top’, ‘border-bottom’, ‘border-left’, and ‘border-right’.
Shadow Classes | Description |
---|---|
border | Adds a border to all sides of the element. |
border-top | Adds a border only to the top of the element. |
border-end | Adds a border only to the end side of the element. |
border-bottom | Adds a border only to the bottom of the element. |
border-start | Adds a border only to the start side of the element. |
Example: Implementation to add border to elements using border classes.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Adding border 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 border to elements using Bootstrap5 Classes </ h3 > < div class = "container d-flex" > < div class = "border-0 w-25" >1</ div > < div class = "border border-3 w-25" >2</ div > < div class = "border border-success border-2 w-25" >3</ div > </ div > </ div > </ body > </ html > |
Output