How to get 15 columns in Bootstrap 4 in SASS CSS?

Question

I have a layout design clearly made for 1200px / 15 cols framework, but my client wants to use Bootstrap 4 with SASS only. Is it even possible to transform Bootstrap into 15 cols layout? I haven't seen such an example online. I'm not a huge fan of Bootstrap for small projects. It is a trend I honestly don't understand. Might be too heavy for a 5 pages website & projects are usually done according to the content, not according to some framework, Twitter-backed or not.

But, this is it.

If it would be possible to code a 15 cols layout, could you give me a hint on how to begin? And how long would it take to perform such an adaptation?

Answer 1

You just need to change the $grid-columns variable using SASS.

$grid-columns: 15;

You may also want to check out other variables like $grid-gutter-width to decrease the spacing between columns since you're using more columns.

Working Demo

---

Also see:
creating custom grid number for bootstrap - Bootstrap

Answer 2

You can just recompile bootstrap 4 with the proper settings.

The documentation at: https://v4-alpha.getbootstrap.com/layout/grid/#customizing-the-grid should explain it, but since it is a temporary link I'll include it here.

First you should be able to build the SASS into CSS, but overall you just have to set the variable for how many columns before including the bootstrap file to be built, or modify the variable.scss file and change the value of $grid-columns value like so:

$grid-columns:               15;

That is the starting point, you may have to adjust other grid variables to control the total width and gutter between each column etc.