KevD KevD - 4 months ago 9
CSS Question

Nested div size with offset in bootstrap

<div class="container">
<div class="row">
<div class="col-sm-12" style="background-color:pink;">
<p>
test
</p>
</div>
<div class="col-sm-8 col-sm-offset-2" style="background-color:green;">
<div class="col-sm-8" style="background-color:red;">
<p>
red
</p>
</div>
<div class="col-sm-2" style="background-color:blue;">
<p>
blue
</p>
</div>
<div class="col-sm-2" style="background-color:yellow;">
<p>
yellow
</p>
</div>
</div>
</div>
</div>


https://jsfiddle.net/b7f5ob1g/1/

I created this layout, but i dont understand the sizing.

The outer div with the id="wrapper" got a col size from 8, offset from 2 (which means it gets pulled to the right by 2 cols, so there is 2 cols free space on the right.

So in total i have 8 cols for content.

Now with the 3 inner divs in my understanding i tried to size the columns

div1: col size 6
div2: col size 1
div3: col size 1


So it gets summed up to 8. But to then its too small, I have to sum it up to 12.

Like div1:8, div2:2, div3:2.

Do I have to count in such nested divs to 12 cols or can you explain this situation to me please?

Answer

In Bootstrap grid system all col-* elements have to be wrapped in a .row element. Inside each .row you have 12 columns, no matter how big/small is the parent column container. That said, your html should look like this:

<div class="container">
  <div class="row">
    <div class="col-sm-12" style="background-color:pink;">
      <p>test</p>
    </div>
    <div class="col-sm-8 col-sm-offset-2" style="background-color:green;" id="wrapper">
      <div class="row">
        <div class="col-sm-8" style="background-color:red;">
          <p>red</p>
        </div>
        <div class="col-sm-2" style="background-color:blue;">
          <p>blue</p>
        </div>
        <div class="col-sm-2" style="background-color:yellow;">
          <p>yellow</p>
        </div>
      </div>
    </div>
  </div>
</div>

Fiddle here

Comments