CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
Philip7899
Philip7899

Reputation: 4677

bootstrap rows not folding properly on mobile

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 class="row no-gutters">
  <div class="col-6 col-sm-4">
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
  <div class="col-6 col-sm-4">
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
  <div class="col-6 col-sm-4">
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
</div>
<div class="row no-gutters">
  <div class="col-6 col-sm-4">
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
  <div class="col-6 col-sm-4">
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
  <div class="col-6 col-sm-4">
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
</div>

Upvotes: 1

Views: 90

Answers (2)

Rok Benko
Rok Benko

Reputation: 22920

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 class="row no-gutters">
  <div class="col-6 col-sm-4">
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
  <div class="col-6 col-sm-4">
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
  <div class="col-6 col-sm-4">
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
  <div class="col-6 col-sm-4">
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
  <div class="col-6 col-sm-4">
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
  <div class="col-6 col-sm-4">
    <img src="https://via.placeholder.com/600" style="max-width: 100%;">
  </div>
</div>

Upvotes: 1

isherwood
isherwood

Reputation: 61083

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 class="d-flex flex-wrap">
  <div class="img-box">
    <img src="https://via.placeholder.com/600" class="img-fluid">
  </div>
  <div class="img-box">
    <img src="https://via.placeholder.com/600/ccaaaa" class="img-fluid">
  </div>
  <div class="img-box">
    <img src="https://via.placeholder.com/600" class="img-fluid">
  </div>
  <div class="img-box">
    <img src="https://via.placeholder.com/600/ccaaaa" class="img-fluid">
  </div>
  <div class="img-box">
    <img src="https://via.placeholder.com/600" class="img-fluid">
  </div>
  <div class="img-box">
    <img src="https://via.placeholder.com/600/ccaaaa" class="img-fluid">
  </div>
</div>

Upvotes: 0

Related Questions