Create 5 columns on repeat in Bootstrap 4

Question

I have to create a 5 column grid in Bootstrap 4 to show over 100 images. The code below works ONLY if I have 5 items. How can I go about it?

PS: It must change 2 column grid on mobile screen.

I understand there's a lot of duplicate with correctly marked answer but there's no actual solution to it when I have more than 5 column.

JSFiddle Demo: https://jsfiddle.net/fwg2os0h/

<div class="row">
   <div class="col">
      1
   </div>
   <div class="col">
      2
   </div>
   <div class="col">
      3
   </div>
   <div class="col">
      4
   </div>
   <div class="col">
      5
   </div>
   <div class="col">
      6
   </div>
   <div class="col">
      7
   </div>
   <div class="col">
      8
   </div>
   <div class="col">
      9
   </div>
   <div class="col">
      10
   </div>
</div>

@IvanKaraman This is very much a flexbox question... So the solution actually lies in the CSS. — Praveen Kumar Purushothaman, Oct 22 '19 at 12:25
@ElaineByene this task isn't for bootstrap, good solution will be using some image grid, like masonry or something similar other solution to create a custom layout... — Ivan Karaman, Oct 22 '19 at 12:31

score 2 · Accepted Answer · answered Oct 22 '19 at 12:19

2

Maybe, you can set the min-width to 20% and that should fix it. At any point of time, this will have a minimum width of 20%, which will force it to show only 5 a row.

.my-col {
  min-width: 20%;
}

And for the mobile support, please use a custom media query to set min-width: 50%.

@media screen and (max-width: 480px) {
  .my-col {
    min-width: 50%;
  }
}

Demos

Here's how it looks when it's normal.

.my-col {
  min-width: 20%;
}
@media screen and (max-width: 480px) {
  .my-col {
    min-width: 50%;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col my-col">
    1
  </div>
  <div class="col my-col">
    2
  </div>
  <div class="col my-col">
    3
  </div>
  <div class="col my-col">
    4
  </div>
  <div class="col my-col">
    5
  </div>
  <div class="col my-col">
    6
  </div>
  <div class="col my-col">
    7
  </div>
  <div class="col my-col">
    8
  </div>
  <div class="col my-col">
    9
  </div>
  <div class="col my-col">
    10
  </div>
</div>

When you have less than 5, it will automatically show them justified.

.my-col {
  min-width: 20%;
}
@media screen and (max-width: 480px) {
  .my-col {
    min-width: 50%;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col my-col">
    1
  </div>
  <div class="col my-col">
    2
  </div>
  <div class="col my-col">
    3
  </div>
  <div class="col my-col">
    4
  </div>
</div>

answered Oct 22 '19 at 12:19

Praveen Kumar Purushothaman

164,888
24
203
252

Thanks. There's no bootstrap 4 class that supports this out of the box? – Elaine Byene Oct 22 '19 at 12:22
@ElaineByene Nopes, nothing as of now. But this is a complete bespoke custom requirement, and I don't think this kind of solution will be implemented in a framework like this. – Praveen Kumar Purushothaman Oct 22 '19 at 12:23
@ElaineByene If we aren't using the Bootstrap's Grid for this, and giving 20% arbitrarily, it will be perfect as we don't have a 5 column layout. It's either 6 column or 4 column as it is based on a 12 column layout. – Praveen Kumar Purushothaman Oct 22 '19 at 12:31
btw, found a problem. if I don't have exact 5 items, the width expands to 100%. See the last row here: https://jsfiddle.net/xuL8h5vm/ – Elaine Byene Oct 22 '19 at 12:32
@ElaineByene That's what I mentioned here: `When you have less than 5, it will automatically show them justified.` Did you miss that? If you don't want it justified, you can just use `width: 20%` instead of `min-width: 20%`. – Praveen Kumar Purushothaman Oct 22 '19 at 12:33
I did that but its not working: https://jsfiddle.net/xuL8h5vm/1/ – Elaine Byene Oct 22 '19 at 12:35
1

@ElaineByene Fixed it here: [**JSFiddle**](https://jsfiddle.net/0pbxzdtv/). Just add `max-width` with the same value too. – Praveen Kumar Purushothaman Oct 22 '19 at 12:37
@ElaineByene If you want, I can update my answer to match the output here: [**Working Fiddle**](https://jsfiddle.net/0pbxzdtv/). We just need to add `max-width` with the same value too. – Praveen Kumar Purushothaman Oct 22 '19 at 12:38

Carol Skelly · Answer 2 · 2019-10-22T12:36:23.653

2

I think it would be easiest to add a media query based column width class for 20%...

@media (min-width: 768px){
    .col-sm-five {
        flex: 0 0 20%;
        max-width: 20%;
    }
}


<div class="container">
    <div class="row">
        <div class="col-6 col-sm-five">
            1
        </div>
        <div class="col-6 col-sm-five">
            2
        </div>
        <div class="col-6 col-sm-five">
            3
        </div>
         ..
     </div> 
</div>

https://www.codeply.com/go/RRp8uUraZe

edited Oct 22 '19 at 12:36

answered Oct 22 '19 at 12:29

Carol Skelly

351,302
90
710
624

Quick question. This looks nice. But how does this work? Comparing to my solution, which is just setting a `max-width`, should we also set the `flex` property? – Praveen Kumar Purushothaman Oct 22 '19 at 12:30
I can't override the core bootstrap function. This would create a lot of problem for other pages. – Elaine Byene Oct 22 '19 at 12:33
Then just rename the `col-sm-2` to something else like `col-sm-five` ... concept is still the same. – Carol Skelly Oct 22 '19 at 12:35
Thank you. I already accepted the other answer but your solution works too. Thank you so much. – Elaine Byene Oct 22 '19 at 12:38
1

@PraveenKumarPurushothaman - yep, it works with just max-width too but may vary in width depending on column content – Carol Skelly Oct 22 '19 at 12:41

Naseki · Answer 3 · 2019-10-22T12:33:27.077

0

Please check out Bootstrap's docs about grid systems.

Play around with the numbers to get what you want. col-md- is for tablets or bigger, col-sm- for mobile.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-2 col-sm-6">
    1
  </div>
  <div class="col-md-2 col-sm-6">
    2
  </div>
  <div class="col-md-2 col-sm-6">
    3
  </div>
  <div class="col-md-2 col-sm-6">
    4
  </div>
  <div class="col-md-2 col-sm-6">
    5
  </div>
  <div class="col-md-2 col-sm-6">
    6
  </div>
  <div class="col-md-2 col-sm-6">
    7
  </div>
  <div class="col-md-2 col-sm-6">
    8
  </div>
  <div class="col-md-2 col-sm-6">
    9
  </div>
  <div class="col-md-2 col-sm-6">
    10
  </div>
</div>

edited Oct 22 '19 at 12:33

answered Oct 22 '19 at 12:30

Naseki

59
4

Why did you use `col-sm-5` instead of `col-sm-6`? – Praveen Kumar Purushothaman Oct 22 '19 at 12:31
`col-md-2` would create 6 columns instead. I'm looking to create 5 columns. – Elaine Byene Oct 22 '19 at 12:34
Good question. Corrected that now. – Naseki Oct 22 '19 at 12:34
There's nothing in Bootstrap that helps you with that, currently. You'd have to change the flex value of the column to 0 0 20% and give the max-width the same value. – Naseki Oct 22 '19 at 12:39

Create 5 columns on repeat in Bootstrap 4

3 Answers3