How to add border color in bootstrap?
May 25, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
In this tutorial, we will learn how to create a how-to add border color in bootstrap.
Any colour can be added to the border by using the following .border-color classes that are available in bootstrap. If you want any other cutomized color, then you can set it manually using the CSS attribute.
Table of contents
- Includes bootstrap library
- Includes css in html page
- Include the code in body
This article will guide you to adding add border color in Bootstrap for example.
Step 1: Includes bootstrap library
First of all, load the Bootstrap framework CSS into the head tag of your webpage.
<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>Step 2: Includes css in html page
Here we are using custom styling to make box .width and .hight and will look better.
<style>
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #DCDCDC;
}
</style>Step 3: Include the code in body
Include the code below in <body> to border border-primary.
<div class="container">
<h2>Borders</h2>
<p>Color Border:</p>
<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>Example.
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</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 style for Boxes */
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #DCDCDC;
}
</style>
</head>
<body>
<div class="container">
<h2>Borders</h2>
<p>Color Border:</p>
<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>
</body>
</html>Check the output of the above code example.
All the best 👍
