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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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:
Similar Reads
How to move a container inside of another container in Bootstrap 5 ? The container is used to set the content’s margin. It contains row elements and the row elements are containers of columns. This is known as the grid system. In this article, we will learn about How to move a container inside of another container in Bootstrap 5. We will move a container to the left
2 min read
How to specify border colors in Bootstrap ? Bootstrap provides us with different classes that can be used with different HTML tags such as <button>, <a>, <input>, and <label> to apply custom button borders.These classes are as follows. borderborder-topborder-bottomborder-leftborder-right In this article, we will learn
3 min read
How to Add a Border or Shadow to Elements using Bootstrap 5 Classes ? To add a border in Bootstrap 5, we can use classes like 'border' for a full border or border-top, border-end, border-bottom, border-start for specific sides. For shadows, apply classes like 'shadow' for a default shadow, shadow-sm for a small shadow, or shadow-lg for a large shadow. Table of Content
2 min read
Bootstrap 5 Tables without borders Bootstrap5 Tables without borders is used to create a table in borderless form. It is mostly used when we do not want to show the separation in the table content. Tables without Borders Class: table-borderless: This class is used to create borderless tables Syntax: <table class="table table-borde
2 min read
How to create an outline button in Bootstrap 4 ? Before performing with outline classes of bootstrap just know about a little bit of button outline. An outline on buttons means to give an outline around the buttons. This '.btn-outline' class removes all background colors or styles from the button for giving the Effective, lighter, and highlighter
4 min read