Question

I am trying to use the grid layout functionality in BootMetro. I have a very trivial example which doesn’t result in what I expected.

<div class="container">
    <div class="row">
        <div class="span3">row1column1-3</div>
        <div class="span3">row1column4-6</div>
        <div class="span3">row1column7-9</div>
        <div>row1column10</div>        
        <div>row1column11</div>        
        <div>row1column12</div>        
    </div>
</div>

By default the BootMetro grid gives me a 12 column grid. So the first 3 columns should fill up the first 9 columns. Then the following columns should fill the first row. They don’t, they actually become new rows. Am I doing something wrong?

Answer 1

You have to put a .span indicator on all columns. In your last 3 divs however you didn’t specify anything.

Like if you want 4 columns you’d have 4 divs with span3, if you want 6 columns, the 6 divs with span2 and so on.

The sum of the span values per row have to always sum up to 12.

(Sorry my brevity, I’m writing from my phone)