How to put a border on a Bootstrap form?
May 26, 2022Hi 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.
All the best 👍
