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>
Twitter
Facebook
Linkedin