Bootstrap 5 Border color
Last Updated :
05 Apr, 2024
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/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script
src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...