How to specify border colors in Bootstrap ?
Last Updated :
29 Dec, 2021
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.
HTML
<!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.
HTML
<!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.
HTML
<!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:
Similar Reads
How to Specify no Border in CSS ?
When designing web pages, borders can be useful for highlighting elements or defining structure, but sometimes, you may want to remove them entirely for a cleaner or more modern look. In CSS, specifying no border is a straightforward process that helps you eliminate borders from HTML elements such a
3 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
How to Change Button Color in Bootstrap 5 ?
Bootstrap 5 provides developers with a lot of capabilities that enable them to create responsive and aesthetically pleasing online apps. Developers frequently require customizations, such as altering button colors to better reflect their branding or design philosophies. This post will walk you throu
2 min read
How to Add a Border to a Container in Bootstrap ?
Borders in Bootstrap are a styling element used to enhance the visual appearance of containers, buttons, and other elements. They can be customized with various colors, thicknesses, and styles to create distinct visual effects. Below are the approaches to add a border to a container in Bootstrap: Ta
3 min read
How to fix Spacing Classes in Bootstrap?
Bootstrap 5 provides a comprehensive set of spacing utilities that can be used to control the spacing between elements. These utilities cover various spacing properties, including margin and padding that can be applied to different sides of an element (top, right, bottom, left, and all sides). Below
3 min read
Bootstrap 5 Border color
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. iframe { width: 100%; height: 450px;} @media
3 min read
Borders in bootstrap with examples
Borders: Borders are generally used to display an outline around a box or table cell or any other HTML element. In Bootstrap, there are different classes available to add or remove borders. The classes that are used to add borders are referred as Additive classes and those that are used to remove bo
4 min read
How to Customize Button Styles in Bootstrap ?
Customizing button styles in Bootstrap involves modifying predefined classes or creating custom CSS rules. This allows alignment with brand identity, and differentiation, and ensures design consistency across projects. We can customize button styles in Bootstrap using different approaches as listed
3 min read
How to Change Navigation Bar Color in Bootstrap?
Changing the navigation bar color in Bootstrap means customizing the appearance of the navbar by modifying its background, text, or other styling elements. Below are the approaches to change the color of the navigation bar in Bootstrap:Table of ContentUsing the inbuilt color classesCreating a custom
3 min read
How to Change Close Button Color in Bootstrap 5?
Changing the color of the close button in Bootstrap 5 involves customizing the styles using CSS. The close button in Bootstrap 5 has a specific class .btn-close, and you can override its styles to achieve the desired color. In this article, we will see how we can do it.Preview PrerequisitesHTMLCSS B
2 min read