Bootstrap5 Borders Subtractive is used to remove borders from the box by defining which side the border is to be removed or we can remove the border from all sides at once.
Bootstrap 5 Borders Subtractive Classes:
- border-0: This class is used to remove borders from all around the element
- border-top-0: This class is used to remove the border from the top edge of the element
- border-end-0: This class is used to remove the border from the right edge of the element
- border-bottom-0: This class is used to remove the border from the bottom of the element
- border-start-0: This class is used to remove the border from the left of the element
Syntax:
<div class="Subtractive-Classes">
...
</div>Example 1: In this example, we removed the border of the card from the top and bottom using the border subtractive 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">
<link href=
rel="stylesheet">
</head>
<body>
<div class="container text-center ">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h5>
Bootstrap 5 Borders Subtractive
</h5>
<h6 class="mt-4">
Cards without Border Subtractive Classes
</h6>
<div class="d-flex justify-content-center">
<div class="m-1 card" style="width: 7.5rem;
height: 5.6rem;">
</div>
<div class="m-1 card" style="width: 7.5rem;
height: 5.6rem;">
</div>
<div class="m-1 card" style="width: 7.5rem;
height: 5.6rem;">
</div>
</div>
<h6 class="mt-4">
Cards with Border Subtractive Classes
</h6>
<div class="d-flex justify-content-center">
<div class="m-1 card border-0" style="width: 7.5rem;
height: 5.6rem;">
<p class="card-text p-2">
All borders subtracted
</p>
</div>
<div class="m-1 card border-top-0" style="width: 7.5rem;
height: 5.6rem;">
<p class="card-text p-2">
Top border subtracted
</p>
</div>
<div class="m-1 card border-bottom-0" style="width: 7.5rem;
height: 5.6rem;">
<p class="card-text p-2">
Bottom border subtracted
</p>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we remove the border of the card from the left and right sides using the border subtractive 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">
<link href=
rel="stylesheet">
</head>
<body>
<div class="container text-center ">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h5>
Bootstrap 5 Borders Subtractive
</h5>
<h6 class="mt-4">
Cards without Border Subtractive Classes
</h6>
<div class="d-flex justify-content-center">
<div class="m-1 card border-dark" style="width: 6.25rem;
height: 5rem;">
</div>
<div class="m-1 card border-dark" style="width: 6.25rem;
height: 5rem;">
</div>
<div class="m-1 card border-dark" style="width: 6.25rem;
height: 5rem;">
</div>
</div>
<h6 class="mt-4">
Cards with Border Subtractive Classes
</h6>
<div class="d-flex justify-content-center">
<div class="m-1 card border-0" style="width: 6.25rem;
height: 5rem;">
<p class="card-text p-2">
All borders subtracted
</p>
</div>
<div class="m-1 card border-start-0 border-dark" style="width: 6.25rem;
height: 5rem;">
<p class="card-text p-2">
start border subtracted
</p>
</div>
<div class="m-1 card border-end-0 border-dark" style="width: 6.25rem;
height: 5rem;">
<p class="card-text p-2">
end border subtracted
</p>
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/utilities/borders/#subtractive