5 columns per row in Bootstrap-4
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%;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row my-4">
<div class="col">
<div class="jumbotron">
<h1>Bootstrap 4 - How to set 5 columns per row</h1>
<p class="lead">by djibe.</p>
<p class="text-muted">(thx to BS4)</p>
<h2>Tutorial</h2>
<h3>With Bootstrap 4.4+</h3>
<p>Just add <code>row-cols-5</code> to the row containing your elements</p>
<div class="container-fluid">
<div class="row row-cols-5">
<div class="col card card-body">
.col
</div>
<div class="col card card-body">
.col
</div>
<div class="col card card-body">
.col
</div>
<div class="col card card-body">
.col
</div>
<div class="col card card-body">
.col
</div>
<div class="col card card-body">
.col
</div>
<div class="col card card-body">
.col
</div>
</div>
</div>
<hr class="my-5">
<h3>With Bootstrap < 4.4</h3>
<ol>
<li>We gonna use the magic of CSS3 flexboxes ... or just import row-cols-* classes from BS 4.4.</li>
<li>Apply the class .w-20 on each element, it will spread each element on 1/5th of the width or row</li>
<li>Apply the built-in Bootstrap 4 classes d-flex and flex-wrap to the container of these 15 elements</li>
<li>Et voilà</li>
<li>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.</li>
</ol>
<div class="d-flex flex-wrap">
<div class="card card-body w-20">
<p>
Card 1
</p>
<p>
Extra long content compared to the cards of the same row but all the elements will have the same height
</p>
</div>
<div class="card card-body w-20">
Card 2
</div>
<div class="card card-body w-20">
Card 3
</div>
<div class="card card-body w-20">
Card 4
</div>
<div class="card card-body w-20">
Card 5
</div>
<div class="card card-body w-20">
Card 6
</div>
<div class="card card-body w-20">
Card 7
</div>
<div class="card card-body w-20">
Card 8
</div>
<div class="card card-body w-20">
Card 9
</div>
<div class="card card-body w-20">
Card 10
</div>
<div class="card card-body w-20">
Card 11
</div>
<div class="card card-body w-20">
Card 12
</div>
<div class="card card-body w-20">
Card 13
</div>
<div class="card card-body w-20">
Card 14
</div>
<div class="card card-body w-20">
Card 15
</div>
</div>
</div>
</div>
</div>
</div>If you're working with Bootstrap 4 scss files, then the easiest way is to use default mixin make-col(x,y). For example this code in a layout of 5 columns will create element that covers width of 2 columns. Basically it's 2/5 = 40%:
.my-col {
@include make-col(2, 5);
}
This will result in following css:
.my-col {
flex: 0 0 40%;
max-width: 40%;
}