Bootstrap 5 Borders Additive
Bootstrap5 Borders Additive classes are mainly used to display an outline around a box and it provides style, color, and radius of an element border on the side we want. For eg: if we want the border only on the top of the box we can have it by using the border-top additive class.
Bootstrap 5 Borders Additive classes:
- border: This class is used to add a border on all the edges around the element.
- border-top: This class is used to add a border from the top edge of the element.
- border-end: This class is used to add a border from the right edge of the element.
- border-bottom: This class is used to add the border from the bottom of the element.
- border-start: This class is used to add the border from the left of the element.
Syntax:
<div class="border-*">
...
</div>
Example 1: In this example, we added the border of the card on the top and bottom sides using the border additive classes.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >Bootstrap 5-GeeksforGeeks </ title >
< link href =
rel = "stylesheet" >
< style >
.bg-light{
width: 130px;
height: 90px;
border-radius: 8px;
}
</ style >
</ head >
< body >
< div class = "container text-center " >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h5 >Bootstrap 5 Borders additive</ h5 >
< h6 class = "my-4" >Cards with Border
additive Classes
</ h6 >
< div class = "d-flex justify-content-center" >
< div class="m-1 bg-light border-danger
border-top">
< p class = "card-text p-2" >
Top border added
</ p >
</ div >
< div class="m-1 bg-light border-danger
border-bottom">
< p class = "card-text p-2" >
Bottom border added
</ p >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we added the border of the card on the left and right sides using the border additive classes.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Bootstrap 5-GeeksforGeeks</ title >
< link href =
rel = "stylesheet" >
< style >
.bg-light{
width: 120px;
height: 80px;
border-radius:8px
}
</ style >
</ head >
< body >
< div class = "container text-center " >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h5 >Bootstrap 5 Borders additive</ h5 >
< h6 class = "my-4" >
Cards with Border additive Classes
</ h6 >
< div class = "d-flex justify-content-center" >
< div class = "m-1 bg-light border-danger border-end" >
< p class = "card-text p-2" >
right border added
</ p >
</ div >
< div class = "m-1 bg-light border-danger border-start" >
< p class = "card-text p-2" >
left border added
</ p >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/utilities/borders/#additive
Last Updated :
16 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...