January 5, 2017

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%.