5 columns per row in Bootstrap-4

Question

I have 15 records, I want to show all of it in a 5 columns per row. So I am using the auto column available in bootstrap 4 \".col\", is there a way to limit column counts per ro

Answer 1

Updated 2019/12/02

For Bootstrap < 4.4 : Get rid of these Bootstrap columns and just use the magic of flexboxes.

Just add my .w-20 class to your CSS.

See it in action in my fiddle.

For Bootstrap >= 4.4 : Use the brand new row-cols-* classes

Add .row-cols-5 to your .row containing elements. No custom CSS needed.

See the 4.4 doc here : https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

Now play with my fiddle and observe the same results in my fiddle with both techniques :

.w-20 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20% !important;
          flex: 0 0 20% !important;
  max-width: 20%;
}

  

    

      

        
Bootstrap 4 - How to set 5 columns per row
        
by djibe.
        
(thx to BS4)
        
Tutorial
        
With Bootstrap 4.4+
        
Just add row-cols-5 to the row containing your elements
        

          

            

            .col
            
            

            .col
            
            

            .col
            
            

            .col
            
            

            .col
            
            

            .col
            
            

            .col
            
          
        
        

        
With Bootstrap < 4.4
        

        
We gonna use the magic of CSS3 flexboxes ... or just import row-cols-* classes from BS 4.4.
        
Apply the class .w-20 on each element, it will spread each element on 1/5th of the width or row
        
Apply the built-in Bootstrap 4 classes d-flex and flex-wrap to the container of these 15 elements
        
Et voilà
        
This fiddle is crap so I had to add the !important definition to my CSS class. But you can get rid of them in your project.
        
        

          

          

          Card 1
          
          

          Extra long content compared to the cards of the same row but all the elements will have the same height
          
          
          

          Card 2
          
          

          Card 3
          
          

          Card 4
          
          

          Card 5
          
          

          Card 6
          
          

          Card 7
          
          

          Card 8
          
          

          Card 9
          
          

          Card 10
          
          

          Card 11
          
          

          Card 12
          
          

          Card 13
          
          

          Card 14
          
          

          Card 15