Table of contents
1.
Introduction
2.
What is Borders in Bootstrap
3.
Bootstrap Border Classes
4.
Additive Border Classes
4.1.
Example of Additive Border Classes
4.2.
HTML
5.
Subtractive Border Classes
5.1.
Example of Subtractive Border Classes
5.2.
HTML
6.
Border Color
6.1.
Example of Border Color
6.2.
HTML
7.
Border Radius
7.1.
Example of Border Radius
7.2.
HTML
8.
Border Width
8.1.
Example of Border Width
8.2.
HTML
9.
Frequently Asked Questions
9.1.
How to get rounded border in Bootstrap?
9.2.
How to reduce the border size in Bootstrap?
9.3.
How to add border to grid in Bootstrap?
10.
Conclusion
Last Updated: Sep 21, 2024
Easy

Bootstrap Border

Author Shivani Singh
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

We come across many web pages on the internet with really fascinating UI-UX designs. A lot of creative frameworks are used in creating those web pages. Bootstrap is one of the best frameworks available for it. In this article, we will be discussing the Bootstrap border.

Bootstrap Border

Bootstrap provides many utility classes for borders, colors, orientation, spacing, etc. The Bootstrap border is one of the tools for creating borders around the picture, container, and elements. The border confines the element according to the user's preferences for size, shape, and visibility. Let us now have an in-depth knowledge of the topic: Bootstrap border

What is Borders in Bootstrap

An HTML element is encased in a box known as a box model. The margin, padding, border, and actual content make up these box models. We are more interested in the box models' borders here.

Several components, including the button, images, link, etc., can have their borders styled and add a border radius using border utilities. Additionally, the border can be customized using various colors. We can add a border using Bootstrap's built-in classes like border, border-top, etc.  Borders can be added to an element's start, end, top, or bottom.

The terms "additive classes" and "subtractive classes" refer to the classes that are used to add borders and, respectively, to remove them.

Let us see the various border classes available in Bootstrap. 

Bootstrap Border Classes

The following border classes are available in the bootstrap. 

Border Class

Description

.borderIt gives the element a border on all sides.
.border-topIt is used to give the element's top a border.
.border-bottomIt is applied to give the element's bottom a border.
.border-startIt is utilized to give the start of the element a border.
.border-endIt is utilized to end the element's border.

Additive Border Classes

As previously mentioned, additive classes add borders around HTML elements. Nevertheless, these classes can add borders to some or all of the sides of an HTML element. 

Let us see the additive Bootstrap border classes below:

Additive Border Class

Description

.borderIt gives the element a border on all sides.
.border-topIt is used to give the element's top a border.
.border-bottomIt is applied to give the element's bottom a border.
.border-startIt is utilized to give the left of the element a border.
.border-endIt is utilized to give the right of the element a border.

Let us see an example to understand the additive Bootstrap border classes in a better way.

Example of Additive Border Classes

  • HTML

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 80px;
height: 80px;
margin: 15px;
background-color: #d10d44a5;
background-size: cover;
}
</style>
</head>
<body>
<div class="container">
<h3 style="color:rgb(14, 215, 181);">Additive Bootstrap Border Classes</h3>
<span class="border border-dark"></span>
<span class="border-top border-dark"></span>
<span class="border-end border-dark"></span>
<span class="border-bottom border-dark"></span>
<span class="border-start border-dark"></span>
</div>
</body>
</html>

Output

Additive Border Classes

Subtractive Border Classes

As previously discussed, the sides of an HTML element can have borders removed using subtractive border classes. They can also delete borders from all or some of the sides of the HTML element, similar to additive border classes.

Let us see the additive Bootstrap border classes below:

Subtractive Border Class

Description

.border-0It removes the border from all sides of the element if it exists.
.border-top-0It removes the border from the top of the element if it exists.
.border-bottom-0It removes the border from the bottom of the element if it exists.
.border-left-0It removes the border from the left of the element if it exists.
.border-right-0It removes the border from the right of the element if it exists.

Let us see an example to understand the subtractive Bootstrap border classes in a better way.

Example of Subtractive Border Classes

  • HTML

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 80px;
height: 80px;
margin: 15px;
background-color: #c1c2cf;
background-size: cover;
}
</style>
</head>
<body>
<div class="container">
<h3 style="color:rgb(196, 14, 62);">Subtractive Bootstrap Border Classes</h3>
<span class="border border-dark"></span>
<span class="border border-0 border-dark"></span>
<span class="border border-top-0 border-dark"></span>
<span class="border border-end-0 border-dark"></span>
<span class="border border-bottom-0 border-dark"></span>
<span class="border border-start-0 border-dark"></span>
</div>
</body>
</html>

Output

Subtractive Border Classes

Border Color

Based on specific theme colors, Bootstrap has created a few utility classes that may be used to change the border color of an HTML element.

Let us see all the theme colors in Bootstrap:

Theme Color

Description

. border-primaryThe Bootstrap border box receives a sky-blue border color as a result.
.border-secondaryThe Bootstrap border box receives a greyish border color as a result.
.border-successThe Bootstrap border box receives a green border color as a result.
.border-dangerThe Bootstrap border box receives a red border color as a result.
.border-warningThe Bootstrap border box receives a yellow border color as a result.
.border-infoThe Bootstrap border box receives a blue border color as a result.
.border-lightThe Bootstrap border box receives a light grey border color as a result.
.border-darkThe Bootstrap border box receives a black border color as a result.
.border-whiteThe Bootstrap border box receives a white border color as a result.

Let us see an example to understand Border Color in a better way.

Example of Border Color

  • HTML

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 80px;
height: 80px;
margin: 15px;
background-color: #b9d518;
background-size: cover;
}
</style>
</head>
<body>
<div class="container">
<h2 style="color:rgb(197, 80, 13);">  Bootstrap 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

Border Color

Border Radius

By utilizing specific bootstrap utilities, you may additionally round or curve the corners of HTML components. The radius of the borders surrounding the HTML element can be changed using these utility classes.

Furthermore, the HTML element's sides can have any number of the bootstrap border-radius utilities applied to them.

All the border-radius utilities are given below in the table

Border Radius

Description

. roundedIt is used to round the corners of an HTML element on all four sides.
.rounded-topIt is used to set the top rounded corners of an HTML element.
.rounded-bottomIt is used to set the bottom rounded corners of an HTML element.
.rounded-leftIt is used to set the left-rounded corners of an HTML element.
.rounded-rightIt is used to set the right rounded corners of an HTML element.
.rounded-circleIt is used to set the rounded circle. 
.rounded-0It is used to remove all the rounded corners of an HTML element.

Let us see an example to understand the Border Radius class in a better way.

Example of Border Radius

  • HTML

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 80px;
height: 80px;
margin: 15px;
background-color: #9a9a1b;
background-size: cover;
}
</style>
</head>
<body>
<div class="container">
<h2 style="color:rgb(197, 80, 13);"> Bootstrap Border Radius </h2>
<span class="rounded"></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

Border Radius

Border Width

Bootstrap also provides utility classes for setting up the border width

Let us see an example of the same.

Example of Border Width

  • HTML

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 80px;
height: 80px;
margin: 15px;
background-color: #d10d44a5;
background-size: cover;
}
</style>
</head>
<body>
<div class="container">
<h2 style="color:rgb(197, 80, 13);"> Bootstrap Border Width </h2>
<span class="border border-1 border-dark"></span>
<span class="border border-2 border-dark"></span>
<span class="border border-3 border-dark"></span>
<span class="border border-4 border-dark"></span>
<span class="border border-5 border-dark"></span>
</div>
</body>
</html>

Output

Border Width

Frequently Asked Questions

How to get rounded border in Bootstrap?

To get rounded borders in Bootstrap, use the class rounded. You can adjust the radius with rounded-sm, rounded-lg, or rounded-circle.

How to reduce the border size in Bootstrap?

To reduce border size in Bootstrap, use border utility classes like border-0 for no border or border-1, border-2, etc., for specific thicknesses.

How to add border to grid in Bootstrap?

To add a border to a grid in Bootstrap, apply border utility classes such as border to the grid container or individual grid items.

Conclusion

As we have reached the end of this blog, let us see what we have discussed so far. In this blog, we have discussed the Bootstrap border Class. Then we discussed the additive, and subtractive border classes, border color, border radius, and border width.
 

If you like to learn more, you can check out our articles: 

You may refer to our Guided Path on Code Studios for enhancing your skill set on DSACompetitive ProgrammingSystem Design, etc. Check out essential interview questions, practice our available mock tests, look at the interview bundle for interview preparations, and so much more!

Live masterclass