Bootstrap 4: Create Five, Seven, Ten and Eleven equal width grid with margin.


Working with new version of bootstrap [ Bootstrap 4 (Beta) ], again I find that there were no any specific grid structure for Five, Seven, Ten and Eleven equal width grid and put grid offset (margin) same as in previous versions of bootstrap.

As a web designer for some design with five and seven grid structure, I have decided to create some custom stylesheet for this type of grid system with similar offset structure, and it really works well with new bootstrap [ version 4 ] structure and also without affecting their grid system. Following is some instruction on how to use this grid structure. Hope this stylesheet is helpful if you have similar design structure.

Following are some points that you must take a look at,

  • Link “bootstrap4-custom-grid.css” just below your bootstrap.css
  • Every class of custom grid indicates individual width for specific div in which you put that class.
  • It will also work with specific resolution as bootstrap like “sm, md, lg, xl” as well as “extra small”.

How to use classes for the responsive grid as well as Margin-Left (ml), Margin-Right (mr).

Extra-small device:
col-“Cell Number”, ml-“Cell Number”, mr-“Cell Number”
Small device:
col-sm-“Cell Number”, ml-sm-“Cell Number”, mr-sm-“Cell Number”
Medium device:
col-md-“Cell Number”, ml-md-“Cell Number”, mr-md-“Cell Number”
Large device:
col-lg-“Cell Number”, ml-lg-“Cell Number”, mr-lg-“Cell Number”
Extra Large device:
col-xl-“Cell Number”, ml-xl-“Cell Number”, mr-xl-“Cell Number”

You can use “Cell number” as cell5, cell7, cell10, cell11.

Tabular class indication for grid class and grid margin:

For Example width for grid number 5, 7, 10, 11:
col-cell5, col-sm-cell5, col-md-cell5, col-lg-cell5
col-cell7, col-sm-cell7, col-md-cell7, col-lg-cell7
col-cell10, col-sm-cell10, col-md-cell10, col-lg-cell10
col-cell11, col-sm-cell11, col-md-cell11, col-lg-cell11

For Example margin for grid number 5, 7, 10, 11:
Margin Left:
ml-cell5, ml-sm-cell5, ml-md-cell5, ml-lg-cell5, ml-xl-cell5
ml-cell7, ml-sm-cell7, ml-md-cell7, ml-lg-cell7, ml-xl-cell7
ml-cell10, ml-sm-cell10, ml-md-cell10, ml-lg-cell10, ml-xl-cell10
ml-cell11, ml-sm-cell11, ml-md-cell11, ml-lg-cell11, ml-xl-cell11

Margin Right:
mr-cell5, mr-sm-cell5, mr-md-cell5, mr-lg-cell5, mr-xl-cell5
mr-cell7, mr-sm-cell7, mr-md-cell7, mr-lg-cell7, mr-xl-cell7
mr-cell10, mr-sm-cell10, mr-md-cell10, mr-lg-cell10, mr-xl-cell10
mr-cell11, mr-sm-cell11, mr-md-cell11, mr-lg-cell11, mr-xl-cell11

Five Grid width & margin

Grid with margin-left and margin right

Seven Grid width & Margin Example

Grid with margin-left and margin right

Ten Grid width & Margin Example

Grid with margin-left and margin right

Eleven Grid width & Margin Example

Grid with margin-left and margin right

Hope you find it useful !


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.