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

Viewed 22890

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.

1 Answers
Related