bootstrap rows not folding properly on mobile-CodePudding

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?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

<div >
  <div >
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
  <div >
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
  <div >
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
</div>
<div >
  <div >
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
  <div >
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
  <div >
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
</div>

CodePudding user response：

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

See the snippet below.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

<div >
  <div >
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
  <div >
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
  <div >
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
  <div >
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
  <div >
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
  <div >
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
</div>

CodePudding user response：

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);
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

<div >
  <div >
    <img src="https://via.placeholder.com/600" >
  </div>
  <div >
    <img src="https://via.placeholder.com/600/ccaaaa" >
  </div>
  <div >
    <img src="https://via.placeholder.com/600" >
  </div>
  <div >
    <img src="https://via.placeholder.com/600/ccaaaa" >
  </div>
  <div >
    <img src="https://via.placeholder.com/600" >
  </div>
  <div >
    <img src="https://via.placeholder.com/600/ccaaaa" >
  </div>
</div>