How to Add a Border to a Container in Bootstrap ?
Last Updated :
05 Apr, 2024
Borders in Bootstrap are a styling element used to enhance the visual appearance of containers, buttons, and other elements. They can be customized with various colors, thicknesses, and styles to create distinct visual effects.
Below are the approaches to add a border to a container in Bootstrap:
Using Border Class
In this approach, we are using Bootstrap’s border class to add a border to a container. The container is centered in the middle of the page using Bootstrap utility classes for flexbox (d-flex, justify-content-center, align-items-center) and vh-100 for full viewport height.
Example: The example below illustrates the implementation of adding a Border to a container in Bootstrap through the above approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet">
<title>Example 1</title>
</head>
<body class="d-flex justify-content-center
align-items-center vh-100">
<div class="container border text-center">
<h1 class="text-success">GeeksforGeeks</h1>
<h3>Using Border Class</h3>
<p class="lead">
This container has a
border using Bootstrap's
border class.
</p>
</div>
</body>
</html>
Output:
Using Substractive Border
In this approach, we are using Bootstrap’s border classes (border, border-dark, border-start-0, border-end-0) to create a subtractive border effect on a container.
Example: The example below illustrates the implementation to Add a Border to a container in Bootstrap through the above approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body class="d-flex justify-content-center
align-items-center vh-100">
<div class="container text-center
border border-dark
border-start-0
border-end-0">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h5>
Using Substractive Border
</h5>
<h6 class="mt-4">
Hello GFG
</h6>
<p class="lead">
This container has a subtractive
border using Bootstrap's border
classes.
</p>
</div>
</body>
</html>
Output:
Using Border Color
In this approach, we are using Bootstrap’s border and border-primary classes to add a border with a primary color to a container.
Example: The example below illustrates the implementation to Add a Border to a container in Bootstrap through the above approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet">
<title>Example 3</title>
</head>
<body class="d-flex justify-content-center
align-items-center vh-100">
<div class="container border
border-primary
text-center p-4">
<h1 class="text-success">GeeksforGeeks</h1>
<h3>Using Border Color</h3>
<p>
This container has a primary color
border using Bootstrap's border
color classes.
</p>
</div>
</body>
</html>
Output:
Using Border Radius
In this approach, we are using Bootstrap’s border, border-info, and rounded-3 classes to add a border with rounded corners to a container. The container and its content are centered vertically and horizontally in the viewport using Bootstrap’s flexbox utility classes .
Example: The example below illustrates the implementation to Add a Border to a container in Bootstrap through the above approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet">
<title>Example 4</title>
</head>
<body class="d-flex justify-content-center
align-items-center vh-100">
<div class="container border border-info
rounded-3 text-center p-4">
<h1 class="text-success">GeeksforGeeks</h1>
<h3>Using Border Radius</h3>
<p>
This container has a rounded border
using Bootstrap's border-radius
classes with different radii for each
side.
</p>
</div>
</body>
</html>
Output:
Share your thoughts in the comments
Please Login to comment...