Breaking change in 3.0.1: Nested containers don't properly size #11436

rwgodfrey · 2013-11-10T01:49:53Z

The media queries in v3.0.0 set a "max-width" for the ".container" class. This was changed in 3.0.1 to set a "width" instead to support IE 8 which doesn't support "max-width".

This breaks nested ".container" DIVs because the interior ".container" DIVs calculate based on a fixed width instead of the width available in the parent. The net effect is that content overflows on the right.

Example:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" />
    </head>
    <body>
        <div class="container" style="border: 1px solid black; background-color:  #808080;">
            <div class="container" style="border: 1px solid black; background-color:  #fcf5eb;">
                <div class="container">
                    <div class="row" style="height: 200px;"></div>
                    <div class="row">
                        <div class="col-md-4" style="min-height: 200px; background-color: red;"></div>
                        <div class="col-md-4" style="min-height: 200px; background-color: yellow;"></div>
                        <div class="col-md-4" style="min-height: 200px; background-color: blue;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

The text was updated successfully, but these errors were encountered:

zlatanvasovic · 2013-11-10T09:27:40Z

I'm unable to reproduce that.

Test case: http://jsfiddle.net/2cd4j/embedded/result/

rwgodfrey · 2013-11-10T10:58:16Z

It happens in your jsfiddle example too but you can't see it because you don't have any visible reference for the outside container. Here is the same example but with a border added to the outside container.

http://jsfiddle.net/kMnWc/embedded/result/

Note that on my machine, the browser window size must be 787 or higher to see the overflow.

zlatanvasovic · 2013-11-10T11:03:32Z

Your border depends on padding. I don't see a usage point with .container inside .container with borders.

rwgodfrey · 2013-11-10T11:11:06Z

I think it would be common with sites that use nested master pages (such as ASP.NET MVC sites). I have a couple of ASP.NET MVC sites where the main layout page has a container with a border that surrounds the entire content area of the page. Pages that use that layout page then have containers in them for positioning of content.

Here's an example: http://www.cfgrace.com

Now that site is still using v3.0.0, but when I change it to v3.0.2 the twitter panel on the right-hand side overflows past the content border at wider page widths. A couple of other sites with similar layouts do the same thing.

rwgodfrey · 2013-11-10T12:05:03Z

Also, it's not the border. Changing the outside container to remove the border and just use a background color demonstrates the same behavior.

http://jsfiddle.net/dQY3t/embedded/result/

zlatanvasovic · 2013-11-10T12:15:30Z

If I wasn't clear, I think that your box model depends on padding. You are right about container's fixed width, I'm working on a fix. ;)

ghost · 2013-11-10T15:15:38Z

hogy lenne közös helyszíneken, hogy a beágyazott mester oldalak (mint például ASP.NET MVC helyek). hogy a gépemen, a böngésző ablak mérete legyen 787 vagy nagyobb, hogy a túlfolyó.

ghost · 2013-11-10T15:16:21Z

MarcioBarrientos · 2013-11-21T17:10:34Z

I have this problem too, I change the "width" to "max-width" in the .container and now works fine.

example:
< div class="row">
< div class="col-md-8">
< div class="container">
This content will extends to width size and overflows to the right column.
< /div>
< /div>
< div class="col-md-4">
Content at right side
< /div>
< /div>

rwgodfrey · 2013-11-21T17:42:16Z

I initially changed width back to max-width, but I ended up just refactoring my site to take out the nested containers. I created my own class called "nested-container" to apply the centering and padding that I was getting from the "container" class.

mdo · 2013-11-30T23:16:10Z

It's definitely the fixed width and the padding. Nested containers worked before because of max-width but when we changed that in a prior release, it stopped working. However, it still didn't work completely because each nested container would become narrower and narrower.

mdo · 2013-11-30T23:18:59Z

See this example for a solution: http://jsbin.com/IhEZadu/1.

Definitely need more testing and feedback though to see if this works everywhere—outdenting nested containers might not always make sense. I think for the time being we just don't recommend it.

Thoughts from anyone else?

zlatanvasovic · 2013-12-01T08:24:38Z

My recommendation is to avoid nested containers.

Fluid containers and rows would fix this (.row -> .container => nesting). :)

2013/12/1 Mark Otto notifications@github.com

See this example for a solution: http://jsbin.com/IhEZadu/1.

Definitely need more testing and feedback though to see if this works
everywhere—outdenting nested containers might not always make sense. I
think for the time being we just don't recommend it.

Thoughts from anyone else?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/11436#issuecomment-29563389
.

Zlatan Vasović - ZDroid

carasmo · 2013-12-01T15:42:21Z

At some point, maybe instead of .container it should be called .page-max-width-container or something so people won't nest it. I assumed that .container is for setting the page width and centering it and wouldn't nest it inside another .container.

mdo · 2013-12-01T19:24:48Z

@carasmo Yeah, something more specific would be nice come v4. Until then, not much to do since negative margin for the nesting would probably screw up some lives 😆.

mdo · 2013-12-01T19:31:58Z

Okay, closing this out since containers have actually never nested "properly" since v3. Here's the lowdown one more time:

We used to use max-width on .containers. That screwed up IE8, so we switched to width.
Since we were using max-width, the nested containers never stayed their intended width—they were always 30px short (the 15px gutters on either side via padding).
Using width, the nested containers are never short—they're always the correct width, which is where the problem lies for a few situations.

We could scope the width for IE8 only, but that just makes for an even worse edge case. For the time being, we're not going to support those nested containers. If you do wish to use them, add the negative margin as shown in this demo I put together: http://jsbin.com/IhEZadu/1.

rwgodfrey · 2013-12-04T13:03:06Z

Agree with the conclusion, and as mentioned earlier I ended up refactoring my site to remove the nested containers. However, the DOCS should probably be updated to explicitly state that nested containers aren't supported.

cvrebert · 2013-12-04T17:22:51Z

Reopening as a docs bug.

mdo closed this as completed Dec 1, 2013

cvrebert reopened this Dec 4, 2013

mdo closed this as completed in 66f9c7d Dec 5, 2013

zacechola mentioned this issue Jul 28, 2014

Warn about nested containers twbs/bootlint#45

Closed

flevour mentioned this issue Jan 7, 2015

Navbar example uses markup against doc recomendations #15512

Closed

mdo mentioned this issue Aug 19, 2015

v4 #17021

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Breaking change in 3.0.1: Nested containers don't properly size #11436

Breaking change in 3.0.1: Nested containers don't properly size #11436

rwgodfrey commented Nov 10, 2013

zlatanvasovic commented Nov 10, 2013

rwgodfrey commented Nov 10, 2013

zlatanvasovic commented Nov 10, 2013

rwgodfrey commented Nov 10, 2013

rwgodfrey commented Nov 10, 2013

zlatanvasovic commented Nov 10, 2013

ghost commented Nov 10, 2013

ghost commented Nov 10, 2013

MarcioBarrientos commented Nov 21, 2013

rwgodfrey commented Nov 21, 2013

mdo commented Nov 30, 2013

mdo commented Nov 30, 2013

zlatanvasovic commented Dec 1, 2013

carasmo commented Dec 1, 2013

mdo commented Dec 1, 2013

mdo commented Dec 1, 2013

rwgodfrey commented Dec 4, 2013

cvrebert commented Dec 4, 2013

Breaking change in 3.0.1: Nested containers don't properly size #11436

Breaking change in 3.0.1: Nested containers don't properly size #11436

Comments

rwgodfrey commented Nov 10, 2013

zlatanvasovic commented Nov 10, 2013

rwgodfrey commented Nov 10, 2013

zlatanvasovic commented Nov 10, 2013

rwgodfrey commented Nov 10, 2013

rwgodfrey commented Nov 10, 2013

zlatanvasovic commented Nov 10, 2013

ghost commented Nov 10, 2013

ghost commented Nov 10, 2013

MarcioBarrientos commented Nov 21, 2013

rwgodfrey commented Nov 21, 2013

mdo commented Nov 30, 2013

mdo commented Nov 30, 2013

zlatanvasovic commented Dec 1, 2013

carasmo commented Dec 1, 2013

mdo commented Dec 1, 2013

mdo commented Dec 1, 2013

rwgodfrey commented Dec 4, 2013

cvrebert commented Dec 4, 2013