Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Borders in bootstrap with Examples
The borders in bootstrap is used to add an outline to the HTML elements such as div, tables, etc. These borders helps to make the elements visually distinct. With Bootstrap, we can add borders, remove borders, specify border colors, modify border width, and create rounded borders. In Bootstrap, there are different classes to add, remove or modify borders.
Additive Border Classes
To add a border to HTML element, we use the following classes −
.border − This class will add a border around the element.
.border-top − This will add border on top edge of the element.
.border-bottom − This will add border on bottom edge of the element.
.border-left − This class will add border on left edge of the element.
.border-right − This will add border on right edge of the element.
Example
In the following example, we are trying to add borders to the HTML <span> element using the "Additive Border Classes" −
<!DOCTYPE html>
<html>
<head>
<title>Borders in Bootstrap</title>
<!-- Link Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- Link Bootstrap JS and JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
/* CSS for Square boxes */
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
background-color: lightskyblue;
}
</style>
</head>
<body>
<!-- Additive border classes -->
<div>
<h2>Additive Border Classes</h2>
<span class="border"></span>
<span class="border-top border-dark"></span>
<span class="border-left border-dark"></span>
<span class="border-bottom border-dark"></span>
<span class="border-right border-dark"></span>
</div>
</body>
</html>
Output
If we compile and run the query, the result is produced as follows −
Subtractive Border Classes
To remove a border from an HTML element, we use the following classes −
.border-0 − This class will remove the border from all around the element.
.border-top-0 − This class will remove the border from top edge of the element, if exists.
.border-bottom-0 − This will remove the border from bottom edge of the element, if exists.
.border-left-0 − This class will remove the border from the left edge of the element, if exists.
.border-right-0 − This class will remove the border from the right edge of the element, if exists.
Example
In the example below, we are removing borders for the HTML <span> element using the "Additive Border Classes" −
<!DOCTYPE html>
<html>
<head>
<title>Borders in Bootstrap</title>
<!-- Link Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- Link Bootstrap JS and JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
/* CSS for Square boxes */
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
background-color: lightskyblue;
}
</style>
</head>
<body>
<!-- Subtractive border classes -->
<div>
<h2>Subtractive Border Classes</h2>
<span class="border border-0"></span>
<span class="border border-top-0 border-dark"></span>
<span class="border border-left-0 border-dark"></span>
<span class="border border-bottom-0 border-dark"></span>
<span class="border border-right-0 border-dark"></span>
</div>
</body>
</html>
Output
Let us compile and run the query, to produce the following result −
Border-Color Classes
We can add colors to the border of any HTML element using the following border-color classes; .border-primary, .border-secondary, .border-success, .border-danger, .border-warning, .border-info, .border-light, .border-dark, .border-white. If we want to set other customized color, we can do it manually using the CSS.
.border-primary
.border-secondary
.border-success
.border-danger
.border-warning
.border-info
.border-light
.border-dark
.border-white
Example
In the below example, we are adding colors to the border of the element using the "Border-color classes" −
<!DOCTYPE html>
<html>
<head>
<title>Borders in Bootstrap</title>
<!-- Link Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- Link Bootstrap JS and JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
/* CSS for Square boxes */
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
background-color: lightgray;
}
</style>
</head>
<body>
<!-- Color of borders -->
<div>
<h2>Color of borders</h2>
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
</div>
</body>
</html>
Output
When we execute the query above, the output is obtained as follows −
Border Width Classes
We can use the "border width classes" to set the border width of the html element. The width can be set from 1-5.
Example
In the following example, we are setting the width of the element border using the above-mentioned "border width classes" −
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
<style>
/* CSS for Square boxes */
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
background-color: lightgray;
}
</style>
</head>
<body>
<!--Border Width-->
<h2>Border Width</h2>
<span class="border border-danger border-1"></span>
<span class="border border-danger border-2"></span>
<span class="border border-danger border-3"></span>
<span class="border border-danger border-4"></span>
</body>
</html>
Output
On executing the given query, the output is displayed as follows −
Border-Radius Classes
We can round the border of an element using the following Border-Radius classes; .rounded-top, .rounded-bottom, .rounded-left, .rounded-right, .rounded-circle, .rounded-0, etc.
.rounded-top
.rounded-bottom
.rounded-left
.rounded-right
.rounded-circle
.rounded-0, etc.
Example
In the following example, we are rounding the element borders using the above-mentioned "border-radius classes" −
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- Link Bootstrap JS and JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
<style>
/* CSS for Square boxes */
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
background-color: lightgray;
}
</style>
</head>
<body>
<!--Border radius -->
<h2>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>
</body>
</html>
Output
The output for the query above is produced as given below −
165 Views
