5-column layout with Bootstrap 4

Bootstrap is an awesome toolkit when it comes to build responsive web pages that work across different browsers with little effort. Its grid system is very well crafted, but it doesn’t allow to have a number of same-width columns per row which is not a divisor of 12.

Note: I know one could use the CSS grid now, but this article is about Bootstrap.

It some cases, one wants/needs to fit, for instance, 5 equal-width columns in a row, and to have them take all the available space. Good news, this is possible: you just need a few custom CSS rules.

Let’s stick to the example of 5 columns per row. We need a col-? rule for that. 12 / 5 = 2.4, so it’s a column which is 2.4 columns wide: let’s call it col-2dot4 (and col-sm-2dot4, col-md-2dot4, …).

Each column should eat 20% of the available space (100 / 5 = 20): that’s easy.

The CSS code which comes out is this:

.col-2dot4,
.col-sm-2dot4,
.col-md-2dot4,
.col-lg-2dot4,
.col-xl-2dot4 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-2dot4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}
@media (min-width: 540px) {
    .col-sm-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 720px) {
    .col-md-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 960px) {
    .col-lg-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 1140px) {
    .col-xl-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

As of my latest tests, this solution works fine with Boostrap 4.1.1.