Bootstrap Nested Grids

Question

I'm working with a 16 columns Bootstrap.

The design I'm trying to achieve is it:

enter image description here

And my code is it:

<div class="row">

<div class="col-xs-12 col-xs-offset-1">

    <!-- Images goes here -->

</div>

<div class="col-xs-3">

    <!-- Paginator Links -->

</div>

</div>

The main problem is that inside my col-xs-12 div, I have 3 big columns with an image inside each one and in this "scope" my columns are reseted to 16 so I cant divide it by 3.

Am I doing it the right way?

Look at the image, there are two main columns, one with the images and the other with the pagination. Inside the one with the images I have three columns with the images inside. I want images in 3 columns, the problem is that I cant divide 16 (the main grid columns number) in three columns — Alan, Feb 05 '15 at 23:08
I say 16 because when I insert a row inside the .col-xs-12 column its reseted to 16 — Alan, Feb 05 '15 at 23:10

score 0 · Answer 1 · edited May 23 '17 at 12:06

If you're using a 16-column Boostrap you could still use the top-level grid as long as you don't nest other .row elements.

Instead of

<div class="col-xs-12 col-xs-offset-1">
  <!-- images here -->
</div>

Try using:

<div class="col-xs-4 col-xs-offset-1">
  <!-- image here -->
</div>
<div class="col-xs-4">
  <!-- image here -->
</div>
<div class="col-xs-4">
  <!-- image here -->
</div>

If you run into problems with columns not floating properly you could use a .clearfix method.

Bootstrap Nested Grids

1 Answers1