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

Overview

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

<div class="row">
        <div class="col-cell5"><div>col-cell5</div></div>
        <div class="col-cell5 ml-cell5 mr-cell5"><div>col-cell5</div></div>
        <div class="col-cell5"><div>col-cell5</div></div>
</div>

Seven Grid width & Margin Example

Grid with margin-left and margin right

<div class="row">
        <div class="col-cell7"><div>col-cell7</div></div>
        <div class="col-cell7"><div>col-cell7</div></div>
        <div class="col-cell7 ml-cell7 mr-cell7"><div>col-cell7</div></div>
        <div class="col-cell7"><div>col-cell7</div></div>
        <div class="col-cell7"><div>col-cell7</div></div>
</div>

Ten Grid width & Margin Example

Grid with margin-left and margin right

<div class="row">
        <div class="col-cell10"><div>col-cell10</div></div>
        <div class="col-cell10"><div>col-cell10</div></div>
        <div class="col-cell10"><div>col-cell10</div></div>
        <div class="col-cell10 ml-cell10 mr-cell10"><div>col-cell10</div></div>
        <div class="col-cell10"><div>col-cell10</div></div>
        <div class="col-cell10"><div>col-cell10</div></div>
        <div class="col-cell10"><div>col-cell10</div></div>
        <div class="col-cell10"><div>col-cell10</div></div>
</div>

Eleven Grid width & Margin Example

Grid with margin-left and margin right

<div class="row">
        <div class="col-cell11"><div>col-cell11</div></div>
        <div class="col-cell11"><div>col-cell11</div></div>
        <div class="col-cell11"><div>col-cell11</div></div>
        <div class="col-cell11"><div>col-cell11</div></div>
        <div class="col-cell11 ml-cell11 mr-cell11"><div>col-cell11</div></div>
        <div class="col-cell11"><div>col-cell11</div></div>
        <div class="col-cell11"><div>col-cell11</div></div>
        <div class="col-cell11"><div>col-cell11</div></div>
        <div class="col-cell11"><div>col-cell11</div></div>
</div>

Hope you find it useful !