Hello,

I am trying the example from Bootstrap 3 for nested columns.

The problem is, the nested row is going out of the parent column.

So this code:

<div class="row" style="border: 1px solid red">
  <div class="col-md-9">
    Level 1: .col-md-9
    <div class="row" style="border: 1px solid blue">
      <div class="col-md-6">
        Level 2: .col-md-6
      </div>
      <div class="col-md-6">
        Level 2: .col-md-6
      </div>
    </div>
  </div>
</div>

The row with the blue border starts about 10px outside of the row with the red border.

Screenshot attached.
d20ec268e4f6a5a1a03172c26601f453
Why is that?

Recommended Answers

All 3 Replies

You probably have something else on the page that is causing it.
I don't see it here http://pixelsoul.com/data/bootstrap/test.html

You will need to post a link to the page or post the relavent code.

Hey,

I too checked, it's looking good.

d30e66d0b76b0e91f0a134a7eb28b608

it is also looking good on my side.

a22ce9712452b18e9e332c99895e2635

code used

 <div class="text-center">
    {% $paginate %}

</div>

<div class="row" style="border: 1px solid red">
<div class="col-md-9">
Level 1: .col-md-9
<div class="row" style="border: 1px solid blue">
<div class="col-md-6">
Level 2: .col-md-6
</div>
<div class="col-md-6">
Level 2: .col-md-6
</div>
</div>
</div>
</div>

</div>

{% /block %}

please ignore the smarty syntax.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.