bootstrap rows not folding properly on mobile

Question

I am using bootstrap to make rows of images. On phone screens, there should be 2 images per row. On every screen size larger than phones, there should be 3 images per row. The code below works for screens larger than a phone, but on a phone it leaves a blank space after the 3rd image. How do I make it so on mobile there are no missing spaces?

user_10347145 · Answer

Is there any reason to have two rows? If not, this is the solution.

See the snippet below.

user_1264804 · Answer

You probably want raw flexbox rather than rows and columns. Use flex-basis on a custom class to handle wrapping.

Since "larger than phones" isn't particularly specific I went with the medium breakpoint (768px) to correspond with Bootstrap's native breakpoints. You may prefer 992px or even 1200px.

Protip: Bootstrap already has a class for image max-width (and you shouldn't use inline styles anyway--create custom classes where needed).

.img-box {
  flex-basis: calc(100%/2);
}

@media (min-width: 768px) {
  .img-box {
    flex-basis: calc(100%/3);
  }
}

bootstrap rows not folding properly on mobile

2 Answers