Border Classes in Bootstrap 5: Styling and Customizing Element Borders

In Bootstrap 5, border classes are used to apply styles and customize the borders of HTML elements. Borders are used to create visual separation and distinction between elements, and can be applied to various types of elements such as divs, buttons, images, and input fields.

Bootstrap provides a set of predefined border utility classes that can be easily applied to elements to control their border styles, sizes, and colors. These border classes can be used in combination with other Bootstrap classes to create responsive and visually appealing UI components.

Here are some commonly used border classes in Bootstrap 5:

Border Style Classes
- border: Adds a default border to the element.
- border-0: Removes the border from the element.
- border-{position}: Adds a border to a specific side of the element, where {position} can be top, bottom, left, or right.
Border Size Classes
- border-{size}: Sets the width of the border, where {size} can be sm (small), md (medium), lg (large), or xl (extra large).
Border Color Classes
border-{color}: Sets the color of the border, where {color} can be primary, secondary, success, danger, warning, info, light, dark, or a custom color code.

These border classes can be combined and used in conjunction with other Bootstrap classes to create custom border styles for elements. For example, to create a button with a red border, you can use the classes btn btn-primary border border-danger on the button element.

Bootstrap border classes are responsive and can be used in different viewport sizes to create consistent border styles across different devices. They provide an easy and efficient way to customize element borders in Bootstrap 5, allowing for visually appealing and responsive web designs.

Example

<!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>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  <link rel="stylesheet" href="css/base.css">
  <style>
   
    body{
      background:aliceblue;
    } 
    
    .row{
      background-color:  darkslategray;
      margin-bottom: 10px;
    } 
    .row div{
      background: #333;
      color:#fff;
    }


  </style>

</head>
<body>
  <div class="container">
      <h2>Border in Bootstrap</h2>
      <div class="row">
        <div class="col-2 p-5 m-1 text-center border border-1 display-3">1</div>
        <div class="col-2 p-5 m-1 text-center border border-2 display-3">2</div>
        <div class="col-2 p-5 m-1 text-center border border-3 display-3">3</div>
        <div class="col-2 p-5 m-1 text-center border border-4 display-3">4</div>
        <div class="col-2 p-5 m-1 text-center border border-5 display-3">5</div>
        <div class="col-2 p-5 m-1 text-center border-top border-5 display-3">6</div>
        <div class="col-2 p-5 m-1 text-center border-end border-5 display-3">7</div>
        <div class="col-2 p-5 m-1 text-center border-bottom border-5 display-3">8</div>
        <div class="col-2 p-5 m-1 text-center border-start border-5 display-3">9</div>
        <div class="col-2 p-5 m-1 text-center border border-0 display-3">10</div>
        <div class="col-2 p-5 m-1 text-center border border-5 border-top-0 display-3">11</div>
        <div class="col-2 p-5 m-1 text-center border border-5 border-end-0 display-3">12</div>
        <div class="col-2 p-5 m-1 text-center border border-5 border-bottom-0 display-3">13</div>
        <div class="col-2 p-5 m-1 text-center border border-5 border-start-0 display-3">14</div>
        <div class="col-2 p-5 m-1 text-center border border-5 border-primary display-3">15</div>
        <div class="col-2 p-5 m-1 text-center border border-5 border-secondary  display-3">16</div>
        <div class="col-2 p-5 m-1 text-center border border-5 border-success  display-3">17</div>
        <div class="col-2 p-5 m-1 text-center border border-5 border-danger  display-3">18</div>
        <div class="col-2 p-5 m-1 text-center border border-5 border-warning display-3">19</div>
        <div class="col-2 p-5 m-1 text-center border border-5 border-info  display-3">20</div>
        <div class="col-2 p-5 m-1 text-center border border-5 border-light  display-3">21</div>
        <div class="col-2 p-5 m-1 text-center border border-5 border-dark display-3">22</div>
        <div class="col-2 p-5 m-1 text-center border border-5 border-white display-3">23</div>
        <div class="col-2 p-5 m-1 text-center border border-5 border-danger  display-3 border-opacity-75">24</div>
        <div class="col-2 p-5 m-1 text-center border border-5 border-danger display-3 border-opacity-50">25</div>
        <div class="col-2 p-5 m-1 text-center border border-5 border-danger display-3 border-opacity-25">26</div>
        <div class="col-2 p-5 m-1 text-center border border-5 border-danger display-3 border-opacity-10">27</div>
      </div>

  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>

<!--
m-margin
p-padding
m-(0-5),auto

t-top
b-bottom
s-start
e-end

x - left & right
y - top & bottom
-->

Live Preview

Border Classes in Bootstrap 5: Styling and Customizing Element Borders

Example

Bootstrap 5.3X Tutorial

components