How to remove the border the top of a div using Bootstrap class?

Hi 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.

Bootstrap, Remove, Border, Top

All the best 👍