How can I adjust the number of columns per row with bootstrap

Question

Using Bootstrap v4alpha and I am trying to layout 24 pictures w/ caption underneath in grid. Let's call a tile a picture with its caption.

1) I want the tiles to be aligned vertically and horizontally as we would have if using a < table > tag with align top and left. My pictures are of the same size, but the caption length varies.

2) the number of columns adjusts with screen size. On a small screen, we would have 2 columns and 12 rows. On a medium screen 3 cols by 4 rows. On a large screen 4 cols and 3 rows.

I tried the Cards Columns and it's almost what I need, except the masonry look. I want them also aligned in rows.

I also tried the Grid Options with col-sm-6, col-md-4, and col-lg-3 however the problem lies in the fact I need to wrap a fix number of tiles within a tag < div class="row" >.

This problem also exist in previous versions of Bootstrap, but if there is a specific solution for v4, I would like to know as well.

Answer 1

You can just wrap all .col-*-* with one single <div class="row">...</div>. Your content will wrap when needed.

Now, as for your other question: You don't need to make sure that there are exactly 12 columns in each row for each screen size. If a column doesn't fit anymore (for example you have .col-*-11 and then .col-*-2) it will go to the next row automatically, even if the previous row is not 100% full.

Another example taken from Bootstrap's documentation

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

Here .col-4 would introduce columns 10-13, but since there are only 12 columns, the whole div goes to the next row.

Bootstrap 4

I made a fiddle to show you, how this would work in Bootstrap 4. v4's grid system is based on flexbox and in flexbox an items will grow to use all available vertical space. This means that in a row of columns, each column will be as tall as the tallest column.

This is a huge difference to Bootstrap 3 and means that there is no need to compensate for different heights of the content.

Bootstrap 3

I originally based my answer on Bootstrap 3 and there are a few differences, so I'll keep that original answer (slightly modified) here as well for anybody who needs it.

In Bootstrap 3, you can omit the .row altogether and use .container as the parent to all the .col-*-*.

You can check out this fiddle to see the difference between using .row and not using .row to layout a grid of images. Just adjust the width of the result-frame and scroll down to see the difference when there are 3 images in a row. Of course you can also use one single .row to put all your .cols inside.

Compensating for different content height

However, since Bootstrap 3 uses floats instead of flexbox, this introduces the problem that if your columns are not the same height, the next column might start at the right of the highest element of the previous column when you want it to start at the left of the screen. So in order to push an element below all previous elements, you need to clear these floats.

Bootstrap 3 provides a class for this, you can just insert <div class="clearfix"> whenever you want to clear the floats. Additionally, you will have to hide that div for screensizes where you don't want to clear the floats, you can use the classes .hidden-* to achieve that.

<div class="container">
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>

  <!-- on small devices the first row is full here, so we add a clearfix and hide it for medium and large sizes -->
  <div class="clearfix hidden-md hidden-lg"></div>

  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>

  <!-- on medium devices the first row is full here, so we add a clearfix and hide it for small and large sizes -->
  <div class="clearfix hidden-sm hidden-lg"></div>

  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
</div>

Again, I made a fiddle to show the whole thing in action.