Bootstrap 5 Borders Additive

Last Updated : 16 Dec, 2022

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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
          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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
          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

Comment

Explore