Just downloaded 3.1 and found in the docs...
Turn any fixed-width grid layout into a full-width layout by changing your outermost
.containerto.container-fluid.
Looking in bootstrap.css, it appears that .container-fluid is identical to .container. Both have the same CSS, and every instance of .container-fluid is paired with .container, and all column classes are specified in percentages.
When twiddling with examples I could not see any difference, as everything seemed fluid.
As I'm new to Bootstrap, I assume I'm missing something. Could someone take a minute and enlighten me?
This question is related to
twitter-bootstrap
twitter-bootstrap-3
Quick version: .container has one fixed width for each screen size in bootstrap (xs,sm,md,lg); .container-fluid expands to fill the available width.
The difference between container and container-fluid comes from these lines of CSS:
@media (min-width: 568px) {
.container {
width: 550px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
Depending on the width of the viewport that the webpage is being viewed on, the container class gives its div a specific fixed width. These lines don't exist in any form for container-fluid, so its width changes every time the viewport width changes.
So for example, say your browser window is 1000px wide. As it's greater than the min-width of 992px, your .container element will have a width of 970px. You then slowly widen your browser window. The width of your .container won't change until you get to 1200px, at which it will jump to 1170px wide and stay that way for any larger browser widths.
Your .container-fluid element, on the other hand, will constantly resize as you make even the smallest changes to your browser width.
Both .container and .container-fluid are responsive (i.e. they change the layout based on the screen width), but in different ways (I know, the naming doesn't make it sound that way).
Short Answer:
.container is jumpy / choppy resizing, and
.container-fluid is continuous / fine resizing at width: 100%.
From a functionality perspective:
.container-fluid continuously resizes as you change the width of your window/browser by any amount, leaving no extra empty space on the sides ever, unlike how .container does. (Hence the naming: "fluid" as opposed to "digital", "discrete", "chunked", or "quantized").
.container resizes in chunks at several certain widths. In other words, it will be different specific aka "fixed" widths different ranges of screen widths.
Semantics: "fixed width"
You can see how naming confusion can arise. Technically, we can say .container is "fixed width", but it is fixed only in the sense that it doesn't resize at every granular width. It's actually not "fixed" in the sense that it's always stays at a specific pixel width, since it actually can change size.
From a fundamental perspective:
.container-fluid has the CSS property width: 100%;, so it continually readjusts at every screen width granularity.
.container-fluid {
width: 100%;
}
.container has something like "width = 800px" (or em, rem etc.), a specific pixel width value at different screen widths. This of course is what causes the element width to abruptly jump to a different width when the screen width crosses a screen width threshold. And that threshold is governed by CSS3 media queries, which allow you to apply different styles for different conditions, such as screen width ranges.
@media screen and (max-width: 400px){
.container {
width: 123px;
}
}
@media screen and (min-width: 401px) and (max-width: 800px){
.container {
width: 456px;
}
}
@media screen and (min-width: 801px){
.container {
width: 789px;
}
}
Beyond
You can make any fixed widths element responsive via media queries, not just .container elements, since media queries is exactly how .container is implemented by bootstrap in the background (see JKillian's answer for the code).
From a display perspective .container gives you more control over the what the users are seeing, and makes it easier to see what the users will see as you only have 4 variations of display (5 in the case of bootstrap 5) because the sizes relate to the same as the grid sizes. e.g. .col-xs, .col-sm, .col, and .col-lg.
What this means, is that when you are doing user testing if you test on a displays with the 4 different sizes you see all the veriations in display.
When using .container-fluid because the witdh is related to the viewport width the display is dynamic, so the varations are much greater and users with very large screens or uncommon screen widths may see results you weren't expecting.
You are right in 3.1 .container-fluid and .container are same and works like container but if you remove them it works like .container-fluid (full width). They had removed .container-fluid for "Mobile First Approach", but now it's back in 3.3.4 (and they will work differently)
To get latest bootstrap please read this post on stackoverflow it will help check it out.
.container has a max width pixel value, whereas .container-fluid is max-width 100%.
.container-fluid continuously resizes as you change the width of your window/browser by any amount.
.container resizes in chunks at several certain widths, controlled by media queries (technically we can say it’s “fixed width”
because pixels values are specified, but if you stop there, people may get the
impression that it can’t change size – i.e. not responsive.)
Updated 2019
The basic difference is that container is scales responsively, while container-fluid is always width:100%. Therefore in the root CSS definitions, they appear the same, but if you look further you'll see that .container is bound to media queries.
Bootstrap 4
The container has 5 widths...
.container {
width: 100%;
}
@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;
}
}
Bootstrap 3
The container has 4 sizes. Full width on xs screens, and then it's width varies based on the following media queries..
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
Use .container-fluid when you want your page to shapeshift with every little difference in its viewport size.
Use .container when you want your page to shapeshift to only 4 kinds of sizes, which are also known as "breakpoints".
The breakpoints corresponding to their sizes are:
I think you are saying that a container vs container-fluid is the difference between responsive and non-responsive to the grid. This is not true...what is saying is that the width is not fixed...its full width!
This is hard to explain so lets look at the examples
Example one
container-fluid:
So you see how the container takes up the whole screen...that's a container-fluid.
Now lets look at the other just a normal container and watch the edges of the preview
Example two
container
Now do you see the white space in the example? That's because its a fixed width container ! It might make more sense to open both examples up in two different tabs and switch back and forth.
EDIT
Better yet here is an example with both containers at once! Now you can really tell the difference!
I hope this helped clarify a little bit!
Source: Stackoverflow.com