How to create Five, Seven, Ten, Eleven equal width grid with offset in twitter bootstrap

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.

grid-table

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

5-grid

Offset

5-offset

Seven Grid width & offset Example

Grid

7-grid

Offset

7-offset

Ten Grid width & offset Example

Grid

10-grid

Offset

10-offset

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:

Eleven Grid width & offset Example

Grid

11-grid

Offset

11-offset

Here is a demo link: Click Here

Hope you find it useful !

mm

Parthiv Butani Web Designer

I am a web designer and a creative artist at Yudiz Solutions Pvt. Ltd. - a leading Web and Mobile Apps development company. I am willing to find an effective solution with a cup of coffee for difficult design problems which I faced.

Comments are closed.

Top