ApiDemos™Bootstrap5 Container
Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.
Bootstrap requires a container element to wrap the content of the site.
We can use the following three container classes:
.containerclass is used for containers with fixed width and responsive layout support..container-fluidclass, A container for 100% width, occupying the entire viewport..container-{breakpoint}class, Until the specified breakpoint, the width iswidth: 100%.
Fixed width (Bootstrap 5 container class)
.container class Used to create fixed-width responsive pages.
The width (max-width) will be scaled up or down in proportion to the screen width.
| Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | X-Large ≥1200px | XX-Large ≥1400px | |
|---|---|---|---|---|---|---|
| max-width | 100% | 540px | 720px | 960px | 1140px | 1320px |
In the following example, we can try resizing the browser window to see how the container width varies from screen to screen.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap 5 container Example from apidemos.com </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
<style>
body{
border:2px solid black;
}
</style>
</head>
<body>
<div class="container bg-info">
<h1> Bootstrap 5 Container in apidemos.com </h1>
<b> The container class gives a responsive or fixed width in page </b>
<p> Containers are a core Bootstrap building piece that contain and align your content within a specific device or viewport. </p>
<div class = "row" style="border : 2px solid black;">
<div class = "col" style="border : 2px solid black;"> First Col </div>
<div class = "col" style="border : 2px solid black;"> Second Col </div>
<div class = "col" style="border : 2px solid black;"> Third Col </div>
</div>
</div>
</body>
</html> Output：
The Supersize screen (≥1400px) is a new addition to Bootstrap 5, while the largest in Bootstrap 4 is the Extrasize screen (≥1200px).
100% width (Bootstrap 5 container-fluid class)
.container-fluid class is used to create a full screen size container that always spans the entire width of the screen (width is always 100%):
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap 5 container fluid Example from apidemos.com </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
<style>
body{
border:2px solid black;
}
</style>
</head>
<body>
<div class="container-fluid bg-info">
<h1> Bootstrap 5 Container fluid class in apidemos.com</h1>
<b> The container class gives a responsive or fixed width in page </b>
<p> Containers are a core Bootstrap building piece that contain and align your content within a specific device or viewport. </p>
<div class = "row" style="border : 1px solid black;">
<div class = "col" style="border : 2px solid black;"> First Col </div>
<div class = "col" style="border : 2px solid black;"> Second Col </div>
<div class = "col" style="border : 2px solid black;"> Third Col </div>
</div>
</div>
</body>
</html> Output：
Responsive container (Bootstrap 5 .container-{breakpoint} class)
You can use the .container-sm|md|lg|xl|xxl class to create responsive containers.
The value of the max-width property of the container will change depending on the size of the screen.
| Class | Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | X-Large ≥1200px | XX-Large ≥1400px |
|---|---|---|---|---|---|---|
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap 5 container Example from apidemos.com</title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
<style>
body{
border:2px solid black;
}
</style>
</head>
<body>
<div class="container-sm bg-info">
<h1> Bootstrap 5 Container (container-sm)</h1>
<p>In bootstrap, 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. </p>
</div>
<div class="container-md bg-info">
<h1> Bootstrap 5 Container(container-md) </h1>
<p>In bootstrap, 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. </p>
</div>
<div class="container-lg bg-info">
<h1> Bootstrap 5 Container(container-lg) </h1>
<p>In bootstrap, 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. </p>
</div>
<div class="container-xl bg-info">
<h1> Bootstrap 5 Container(container-xl) </h1>
<p>In bootstrap, 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. </p>
</div>
<div class="container-xxl bg-info">
<h1> Bootstrap 5 Container(container-xxl) </h1>
<p>In bootstrap, 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. </p>
</div>
</body>
</html>On an 800×600 screen, the output is as follows:
Padding for Containers
By default, containers have padded left and right margins, and top and bottom do not have padded margins. Bootstrap provides some spacing classes to fill the margins. For example, .pt-5 is used to fill the top margin: .pt-5 is used to fill the top margin.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap 5 container Example from apidemos.com</title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
<style>
body{
border:2px solid black;
}
</style>
</head>
<body>
<div class="container pt-5 bg-info">
<h1> Bootstrap 5 Container with padding (pt-5)</h1>
<b>The container class gives a responsive or fixed width in page </b>
<p> Containers are a core Bootstrap building piece that contain and align your content within a specific device or viewport. </p>
</div>
<div class="container-fluid pt-5 px-5 bg-warning">
<h1> Bootstrap 5 Container fluid with padding(pt-5 px-5) </h1>
<b>the container class gives a responsive or fixed width in page </b>
<p> Containers are a core Bootstrap building piece that contain and align your content within a specific device or viewport. </p>
</div>
</body>
</html> Output：
Borders and colors of containers
Bootstrap also provides a number of border and color (bg-dark, bg-primary, etc.) classes for setting the style of the container.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap 5 container Example from apidemos.com </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
<style>
body{
border:3px solid black;
}
</style>
</head>
<body>
<div class="container my-5 bg-light border">
<h1> Bootstrap 5 Container with margin (my-5 bg-light border) </h1>
<p> Bootstrap 5 Container with margin (my-5 bg-light border)</p>
</div>
<div class="container m-5 bg-success text-white">
<h1> Bootstrap 5 Container with margin (m-5 bg-success text-white)</h1>
<p> Bootstrap 5 Container with margin (m-5 bg-success text-white)</p>
</div>
<div class="container-fluid m-5 bg-warning text-white border">
<h1> Bootstrap 5 Container fluid with Style (m-5 bg-warning text-white border)</h1>
<p> Bootstrap 5 Container fluid with Style (m-5 bg-warning text-white border). </p>
</div>
</body>
</html> Output：
