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.
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.
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.
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.
Conclusion
Here, we have learned how to add or remove borders. We have also discussed adding color using contextual classes and modifying border-radius.
