16

I have an issue with Bootstrap's grid layout and the overlapping of columns within it. I'm not sure what the issue is really, any advice would be most appreciated, thanks. 

<div class="container">    

    <div class="row">
        <div class="col-md-6">
            <img src="content/one.png">
        </div>

        <div class="col-md-6">
            <div class="row">
                <div class="col-md-6"><img src="content/two.png"></div>
                <div class="col-md-6"><img src="content/three.png"></div>
            </div>
            <div class="row">
                <div class="col-md-6"><img src="content/four.png"></div>
                <div class="col-md-6"><img src="content/five.png"></div>
            </div>
        </div>

        <div class="col-md-9">
            <div class="row">
                <div class="col-md-3"><img src="content/six.png"></div>
                <div class="col-md-9"><img src="content/seven.png"></div>
            </div>
            <div class="row">
                <div class="col-md-6"><img src="content/eight.png"></div>
                <div class="col-md-6"><img src="content/nine.png"></div>
            </div>
        </div>
        <div class="col-md-3">
            <img src="content/ten.png">
        </div>
    </div>

</div>

Screenshot of the grid - https://i.stack.imgur.com/a3YBr.jpg

Fenton
  • 241,084
  • 71
  • 387
  • 401
kingprawn123
  • 211
  • 1
  • 3
  • 8

3 Answers3

9

Your grid syntax is incorrect: your first row div has col-md-6, col-md-6, col-md-9 and col-md-3 as children. Bootstrap grid system has 12 columns, not 24.

Maybe try something like this (wrapped col-md-9 and col-md-3 into a new row div):

<div class="container">

    <div class="row">
        <div class="col-md-6">
            <img src="content/one.png">
        </div>

        <div class="col-md-6">
            <div class="row">
                <div class="col-md-6"><img src="content/two.png"></div>
                <div class="col-md-6"><img src="content/three.png"></div>
            </div>
            <div class="row">
                <div class="col-md-6"><img src="content/four.png"></div>
                <div class="col-md-6"><img src="content/five.png"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-3"><img src="content/six.png"></div>
                <div class="col-md-9"><img src="content/seven.png"></div>
            </div>
            <div class="row">
                <div class="col-md-6"><img src="content/eight.png"></div>
                <div class="col-md-6"><img src="content/nine.png"></div>
            </div>
        </div>
        <div class="col-md-3">
            <img src="content/ten.png">
        </div>
    </div>

</div>
Getz
  • 3,983
  • 6
  • 35
  • 52
  • Thanks @Getz, I have aligned the code to the above and made sure each of the rows adds up to 12. The images seem to be in the right place, now not overlapping each-other but the images do not fill the divs so now there is empty spaces! Any ideas? – kingprawn123 Jun 06 '14 at 09:10
  • Mmh, that sounds difficult if you want to keep the ratio of your images (Maybe check that question: http://stackoverflow.com/questions/1891857/how-do-you-stretch-an-image-to-fill-a-div-while-keeping-the-images-aspect-rat). Otherwise, you can fix the height and width the image at 100% in CSS. If you can't make it, you can ask a new question on stackOverflow ;) – Getz Jun 06 '14 at 09:17
  • Thanks again @Getz, its almost like the img does not fit the column size, I wonder if there is a way of restricting the physical size of a column? – kingprawn123 Jun 06 '14 at 09:19
  • By size, you mean width or height? – Getz Jun 06 '14 at 09:20
  • Its the width that seems to be the problem I think - i.imgur.com/NwDnntP.png - @Getz – kingprawn123 Jun 06 '14 at 09:43
  • The syntax is correct in OPs case. Syntax is not the same as convention. Sticking to the rule that elements inside a row need to have only 12 columns max is not necessary, and often hinders the design. @OP: Replace your images with text and verify whether the problem still appears. If not, apply img-responsive class to all images. – Maciej Gurban Jun 06 '14 at 10:53
  • Bootstrap specifically describes [more than 12 columns](http://getbootstrap.com/css/#grid-example-wrapping) as a supported case with a well-defined behavior. In fact, this approach is obligatory if you wanted to be able to reflow columns at different zoom levels. For example... if [...] indicates a row in the view and you wanted a large layout of [3,3,3,3][3,3,3,3] to reflow to [4,4,4][6,6][4,4,4] at a medium size, you could not divide the columns into rows as suggested. – claytond Apr 05 '16 at 15:49
3

I used your grid syntax on a clear bootply, removed the images and it seems to be working OK. You haven't made jsfiddle or bootply, so it's not possible to help you further without it. Here's what your grid looks like with only text:

Bootply example

Try adding img-responsive class to all images inside columns to prevent them from overflowing columns they are in.

Maciej Gurban
  • 5,615
  • 4
  • 40
  • 55
  • Thank you @Maciej Gurban, I will set it up on a bootply or jsfiddle shortly, I can see how it would make the helping process more streamline and effective! I will try an img-responsive class just now. Thanks again :) – kingprawn123 Jun 06 '14 at 11:24
0

If you're trying to achieve a 16x16 grid, your nested column widths are not right:

Start by looking at this section:

    <div class="col-md-9">
        <div class="row">
            <div class="col-md-3"><img src="content/six.png"></div>
            <div class="col-md-9"><img src="content/seven.png"></div>
        </div>

You're nesting a 1/4 column (3/12) in a 3/4 column (9/12). To figure out the final width of the column, multiply them together and get 3/16. You really want a 1/4 (4/16) column. To fix this, you need to divide this (3/4) section into thirds instead of quarters (4/12 = 1/3 and 8/12 = 2/3):

    <div class="col-md-9">
        <div class="row">
            <div class="col-md-4"><img src="content/six.png"></div>
            <div class="col-md-8"><img src="content/seven.png"></div>
        </div>

To make the issue more obvious, add a background color to the cell containing seven.png. You'd see that the color would fill the empty space so the cell is actually there. The picture is just too narrow to make it obvious.

The same fix is necessary for the bottom half of this section:

        <div class="row">
            <div class="col-md-6"><img src="content/eight.png"></div>
            <div class="col-md-6"><img src="content/nine.png"></div>
        </div>
    </div>

Now you're taking a 3/4 column and splitting in into 1/2 so (multiplying again) you're creating a 3/8 (6/16) column on the left where you want 1/2 (8/16ths) and a 3/8 (6/16) column on the right where you want a 1/4 (4/16ths) and another. Again, the fix is to split the balance into thirds:

        <div class="row">
            <div class="col-md-8"><img src="content/eight.png"></div>
            <div class="col-md-4"><img src="content/nine.png"></div>
        </div>
    </div>

And again if you put a background color behind nine.png, you'll see that it does fill the whitespace.

claytond
  • 1,061
  • 9
  • 22