How to specify border colors in Bootstrap ?
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= integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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> <!-- 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= <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:
Please Login to comment...