Bootstrap 5 Border utility is used to set the style of the border element. The border styles can be of border-color, border-width, border-radius, etc.
Border color is used to set the color of the border element using utilities built on our theme colors.
Border color used Classes:
| Class Name | Description |
|---|
| border-primary | Sets the primary color for the border. |
| border-secondary | Sets the secondary color for the border. |
| border-success | Sets the success color for the border. |
| border-danger | Sets the danger color for the border. |
| border-warning | Sets the warning color for the border. |
| border-info | Sets the info color for the border. |
| border-light | Sets the light color for the border. |
| border-dark | Sets the dark color for the border. |
| border-white | Sets the white color for the border. |
Syntax:
<div class="border border-*">
Content
</div>Example 1: In this example, we will add different color borders on the span elements.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Border color</title>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
<style>
/* CSS style for Boxes */
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 6px;
background-color: #DCDCDC;
}
</style>
</head>
<body>
<div class="container" style="text-align: center;">
<h3>Bootstrap 5 Border color</h3>
<div class="box">
<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>
</div>
</div>
</body>
</html>
Output:
Bootstrap 5 Border color Example Output
Example 2: In this example, we will add different color borders with different border widths of the span elements.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Border color</title>
<link
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script
src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<style>
/* CSS style for Boxes */
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 6px;
background-color: #df7c7c;
}
</style>
</head>
<body>
<div
class="container"
style="text-align: center"
>
<h3>Bootstrap 5 Border color</h3>
<div class="box">
<span
class="border border-3 border-primary"
></span>
<span
class="border border-3 border-secondary"
></span>
<span
class="border border-5 border-success"
></span>
<span
class="border border-5 border-danger"
></span>
<span
class="border border-2 border-warning"
></span>
<span
class="border border-2 border-info"
></span>
<span
class="border border-4 border-light"
></span>
<span
class="border border-4 border-dark"
></span>
</div>
</div>
</body>
</html>
Output:
Bootstrap 5 Border color Example Output
Similar Reads
Bootstrap 5 Cards Border Bootstrap 5 Cards Border is part of the utilities that can be used to add borders on cards. Borderless cards are so ugly but the cards of bootstrap will always have borders. According to this utility, classes are used to define the color of the card borders. #content-iframe { width: 100%; height:425
4 min read
Bootstrap 5 Borders Bootstrap 5 Borders offer predefined border styles to elements. Classes like .border, .border-0, .border-top, .border-bottom, .border-left, and .border-right provide easy customization for borders, including color, width, and radius, enhancing UI design. iframe { width: 100%; height: 450px;} @media
2 min read
Bootstrap 5 Spinners Border Colors Bootstrap 5 Spinner is used to show the loading stage of the component, these spinners are built only with HTML and CSS. The Border Spinner is used for a lightweight loading indicator. There are various colors of spinners provided by Bootstrap 5 spinners.Spinner Border Colors Classes:spinner-border:
2 min read
Bootstrap 5 Table borders Bootstrap 5 Table borders classes are used to set or unset the border of the table. With bootstrap 5 table borders are easy to customize with border or no border. Bordered tables: This is used to set the border on each side of the table.Tables without borders: This is used to make the table borderle
2 min read
Bootstrap 5 Border-radius Bootstrap 5 Border-radius offers consistent and responsive control over element roundness. With predefined classes, it allows easy customization, providing sleek and modern designs. From sharp corners to smooth curves, it enhances visual appeal effortlessly Border-radius is used to set the radius of
3 min read
Bootstrap 5 Colors Bootstrap 5 Colors utility is used to set the text colors, into green as a success, and blue as a primary. There are lots of other informative colors that we need like danger, warning, and so on. In this article, we will know about all the text colors that can be used through Bootstrap 5. iframe { w
3 min read