What is the difference between Bootstrap container and container-fluid classes

Question

Just downloaded 3 1 and found in the docs        Turn any fixed-width grid layout into a full-width layout by changing your outermost  container to  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

User · Answer

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

User · Answer

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    Extra Small   Only Mobile Resolution  Small  768px  Tablets  Medium  992px  Laptops   Large  1200px  Laptops Desktops

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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                    container vs  container-fluid demo

User · Answer

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

User · Answer

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  http   www bootply com 119981 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 http   www bootply com 119982 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  http   www bootply com 119983 I hope this helped clarify a little bit

[twitter-bootstrap] What is the difference between Bootstrap .container and .container-fluid classes?

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3