How to adjust the number of columns per row using bootstrap

Question

Using Bootstrap v4alpha, and I'm trying to place 24 images with the inscription at the bottom of the grid. Let me name the tile image with the inscription.

1) I want the tiles to be vertically and horizontally aligned, as if we would use a <table> with top and left alignment. My photos are the same size, but the length of the title changes.

2) the number of columns is adjusted with the screen size. On a small screen we will have 2 columns and 12 rows. On the average screen, 3 columns by 4 rows. There are 4 columns and 3 rows on the big screen.

I tried Card Speakers , and that's almost what I need, except for the masonry. I want them to line up as well.

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

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

Answer 1

You can simply wrap all .col-*-* one single <div class="row">...</div> . If necessary, the contents will be completed.

Now, as for your other question: you do not need to ensure that each row has exactly 12 columns for each screen size. If the column no longer fits (for example, you have .col-*-11 , and then .col-*-2 ), it will automatically go to the next row, even if the previous row is not 100% full.

Another example taken from the download 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 will enter columns 10-13, but since there are only 12 columns, the whole div goes to the next line.

Bootstrap 4

I made a fiddle to show you how this will work in Bootstrap 4. v4 grid system based on flexbox and in flexbox elements will grow to use all available vertical spaces. This means that in the column row, each column will be as high as the highest column.

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

Bootstrap 3

I originally based my answer on Bootstrap 3, and there are several differences, so I will keep this original answer (slightly modified) here also for those who need it.

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

You can check this script to see the difference between using .row and not using .row to compose the image grid. Just adjust the width of the resulting frame and scroll down to see the difference when there are 3 images in a row. Of course, you can use one single .row to put all your .col inside.

Compensation for different content heights

However, since Bootstrap 3 uses float instead of flexbox, this indicates a problem that if your columns do not have the same height, the next column may start to the right of the highest element of the previous column when you want it to start on the left side of the screen. Therefore, to click an item below all previous items, you need to clear these floats.

Bootstrap 3 provides a class for this, you can simply insert <div class="clearfix"> whenever you want to clear floats. In addition, you will need to hide this div for screens where you do not want to clear floats, you can use .hidden-* classes to achieve this.

 <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 script to show everything in action.