skip to Main Content

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?

2

Answers


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

    Login or Signup to reply.
  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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search