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 to as Additive classes and those that are used to remove borders are referred to as subtractive classes.
Class | Description | Syntax |
---|---|---|
Border | Adds a border all around the element. | .border |
Border top | Adds a border on top edge of the element. | .border-top |
Border right | Adds a border on the right of the element. | .border-right |
Border bottom | Adds a border on the bottom of the element. | .border-bottom |
Border left | Adds a border on the left of the element. | .border-left |
Radius | Makes the corner of the border curved. | .rounded |
Color | Used to add color to the border. | .border-* |
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>Borders Example</title>
<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: 70px;
height: 70px;
margin: 6px;
background-color: #DCDCDC;
}
</style>
</head>
<body>
<div class="container">
<h4>Additive Border Classes</h4>
<span class="border border-dark"></span>
<span class="border-top border-dark"></span>
<span class="border-right border-dark"></span>
<span class="border-bottom border-dark"></span>
<span class="border-left border-dark"></span>
</div>
<div class="container">
<h4>Subtractive Border Classes</h4>
<span class="border border-dark"></span>
<span class="border border-0 border-dark"></span>
<span class="border border-top-0 border-dark"></span>
<span class="border border-right-0 border-dark"></span>
<span class="border border-bottom-0 border-dark"></span>
<span class="border border-left-0 border-dark"></span>
</div>
<div>
<h4>Color Border:</h4>
<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>
<div>
<h4>Border Radius</h4>
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>
</div>
</body>
</html>
Bootstrap Cheat Sheet – A Basic Guide to Bootstrap
Bootstrap is a free, open-source, potent CSS framework and toolkit used to create modern and responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, websites are perfect for all browsers and all sizes of screens.
Contact Us