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.

Usage

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:

https://cdn.jsdelivr.net/gh/hoomanbahreini/bootstrap-half-and-quarter-grid/fractional-grid.css https://cdn.jsdelivr.net/gh/hoomanbahreini/bootstrap-half-and-quarter-grid/fractional-grid.min.css

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 
 */
col-*-1qtr 
col-*-half
col-*-3qtr

Example:

// add a reference to: https://cdn.jsdelivr.net/gh/hoomanbahreini/bootstrap-half-and-quarter-grid/custom-bootstrap-grid.min.csc

<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>
  </div>
</div>