5 Columns Layout with Boostrap 4

Today I'll share a quick tip on how to create a five columns layout using Boostrap 4. Even though this version of the popular framework hasn't been released yet, I think it's best to keep an eye on the future.

While this example uses the flexbox version of Boostrap, it will also work if flexbox is disabled.

HTML Markup

The HTML is pretty straight forward. You can use a standard .row instead of .product-feed. But since I am using SASS and I love semantics, I decided to do it the Sass way.

<div class="product-feed">
	<div class="product">One Fifth</div>
	<div class="product">One Fifth</div>
	<div class="product">One Fifth</div>
	<div class="product">One Fifth</div>
	<div class="product">One Fifth</div>
</div>

SASS

I am going to use Sass mixins and variables to create the 5 Columns Layout on large screens only (1140 pixels wide and up). Since I tend to be lazy, I let Sass do the math for me. If I need to get the width for "one fifth", I write 12/4 which is equal to 2.4 or 20%.

.product-feed {
    @include make-row();

    .product {
        margin-bottom: $grid-gutter-width-base;
        @include make-col-ready();

        // 2 Colmuns Layout for 720px and down
        @media (max-width: map-get($grid-breakpoints, md)) {
            @include make-col(12/2);
        }

        // 3 Columns Layout for 720px to 960px
        @media (min-width: map-get($grid-breakpoints, md)) {
            @include make-col(12/3);
        }

        // 4 Columns Layout for 960px to 1140px
        @media (min-width: map-get($grid-breakpoints, lg)) {
            @include make-col(12/4);
        }

        // 5 Columns Layout for 1140px and up
        @media (min-width: map-get($grid-breakpoints, xl)) {
            @include make-col(12/5);
        }
    }
}