How to add border color in bootstrap?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this tutorial, we will learn how to create a how-to add border color in bootstrap.

Any colour can be added to the border by using the following .border-color classes that are available in bootstrap. If you want any other cutomized color, then you can set it manually using the CSS attribute.

Table of contents

  • Includes bootstrap library
  • Includes css in html page
  • Include the code in body

This article will guide you to adding add border color in Bootstrap for example.

Step 1: Includes bootstrap library

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

    <!-- Link Bootstrap JS and JQuery -->
    <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.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

Step 2: Includes css in html page

Here we are using custom styling to make box .width and .hight and will look better.

      <style>
               span {
            display: inline-block;
            width: 70px;
            height: 70px;
            margin: 6px;
            background-color: #DCDCDC;
        }
      </style>

Step 3: Include the code in body

Include the code below in <body> to border border-primary.

    <div class="container">
        <h2>Borders</h2>
        <p>Color Border:</p>
        <span class="border border-primary"></span>
        <span class="border border-secondary"></span>
        <span class="border border-success"></span>
        <span class="border border-danger"></span>
        <span class="border border-warning"></span>
        <span class="border border-info"></span>
        <span class="border border-light"></span>
        <span class="border border-dark"></span>
    </div>

Example.

Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap Example</title>

    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

    <!-- Link Bootstrap JS and JQuery -->
    <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.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

    <style>
        /* CSS style for Boxes */
        span {
            display: inline-block;
            width: 70px;
            height: 70px;
            margin: 6px;
            background-color: #DCDCDC;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>Borders</h2>

        <p>Color Border:</p>

        <span class="border border-primary"></span>
        <span class="border border-secondary"></span>
        <span class="border border-success"></span>
        <span class="border border-danger"></span>
        <span class="border border-warning"></span>
        <span class="border border-info"></span>
        <span class="border border-light"></span>
        <span class="border border-dark"></span>
    </div>
</body>

</html>

Check the output of the above code example.

Bootstrap, Color, Borders

All the best 👍