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.

Two Columns Grid (Default)

CSS which applied to two column grid .col-xs-6 { width: 50%; } .col-sm-6 { width: 50%; } .col-md-6 { width: 50%; } .col-lg-6 { width: 50%; }

Width in percentages

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

Customizable Two 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-6 col-sm-6 col-md-6 col-lg-6" data-col-xs="100" data-col-sm="150" data-col-md="200" data-col-lg="250">....</div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">....</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 Tablets (≥768px) width is 150px (data-col-sm="150")
for medium devices Desktops (≥992px) width is 200px (data-col-sm="200")
for large devices Desktops (≥1200px) width is 250px (data-col-sm="250")

Second column width set dynamically based on first 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`