0

This question came out of another question that I had about bootstrap. Is it bad to have a container within a container? I did not realize that in the master page generated in asp.net mvc that it had 

  <div class="container body-content">
        @RenderBody()
        <div class="navbar navbar-default navbar-fixed-bottom">
            <div class="container">
                <p class="navbar-text">&copy; @DateTime.Now.Year - My ASP.NET Application</p>
            </div>
        </div>

        </div>

a container class already set. So I did in my views

<div class="container">my other markup here </div>

To me it does not really seem like a bad thing to have multiple containers(though in my case I guess it was redundant) but if you read "bto.rdz" comments in my other question he states he gets strange behavior doing this.

I been doing bootstrap for a few hours now so I can't verify if it can cause problems, or if it is bad practice as well but just looking at the code that was generated for me in my master page I see that the Navbar has it's own container what is in a container.

Community
  • 1
  • 1
chobo2
  • 83,322
  • 195
  • 530
  • 832

1 Answers1

0

Generally speaking, you will have a problem and it's probably not wise to do unless you know what other classes will reset you along the way.

Here's some code to show what happens when you put a .container inside a .container and below it is your code. The reason your code works is because .navbar-fixed-bottom makes the div fixed so it doesn't respect the parent .container. http://jsfiddle.net/w4Gyk/

<div class="container outer-container">
    <div class="container inner-container">
        <p>Hello</p>     
    </div>
</div>

<div class="container outer-container" style="margin-top:10px;">
    @RenderBody()
    <div class="navbar navbar-default navbar-fixed-bottom">
       <div class="container inner-container">
          <p class="navbar-text">&copy; @DateTime.Now.Year - My ASP.NET Application</p>
       </div>
    </div>
</div>
Galen
  • 220
  • 3
  • 13
  • I don't see really the difference from you jsFiddle Example. I just see Hello move is that what should be happening? I just removed the "container" from the inner div. – chobo2 Apr 09 '14 at 18:20
  • What's wrong is that the red box (.inner-container) shouldn't leave its parent box, the blue box (.outer-container). But it does, which is why you shouldn't put a .container inside a container. – Galen Apr 09 '14 at 19:32
  • hmm, I still don't get it. When I look at the first time the red box is in the blue box and the "Hello" is indent", When I remove the "container" in the inner and check again the red box does not move and the "hello" loses it indentation but still looks like it is in the red box. – chobo2 Apr 09 '14 at 19:42