Overview
Working with bootstrap I realize that there were no any specific grid structure for Five, Seven, Ten and Eleven equal width grid and offset.
As a web designer I was recently facing some design with five and seven grid structure so I have decided to create some custom stylesheet for this type of grid system with similar offset structure, and it really works well with bootstrap structure and also without affecting their grid system. Following is some instruction how to use this grid structure. Hope this stylesheet is helpful for your similar design structure.
Following are some points that you must take a look at
- Put “custom-bootstrap-grid.css” under your bootstrap.css
- Every class of custom grid indicates individual width for specific div in which you put that class.
- It will come with custom padding from both sides as bootstrap grid padding system. [ Ex: 15px ]
- It will also work with specific resolution as bootstrap like “xs, sm, md, lg”.
How to use classes for the responsive grid as well as offset
Extra-small device:
cust-xs-grid-“Grid Number”, cust-xs-offset-grid-“Grid Number”
Small device:
cust-sm-grid-“Grid Number”, cust-sm-offset-grid-“Grid Number”
Medium device:
cust-md-grid-“Grid Number”, cust-md-offset-grid-“Grid Number”
Large device:
cust-lg-grid-“Grid Number”, cust-lg-offset-grid-“Grid Number”
You can use “Grid number” as 5, 7, 10, 11.
For Example Grid number 5, 7, 10, 11:
cust-xs-grid-5, cust-sm-grid-5, cust-md-grid-5, cust-lg-grid-5
cust-xs-grid-7, cust-sm-grid-7, cust-md-grid-7, cust-lg-grid-7
cust-xs-grid-10, cust-sm-grid-10, cust-md-grid-10, cust-lg-grid-10
cust-xs-grid-11, cust-sm-grid-11, cust-md-grid-11, cust-lg-grid-11
Five Grid width & offset Example
Grid
<div>
<div class="cust-xs-grid-5 cust-sm-grid-5 cust-md-grid-5 cust-lg-grid-5"><div class="common-div">1</div></div>
<div class="cust-xs-grid-5 cust-sm-grid-5 cust-md-grid-5 cust-lg-grid-5"><div class="common-div">2</div></div>
<div class="cust-xs-grid-5 cust-sm-grid-5 cust-md-grid-5 cust-lg-grid-5"><div class="common-div">3</div></div>
<div class="cust-xs-grid-5 cust-sm-grid-5 cust-md-grid-5 cust-lg-grid-5"><div class="common-div">4</div></div>
<div class="cust-xs-grid-5 cust-sm-grid-5 cust-md-grid-5 cust-lg-grid-5"><div class="common-div">5</div></div>
<div class="clearfix"></div>
</div>
Offset
<div>
<div class="cust-xs-grid-5 cust-sm-grid-5 cust-md-grid-5 cust-lg-grid-5"><div class="common-div">1</div></div>
<div class="cust-xs-grid-5 cust-sm-grid-5 cust-md-grid-5 cust-lg-grid-5 cust-xs-offset-grid-5 cust-sm-offset-grid-5 cust-md-offset-grid-5 cust-lg-offset-grid-5"><div class="common-div">2</div></div>
<div class="cust-xs-grid-5 cust-sm-grid-5 cust-md-grid-5 cust-lg-grid-5"><div class="common-div">3</div></div>
<div class="cust-xs-grid-5 cust-sm-grid-5 cust-md-grid-5 cust-lg-grid-5"><div class="common-div">4</div></div>
<div class="clearfix"></div>
</div>
Seven Grid width & offset Example
Grid
<div>
<div class="cust-xs-grid-7 cust-sm-grid-7 cust-md-grid-7 cust-lg-grid-7"><div class="common-div">1</div></div>
<div class="cust-xs-grid-7 cust-sm-grid-7 cust-md-grid-7 cust-lg-grid-7"><div class="common-div">2</div></div>
<div class="cust-xs-grid-7 cust-sm-grid-7 cust-md-grid-7 cust-lg-grid-7"><div class="common-div">3</div></div>
<div class="cust-xs-grid-7 cust-sm-grid-7 cust-md-grid-7 cust-lg-grid-7"><div class="common-div">4</div></div>
<div class="cust-xs-grid-7 cust-sm-grid-7 cust-md-grid-7 cust-lg-grid-7"><div class="common-div">5</div></div>
<div class="cust-xs-grid-7 cust-sm-grid-7 cust-md-grid-7 cust-lg-grid-7"><div class="common-div">6</div></div>
<div class="cust-xs-grid-7 cust-sm-grid-7 cust-md-grid-7 cust-lg-grid-7"><div class="common-div">7</div></div>
<div class="clearfix"></div>
</div>
Offset
<div>
<div class="cust-xs-grid-7 cust-sm-grid-7 cust-md-grid-7 cust-lg-grid-7"><div class="common-div">1</div></div>
<div class="cust-xs-grid-7 cust-sm-grid-7 cust-md-grid-7 cust-lg-grid-7 cust-xs-offset-grid-7 cust-sm-offset-grid-7 cust-md-offset-grid-7 cust-lg-offset-grid-7"><div class="common-div">2</div></div>
<div class="cust-xs-grid-7 cust-sm-grid-7 cust-md-grid-7 cust-lg-grid-7"><div class="common-div">3</div></div>
<div class="cust-xs-grid-7 cust-sm-grid-7 cust-md-grid-7 cust-lg-grid-7"><div class="common-div">4</div></div>
<div class="cust-xs-grid-7 cust-sm-grid-7 cust-md-grid-7 cust-lg-grid-7"><div class="common-div">5</div></div>
<div class="cust-xs-grid-7 cust-sm-grid-7 cust-md-grid-7 cust-lg-grid-7"><div class="common-div">6</div></div>
<div class="clearfix"></div>
</div>
Ten Grid width & offset Example
Grid
<div>
<div class="cust-xs-grid-10 cust-sm-grid-10 cust-md-grid-10 cust-lg-grid-10"><div class="common-div">1</div></div>
<div class="cust-xs-grid-10 cust-sm-grid-10 cust-md-grid-10 cust-lg-grid-10"><div class="common-div">2</div></div>
<div class="cust-xs-grid-10 cust-sm-grid-10 cust-md-grid-10 cust-lg-grid-10"><div class="common-div">3</div></div>
<div class="cust-xs-grid-10 cust-sm-grid-10 cust-md-grid-10 cust-lg-grid-10"><div class="common-div">4</div></div>
<div class="cust-xs-grid-10 cust-sm-grid-10 cust-md-grid-10 cust-lg-grid-10"><div class="common-div">5</div></div>
<div class="cust-xs-grid-10 cust-sm-grid-10 cust-md-grid-10 cust-lg-grid-10"><div class="common-div">6</div></div>
<div class="cust-xs-grid-10 cust-sm-grid-10 cust-md-grid-10 cust-lg-grid-10"><div class="common-div">7</div></div>
<div class="cust-xs-grid-10 cust-sm-grid-10 cust-md-grid-10 cust-lg-grid-10"><div class="common-div">8</div></div>
<div class="cust-xs-grid-10 cust-sm-grid-10 cust-md-grid-10 cust-lg-grid-10"><div class="common-div">9</div></div>
<div class="cust-xs-grid-10 cust-sm-grid-10 cust-md-grid-10 cust-lg-grid-10"><div class="common-div">10</div></div>
<div class="clearfix"></div>
</div>
Offset
<div>
<div class="cust-xs-grid-10 cust-sm-grid-10 cust-md-grid-10 cust-lg-grid-10"><div class="common-div">1</div></div>
<div class="cust-xs-grid-10 cust-sm-grid-10 cust-md-grid-10 cust-lg-grid-10 cust-xs-offset-grid-10 cust-sm-offset-grid-10 cust-md-offset-grid-10 cust-lg-offset-grid-10"><div class="common-div">2</div></div>
<div class="cust-xs-grid-10 cust-sm-grid-10 cust-md-grid-10 cust-lg-grid-10"><div class="common-div">3</div></div>
<div class="cust-xs-grid-10 cust-sm-grid-10 cust-md-grid-10 cust-lg-grid-10"><div class="common-div">4</div></div>
<div class="cust-xs-grid-10 cust-sm-grid-10 cust-md-grid-10 cust-lg-grid-10"><div class="common-div">5</div></div>
<div class="cust-xs-grid-10 cust-sm-grid-10 cust-md-grid-10 cust-lg-grid-10"><div class="common-div">6</div></div>
<div class="cust-xs-grid-10 cust-sm-grid-10 cust-md-grid-10 cust-lg-grid-10"><div class="common-div">7</div></div>
<div class="cust-xs-grid-10 cust-sm-grid-10 cust-md-grid-10 cust-lg-grid-10"><div class="common-div">8</div></div>
<div class="cust-xs-grid-10 cust-sm-grid-10 cust-md-grid-10 cust-lg-grid-10"><div class="common-div">9</div></div>
<div class="clearfix"></div>
</div>
Another way for “Grid number” as 10:
You can also make by taking cust-xs-grid-5 and under that you have to take div with class=row and under that pair of two col-xs-6, col-sm-6, col-md-6, col-lg-6 classes as your relevant resolutions, and then it will be divide into 10 equal width grid.
For example:
<div class=”cust-xs-grid-5 cust-sm-grid-5 cust-md-grid-5 cust-lg-grid-5”>
<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>
</div>
Eleven Grid width & offset Example
Grid
<div>
<div class="cust-xs-grid-11 cust-sm-grid-11 cust-md-grid-11 cust-lg-grid-11"><div class="common-div">1</div></div>
<div class="cust-xs-grid-11 cust-sm-grid-11 cust-md-grid-11 cust-lg-grid-11"><div class="common-div">2</div></div>
<div class="cust-xs-grid-11 cust-sm-grid-11 cust-md-grid-11 cust-lg-grid-11"><div class="common-div">3</div></div>
<div class="cust-xs-grid-11 cust-sm-grid-11 cust-md-grid-11 cust-lg-grid-11"><div class="common-div">4</div></div>
<div class="cust-xs-grid-11 cust-sm-grid-11 cust-md-grid-11 cust-lg-grid-11"><div class="common-div">5</div></div>
<div class="cust-xs-grid-11 cust-sm-grid-11 cust-md-grid-11 cust-lg-grid-11"><div class="common-div">6</div></div>
<div class="cust-xs-grid-11 cust-sm-grid-11 cust-md-grid-11 cust-lg-grid-11"><div class="common-div">7</div></div>
<div class="cust-xs-grid-11 cust-sm-grid-11 cust-md-grid-11 cust-lg-grid-11"><div class="common-div">8</div></div>
<div class="cust-xs-grid-11 cust-sm-grid-11 cust-md-grid-11 cust-lg-grid-11"><div class="common-div">9</div></div>
<div class="cust-xs-grid-11 cust-sm-grid-11 cust-md-grid-11 cust-lg-grid-11"><div class="common-div">10</div></div>
<div class="cust-xs-grid-11 cust-sm-grid-11 cust-md-grid-11 cust-lg-grid-11"><div class="common-div">11</div></div>
<div class="clearfix"></div>
</div>
Offset
<div>
<div class="cust-xs-grid-11 cust-sm-grid-11 cust-md-grid-11 cust-lg-grid-11"><div class="common-div">1</div></div>
<div class="cust-xs-grid-11 cust-sm-grid-11 cust-md-grid-11 cust-lg-grid-11 cust-xs-offset-grid-11 cust-sm-offset-grid-11 cust-md-offset-grid-11 cust-lg-offset-grid-11"><div class="common-div">2</div></div>
<div class="cust-xs-grid-11 cust-sm-grid-11 cust-md-grid-11 cust-lg-grid-11"><div class="common-div">3</div></div>
<div class="cust-xs-grid-11 cust-sm-grid-11 cust-md-grid-11 cust-lg-grid-11"><div class="common-div">4</div></div>
<div class="cust-xs-grid-11 cust-sm-grid-11 cust-md-grid-11 cust-lg-grid-11"><div class="common-div">5</div></div>
<div class="cust-xs-grid-11 cust-sm-grid-11 cust-md-grid-11 cust-lg-grid-11"><div class="common-div">6</div></div>
<div class="cust-xs-grid-11 cust-sm-grid-11 cust-md-grid-11 cust-lg-grid-11"><div class="common-div">7</div></div>
<div class="cust-xs-grid-11 cust-sm-grid-11 cust-md-grid-11 cust-lg-grid-11"><div class="common-div">8</div></div>
<div class="cust-xs-grid-11 cust-sm-grid-11 cust-md-grid-11 cust-lg-grid-11"><div class="common-div">9</div></div>
<div class="cust-xs-grid-11 cust-sm-grid-11 cust-md-grid-11 cust-lg-grid-11"><div class="common-div">10</div></div>
<div class="clearfix"></div>
</div>
Here is a demo link: Click Here
Hope you find it useful !