Back

“Customize Bootstrap Grid” Documentation

“Customize Bootstrap Grid”



Contact me

Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to Contact me. Thanks so much!

Table of Contents

  1. About Customize Bootstrap Grid
  2. Features
  3. How its work
  4. Sources and Credits

A) About Customize Bootstrap Grid - top

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.
Suppose we have two columns in grid now we just need to add width in first column (in pixel) second column adjust automatically for that we don't need to write style OR class.
Customize Bootstrap Grid plugin is just overwrite Bootstrap v5.1.3 grid width its not affect any other styles and code.
This plugin also works for previous bootstrap versions.
Note : Bootstrap v5.1.3 knowledge is require for use this plugin.

B) Features - top

  1. Pixel base grid in Bootstrap v5.1.3
  2. Working with all devices
  3. Auto adjust last column width in Grid
  4. Very easy to use
  5. Full support and documentation

C) How its work - top

Lets understand example of two columns grid.
Here is code for Two Columns Grid

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

Now lets customize it by use of Customize Bootstrap Grid
First we have to add below script.

<script src="js/custom-grid.js"></script>
<script>
    $('.custom-grid').CustomGrid();
    $(window).resize(function() {
        $('.custom-grid').CustomGrid();
    });
</script>

Here is the code of Customize Bootstrap Grid

<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">.col-??-6</div>
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">.col-??-6</div>
</div>
Customizable Two Columns Grid

Look at the below table for more understanding

Customizable Two Columns Grid

data-col-xs, data-col-sm, data-col-md, data-col-lg
These are custom attributes. By use of these attributes we can set grid width in pixel.

E) Sources and Credits - top

Once again, thank you so much for purchasing Customize Bootstrap Grid. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.

Go To Table of Contents