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 >
< link rel = "stylesheet"
href =
integrity =
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin = "anonymous" >
</ script >
< 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" >
< 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 =
< script src =
</ script >
< script src =
</ script >
< script src =
</ 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 =
< script src =
</ script >
< script src =
</ script >
< script src =
</ 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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...