0

I'm currently trying to place some divs using Bootstrap grid system, and after multiple attempts it seems like it's almost working. However, there is some weird extra padding on the right, and I can't figure out how to properly remove it. Here is a JSFiddle of my page: http://jsfiddle.net/3cy0wf2o/1/

If needed, here's what I expect:

Mobile:

Graph
A
B

Tablet:

Graph
A B

Laptop:

Graph A
Graph B

Could anyone help me figure out how to remove this extra padding? Is the current layout used correct?

Gugu72
  • 2,052
  • 13
  • 35

1 Answers1

0

In the JSfiddle, you had .row and .col classes applied on the same div. Column should be inside a row. And when you have nested rows, the inner row should be inside a column of the outer row. See Bootstrap grid nesting.

You can solve this by organizing your row containing the A and B boxes inside a col. You'll then need to "reset" paddings for the columns. See solution fiddle http://jsfiddle.net/wrbyhqf2/2/.

veesar
  • 422
  • 3
  • 11