DEV Community

Hooman Bahraini
Hooman Bahraini

Posted on

How to use half and quarter columns using Bootsrap 4 grid system

We know that Bootstrap bootstrap divides the screen into 12 columns. Each column is 1/12th of entire screen...

But what if you want to a column which is 1.5 column wide? I recently came across a scenario where I wanted my columns wo be slightly wider that 1 column... say 1.25

In order to achieve this, I created a custom bootstrap extension, which allows using fractions of columns.


In order to use bootstrap-half-and-quarter-grid library, you just need to include the css file in your project. You can either copy/paste the file or use one of the following CDNs:

Once you have included the library in your project then you can use its class... there are 3 main classes:

 * replace star with a number between 0 and 11 
Enter fullscreen mode Exit fullscreen mode




// add a reference to:

<div class="container">
  <h2>Using fraction of columns</h2>
  <div class="row">
    <div class="col-2-1qtr bg-success">2 and quarter</div>
    <div class="col-3-3qtr bg-warning">3 and 3 quarter</div>
    <div class="col-2-half bg-success">2 and half</div>
    <div class="col-3-half bg-warning">3 and half</div>
Enter fullscreen mode Exit fullscreen mode


About Me:

I am software developer at Shopless online marketplace based in Wellington NZ.

Top comments (0)