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.

Four Columns Grid (Default)

CSS which applied to four column grid .col-xs-3 { width: 25%; } .col-sm-3 { width: 25%; } .col-md-3 { width: 25%; } .col-lg-3 { width: 25%; }

Width in percentages

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

Customizable Four 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-3 col-sm-3 col-md-3 col-lg-3" data-col-xs="70" data-col-sm="100" data-col-md="150" data-col-lg="200">....</div>
                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" data-col-xs="80" data-col-sm="150" data-col-md="200" data-col-lg="250">....</div>
                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" data-col-xs="90" data-col-sm="200" data-col-md="250" data-col-lg="300">....</div>
                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">....</div>
                </div>

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

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

Width applied to the second column :

for extra small devices like Phones (<768px) width is 80px (data-col-xs="80")
for small devices like Tablets (≥768px) width is 100px (data-col-sm="150")
for medium devices like 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 third column :

for extra small devices like Phones (<768px) width is 90px (data-col-xs="90")
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")

Forth column width is set dynamically based on first, second and third 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`