Signup/Sign In

Bootstrap Border

Border utilities are used to style borders and add a border radius to several components like the button, images, link, etc. Border can be also customized with different colors.

In bootstrap, we can add a border by using some built-in classes such as .border, .border-top, etc. Let's understand by creating examples.

Adding Borders using Bootstrap

Add borders using border utilities in bootstrap. Borders can be added to the top, bottom, start, or end of a given element.

Bootstrap Border Classes

The following classes are the border classes in Bootstrap.

Border class Description
.border It is used to add a border to all sides of the element.
.border-top It is used to add a border to the top of the element
.border-bottom It is used to add a border to the bottom of the element.
.border-start It is used to add a border to the start of the element.
.border-end It is used to add a border to the end of the element

Example: Adding borders using Bootstrap

Let's take an example to add borders by using Bootstrap classes.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
  span {
    display: inline-block;
    width: 90px;
    height: 90px;
    margin: 6px;
	background-color:#DCDCDC;
  }
  </style>
</head>
<body>

<div class="container">
 
  <h2> Adding Borders </h2>
  <span class="border border-dark">Border on all side</span>
  <span class="border-right border-dark">Border on right</span>
  <span class="border-left border-dark">Border on left</span>
  <span class="border-top border-dark">Border on top</span>
  <span class="border-bottom border-dark">Border on bottom</span>
  
</div>

</body>
</html>

Output:

Here is the output of the above program.

Adding border

Removing Borders in Bootstrap

If you don't want borders on particular sides, You can do that by removing the borders using bootstrap. Here is the list of classes for removing borders.

Border Classes to Remove Border

Border class Description
.border-0 Removing borders from all side.
.border-top-0 Removing the border from the top of the element.
.border-bottom-0 Removing border from the bottom of the element.
.border-start-0 Removing border from the starting of the element.
.border-end-0 Removing border from ending of the element.

Example: Removing Borders using Bootstrap

Let see an example to remove the border using the bootstrap classes. We used .border-0 to remove border from all the sides. See the example below.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
  span {
    display: inline-block;
    width: 90px;
    height: 90px;
    margin: 6px;
	background-color:#DCDCDC;
  }
  </style>
</head>
<body>

<div class="container">
 
  <h2> Removing Borders </h2>
  <span class="border border-0 border-primary"></span>
  <span class="border border-right-0 border-primary"></span>
  <span class="border border-left-0 border-primary"></span>
  <span class="border border-top-0 border-primary"></span>
  <span class="border border-bottom-0 border-primary"></span>
  
</div>

</body>
</html>

Output:

Here is the output of the above program.

Removing border

Bootstrap Border color

In the above program, you have seen that I have used .border-primary in .border class. It was used so that borders were properly visible to us. Similarly, we can add other contextual classes to add colors to the border.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
  span {
    display: inline-block;
    width: 90px;
    height: 90px;
    margin: 6px;
	background-color:#DCDCDC;
  }
  </style>
</head>
<body>

<div class="container">
 
  <h2>  Border color </h2>
  <span class="border  border-primary"></span>
  <span class="border  border-secondary"></span>
  <span class="border  border-success"></span>
  <span class="border  border-info"></span>
  <span class="border  border-warning"></span>
  <span class="border  border-danger"></span>
  <span class="border  border-dark"></span>
  <span class="border  border-light" style="background-color:white"></span>
  <span class="border  border-white"></span>
</div>

</body>
</html>

Output:

The picture given below is the output of the above program with colorful borders.

Colorful borders

Bootstrap Border radius

The shape of the border can be changed using the .rounded class. This class adds rounded corners to the elements. Let us see different variants of the rounded class.

Example: Making rounded corners using bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
  span {
    display: inline-block;
    width: 90px;
    height: 90px;
    margin: 6px;
	background-color:#DCDCDC;
  }
  </style>
</head>
<body>

<div class="container">
 
  <h2>  Border Radius </h2>
  <span class="rounded-lg"></span>
  <span class="rounded-sm"></span>
  <span class="rounded-top"></span>
  <span class="rounded-bottom"></span>
  <span class="rounded-left"></span>
  <span class="rounded-right"></span>
  <span class="rounded-circle"></span>
  <span class="rounded-0" ></span>
</div>

</body>
</html>

Output:

So you can see that every box has some changes in the border shape.

Border radius

Conclusion

Here, we have learned how to add or remove borders. We have also discussed adding color using contextual classes and modifying border-radius.