Customize Bootstrap Grid In Pixel v5.1.3

As we know Bootstrap v5.1.3 doesn't provide a pixel base Grid system.
By use of Customize Bootstrap Grid we can create pixel base grid dynamically in Bootstrap v5.1.3 for all resolution and all devices. This plugin also works for previous bootstrap versions.

Three Columns Grid (Default)

CSS which applied to three column grid .col-xs-4 { width: 33.3333%; } .col-sm-4 { width: 33.3333%; } .col-md-4 { width: 33.3333%; } .col-lg-4 { width: 33.3333%; }

Width in percentages

            
                <div class="row">
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">....</div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">....</div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">....</div>
                </div>

Customizable Three Columns Grid

Here are attributes which update column grid width (in pixel) (data-col-xs="?") (data-col-sm="?") (data-col-md="?") (data-col-lg="?")

Width in pixel

            
                <div class="row custom-grid">
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" data-col-xs="100" data-col-sm="150" data-col-md="200" data-col-lg="250">....</div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" data-col-xs="150" data-col-sm="200" data-col-md="250" data-col-lg="300">....</div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">....</div>
                </div>

This is how the width is applied (in pixel) to the first column :

for extra small devices like Phones (<768px) width is 100px (data-col-xs="100")
for small devices like Tablets (≥768px) width is 100px (data-col-sm="150")
for medium devices lik Desktops (≥992px) width is 200px (data-col-sm="200")
for large devices like Desktops (≥1200px) width is 250px (data-col-sm="250")

Width applied to the second column :

for extra small devices like Phones (<768px) width is 100px (data-col-xs="150")
for small devices like Tablets (≥768px) width is 200px (data-col-sm="200")
for medium devices like Desktops (≥992px) width is 250px (data-col-sm="250")
for large devices like Desktops (≥1200px) width is 300px (data-col-sm="300")

Third column width is set dynamically based on first and second column width

	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Bootstrap v5.1.3 Class prefix	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
Customize Bootstrap Grid Attributes	`data-col-xs`	`data-col-sm`	`data-col-md`	`data-col-lg`