Bootstrap 5 Columns In a Row

There is a Mobile Optimized version of this page (AMP). Open Mobile Version.

Today I needed a solution to a problem, my designer had designed a fantastic category page for a clients eCommerce store, the category page featured rows of 5 products, which on firth thinking I thought I could get away with maybe 4 in a row or perhaps even 6 in a row. Unfortunately 4 meant there was too much space within the boxes and 6 meant everything was too small, so I had to find a solution to allow me 5 columns in Bootstrap.

I found this amazing CSS code on Stack Overflow which might help you too, just add it to your css code and follow my example code to use it:

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}

.col-xs-5ths {
width: 20%;
float: left;
}

@media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: left;
}
}

@media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: left;
}
}

@media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: left;
}
}

Here is an example of how to use it in your site for 5 columns instead of 4 columns or 6 columns. Of course you can use md, sm, lg, or xs.

<div class="row">
<div class="col-md-5ths col-xs-6">
...
</div>
</div>

Author: Dean Williams

I'm a Web Developer, Graphics Designer and Gamer, this is my personal site which provides PHP programming advice, hints and tips