How to use Bootstrap 5 with 16 or 24 columns without Sass-CodePudding

I need some help setting Bootstrap 5 to be 16 or 24 column instead of the default 12 columns.

I tried this Bootstrap Customize but it's an old version I want to be able to change the grid from 12 to 16 or more depend on the psd design

I want to do that from the Bootstrap itself from the files of Bootstrap. I don't use Sass/less

Can anyone guide me to change the grid from 12 to 16?

CodePudding user response：

Are you looking for this? Take a look.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div >
    <h3>24 columns</h3>
    <div >
        <div >
            <div >
                <div >x</div>
                <div >x</div>
                <div >x</div>
                <div >x</div>
                <div >x</div>
                <div >x</div>
            </div>
        </div>
        <div >
            <div >
                <div >x</div>
                <div >x</div>
                <div >x</div>
                <div >x</div>
                <div >x</div>
                <div >x</div>
            </div>
        </div>
        <div >
            <div >
                <div >x</div>
                <div >x</div>
                <div >x</div>
                <div >x</div>
                <div >x</div>
                <div >x</div>
            </div>
        </div>
        <div >
            <div >
                <div >x</div>
                <div >x</div>
                <div >x</div>
                <div >x</div>
                <div >x</div>
              <div >x</div>
            </div>
        </div>
    </div>
</div>

CodePudding user response：

Ultimately it comes down to just a division of 100% by the number of cols you need.

What you can do is adding your own custom classes for 13 For example your col-13 class will be:

.col-13 {
 width:calc(100% / 13);
}

Please keep in mind you don't support responsive behavior yet, you can add a media query where your (example) set the width on 100% when width < 768;

If you are using SASS and want to do above a little easier you can go for a setup like this:

$cols: 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16;

@each $col in $cols {
  .col-#{$col} {
    width:calc(100% / 16 * $col);
  }
}

Above are all custom solutions, as mentioned above in the comments the best answer for this question should be:

https://getbootstrap.com/docs/5.0/layout/grid/#variables