Bootstrap provides us with different classes that can be used with different HTML tags such as <button>, <a>, <input>, and <label> to apply custom button borders.These classes are as follows.
- border
- border-top
- border-bottom
- border-left
- border-right
In this article, we will learn to implement border colors using Bootstrap.
CDN link: First, add Bootstrap scripts needed for your project.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<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.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Example 1: The following code shows a simple use of border classes.
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous">
</script>
<!-- Custom CSS -->
<style>
h2{
color: green;
text-align: center;
}
div.one{
margin-top: 40px;
text-align: center;
}
button{
margin-top: 10px;
width:80px;
height:80px;
margin-right:15px;
border:white;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<div class="container">
<!-- Bootstrap Button Classes -->
<div class="one">
<button class="border"></button>
<button class="border-top"></button>
<button class="border-bottom"></button>
<button class="border-left"></button>
<button class="border-right"></button>
</div>
</div>
</body>
</html>
Output:
Note: As you can see the output is barely visible. For this purpose, Bootstrap provides border colors.
Bootstrap border colors: It also provides a series of classes that can be used on the above bootstrap border classes to apply custom border styles. These classes are as follows:
- border-primary
- border-secondary
- border-success
- border-danger
- border-warning
- border-info
- border-light
- border-dark
- border-white
Note: In order for the above classes to work, Bootstrap border classes should also be mentioned along with the above classes. The below examples use the Bootstrap "border" class.
Example 2: The following example demonstrates classes "border-primary", "border-secondary", "border-success","border-danger","border-warning" with blue,gray,green,red and yellow colors respecively.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<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.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<ul>
<li class="border border-primary">
.border border-primary
</li>
<br>
<li class="border border-secondary">
.border border-secondary
</li>
<br>
<li class="border border-success">
.border border-success
</li>
<br>
<li class="border border-danger">
.border border-danger
</li>
<br>
<li class="border border-warning">
.border border-warning
</li>
</ul>
</div>
</body>
Output:
Example 3: The following example demonstrates classes "border-info","border-light","border-dark","border-white" with cyan,light,black and white colour respectively.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<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.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<h2 style="color:green;text-align:center">
GeeksforGeeks
</h2>
<p style="text-align:center">
<b>Bootstrap borders</b>
</p>
<div class="container">
<ul>
<li class="border border-info">
.border border-info
</li>
<br>
<li class="border border-light">
.border border-light
</li>
<br>
<li class="border border-dark">
.border border-dark
</li>
<br>
<li class="border border-white">
.border border-white
</li>
</ul>
</div>
</body>
</html>
Output:
