Bootstrap 3 Nesting Issue

Question

I have been working on this for about 2 hours, and nesting in Bootstrap 3 refueses to work. I have even copy pasta'd Bootstrap 3's doc examples and they still look weird.

My issue is that there are always margins/paddings when I do nested grids. Check this out:

http://jliu.me/grill/admin.html

(It's how the two things on the bottom (both col-lg-6) are not aligned with top).

Could somebody help me on this?

Answer 1

Can you please clarify what you mean by 'not aligned with the top'? I presume you are referring to the padding on the left and right sides of the charts?

You do not need to nest these items within the order status row, but rather I would suggest using

row
  col-lg-10 col-offset-1
    [first row here]
  /div
/div
row
  col-lg-5 col-offset-1
    [second row first chart here]
  /div
  col-lg-5
    [second row first chart here]
  /div
/div

using this approach, the outer sides of your charts should align with the outer sides of the 'order status' row.

hope this helps!

Answer 2

.col-lg-5 { padding-right: 0; }
.col-lg-5.col-offset-1 { padding-left: 0; }

I will suggest to add an unique class to each and remove the padding-left form the offset one and the padding-right for the other one

Hope this helps.