CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Xavier
Xavier

Reputation: 399

How to solve the bootstrap container overflow issue?

I use bootstrap css styling my website. My code is simple

<div id="outer" class="container" style="border:solid">
    Test
    <div id="inner"class="container" style='border:solid width="1280px" '>
       some text
    </div>
</div>

because I am using bootstarp, the width of outer div is 1170px, however, as you can see, I hard code the width of inner div to 1280px, which is wider than it's parent div. As you can see from the below picture, the right edge of inner div is overlap to the outer div, but the left edge stay the same.

My question is, what can I do to not only extend the right side of inner div, but also to extend the left side of inner div. In another word, always keep the inner div align center.

Please help me out with this http://jsfiddle.net/FQUXQ/ Any input is much appreciated.

------------------UPDATE---------------------

http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works this article describes how grid system works.

enter image description here

Upvotes: 4

Views: 9558

Answers (1)

mMoovs
mMoovs

Reputation: 934

Your code in your post says 

style='border:solid width="1280px" '

But I guess you mean

style='border:solid;width:1280px"

But I assume it's just a typo. However, it isn't a good idea to use a .container within another because, like @Saravanan said, bootstrap gives the width based on the screen size (media queries..)

Instead, you should change the code to

<div id="outer" class="container" style="border:solid">
    Test
    <div id="inner" class="row" style="border:solid">
       some text
    </div>
</div>

Or even better, and if you wish to have any columns in your page, use

<div id="outer" class="container" style="border:solid">
    Test
    <div class="row" style="border:solid">
        <div class="col-lg-12" id="inner" >
           some text
        </div>
    </div>
</div>

The class of the last div can be given also more classes if you want it to behave differently in smaller viewports. So what I'm saying is: use the elements Bootstrap has given you and try to use them as it was meant to. Check this out: http://getbootstrap.com/css/#grid

And I recommend using separate css stylesheet instead of inline.

Upvotes: 3

Related Questions