How to specify border colors in Bootstrap ? - GeeksforGeeks

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:
Bootstrap-4
Bootstrap-Questions
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to set active class to nav menu from bootstrap ?
How to change font color of the active nav-item in Bootstrap ?
Express.js express.Router() Function
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript