2

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?

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Md.Mahmudul Hasan Tuhin
  • 21
  • 3
  • You could strip out the grid system out of bootstrap. Furthermore, 15 is only splittable by 5 and 3, while 12 is splittable by 2, 3, 4 and 6. It saves you so much time. As to making your own grid, somewhere between 3 to 4 hours (if you do it structurally), depending on your experience. – DevNebulae Jan 06 '17 at 19:51

2 Answers2

3

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.

MiltoxBeyond
  • 2,683
  • 1
  • 13
  • 12
  • The updated documentation for the current version is here: [https://getbootstrap.com/docs/4.1/layout/grid/](https://getbootstrap.com/docs/4.1/layout/grid/) – StephenSolace Jun 24 '18 at 02:35
2

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624