How to put a border on a Bootstrap form?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. How to put a border on a Bootstrap form.

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 borders are referred as subtractive classes.

Table of contents

  • Includes bootstrap library
  • Includes css in html page
  • Define its class name

This article will guide you to adding put a border in Bootstrap with 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 in css class to make borders in the form outline.

        .border-class {
            border: thin #ce0a0a solid;
            margin: 20px;
            padding: 20px;
        }

Step 3: Include the code in body

Include the code below in <body> to accept time from the user.

    <div class="d-flex justify-content-center ">
        <form class="border-class">
            <div class="form-group row">
                <div class="col-sm-12">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-12">
                    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                </div>
            </div>
            <div class="form-group row">
                <div class=" col-sm-12">
                    <button type="submit" class="btn btn-primary">Sign in</button>
                </div>
            </div>
        </form>
    </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 for Square boxes */
        .border-class {
            border: thin #ce0a0a solid;
            margin: 20px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="d-flex justify-content-center ">
        <form class="border-class">
            <div class="form-group row">
                <div class="col-sm-12">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-12">
                    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                </div>
            </div>
            <div class="form-group row">
                <div class=" col-sm-12">
                    <button type="submit" class="btn btn-primary">Sign in</button>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

Check the output of the above code example.

Bootstrap, Border, From

All the best 👍

Follow me on Twitter