How to Add a Border or Shadow to Elements using Bootstrap 5 Classes ?
Last Updated :
26 Feb, 2024
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.
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 >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "text-center" >
< h1 class = "text-success" >GeeksforGeeks</ 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 >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "text-center" >
< h1 class = "text-success" >GeeksforGeeks</ 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
Share your thoughts in the comments
Please Login to comment...