How to remove the border the top of a div using Bootstrap class?
May 24, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
In this tutorial, we will learn to remove the border the top of a div using Bootstrap.
Table of contents
- Includes bootstrap library
- Includes css in html page
- Include the code in body
This article will guide you to remove the border the top of a div 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 css class to make a box height, width, background-color and display.
<style>
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: #c0d4d8;
}
</style>Step 3: Include the code in body
Include the code below in <body> to accept time from the user.
<div class="container">
<h2> Remove the border the top of a div using Bootstrap class</h2>
<span class="border border-top-0 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 for Square boxes */
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: #c0d4d8;
}
</style>
</head>
<body>
<div class="container">
<h2> Remove the border the top of a div using Bootstrap class</h2>
<span class="border border-top-0 border-dark"></span>
</div>
</body>
</html>Check the output of the above code example.
All the best 👍