What is the difference between .container and .container-fluid?
As a new Bootstrap user, you may easily get confused by the usage of the classes .container and .container-fluid.
In this article, you will learn what they are, their differences, similarities, and where each is applicable in your website project.
When building a website using the Bootstrap framework, you need to specify a containing element for holding the bootstrap grid system. The purpose of the grid system is to set the layout of the web pages and it comprises a series of rows with columns in each row.
Bootstrap has two ways for specifying these containers by use of the classes in div elements:
- .container
- .container-fluid
These classes may look a bit similar but are different in how they work.
Let's first use the sample code below to see how the divs with these two different classes look like on a laptop screen.
<!DOCTYPE html>
<head>
<title>Bootstrap columns</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
.container, .container-fluid{
padding-top: 30px;
padding-bottom: 30px;
border: 6px solid green;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center">Div with class .container</h1>
</div>
<div class="container-fluid">
<h1 class="text-center">Div with class .container-fluid</h1>
</div>
</body>
</html>
Below is the screenshot of the above code:
We have set a border surrounding each of the two divs so as to determine the region each of them covers on the web page.
Let's also look at the CSS styling for each in the bootstrap CSS file.
.container-fluid CSS styling
.container-fluid {
width: 100%;
padding-right: var(--bs-gutter-x, 0.75rem);
padding-left: var(--bs-gutter-x, 0.75rem);
margin-right: auto;
margin-left: auto;
}
.container CSS styling
.container{
width: 100%;
padding-right: var(--bs-gutter-x, 0.75rem);
padding-left: var(--bs-gutter-x, 0.75rem);
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.container {
max-width: 1320px;
}
}
One thing you can easily notice from both the screenshot and CSS code is that .container-fluid covers the full width of the browser window with no margins on the left or right side.
It is set to cover 100% width of the browser viewport(viewable available width). Its width continuously resizes as you change the width of your browser window by any amount, leaving no extra empty space on the sides.
On the other hand, you can see in the screenshot that .container does not cover the full width, it is centrally placed with a margin/space on the left and the right side.
Unlike the .container-fluid, the .container class is has a set fixed width for each screen size in bootstrap (smartphones, tablets, small laptops, medium laptops, desktops, etc). Depending on the width of the viewport that the webpage is being viewed on, the .container class gives its div a specific fixed width.
The width of .container is controlled by CSS media queries and resizes in bits at specified breakpoints.
Below is a table showing the width of .container div at different screen/viewport sizes in Bootstrap 5.
| Viewport width | .container width |
|---|---|
| Less than 576px | The container is set to 100% width |
| 576px to 767px | The container is set to 540px width |
| 768px to 991px | The container is set to 720px width |
| 992px to 1199px | The container is set to 960px width |
| 1200px to 1399px | The container is set to 1140px width |
| 1400px + | The container is set to 1320px width |
While .container-fluid covers the whole width of any device, .container is set to cover a maximum of 1320px width on the largest viewports.
If you use the container class and your current browser width is 1350px, it will adjust to 1140px wide. If you resize the browser window to a smaller size, the width of the container div will remain the same until it reaches 1199px. At this point, the container class will adjust to 960px wide. And so on for all other breakpoints according to the media queries.
Note: The breakpoints may differ slightly from the ones we have used above, depending on the version used. The figures shown above are for version 5.
Where .container and .container-fluid are applicable
If it is important that the page content should stretch to cover the full width of the browser window at all widths, then use the container-fluid class.
.container-fluid is also applicable if you want to continuously resize the width of the div and its content with every small change in the width of your window/browser.
If you want to have a boxed layout, where you don't want the page content to cover the full viewport/browser width on larger screens, you should use the container class. This will result in a design with white space on both sides of the div at certain browser widths.
The use of .container causes the width of the elements to abruptly jump to different widths when the screen/viewport width crosses a screen width threshold.
