A grid is simply a collection of horizontal and vertical lines creating a pattern against which we can line up our design elements. They help us to create designs where elements don’t jump around or change width as we move from page to page, providing greater consistency on our websites.
A grid will typically have columns, rows, and then gaps between each row and column — commonly referred to as gutters. (Source: Mozilla Developer Network).
Both Bootstrap and Foundation have support for responsive grids and flexible breakpoints. However, Foundation has support for responsive gutters, which are so easy to setup that seem like magic.
When it comes to cleanliness Foundation may have a better grid system because Foundation has no containers and relies heavily on rows is a plus, as you end up with a cleaner DOM.
Bootstrap 4 Grid System
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive.
Columns are centered in the page with the parent .container
.container — for fixed with
.container-fluid — for full width
.row — to ensure all your content is aligned properly down the left side.
Bootstrap grid system work across multiple devices.
Extra small— <576px (col-)
Small — ≥576px (col-sm-)
Medium — ≥768px (col-md-)
Large — ≥992px (col-lg-)
Extra Large — ≥1200px (col-xl-)
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>.col-md-4 + .col-md-4 + .col-md-4 = 12
.col-md-3 + .col-md-3 + .col-md-3 + .col-md-3 = 12
.col-md-6 + .col-md-6 = 12
Combining Responsive Classes
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12"></div>This will maintain 3 columns in Large Devices + Extra Large Devices & 2 columns in Medium Screen Devices & 1 Column in Small Screen Devices
Offsetting columns
You can offset grid columns in two ways: Using responsive .offset- grid classes and margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.
Offset classes
Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4over four columns.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div> Bootstrap Grid System Demo:
Here is the code for the above example:
<div class="container grid-demo">
<div class="row">
<header class="col-md-12 text-center">
<h1>Bootstrap's 4 Grid System
</h1>
<h2>How flexible it is?
</h2>
</header>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
<div class="card">
<img class="card-img-top" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MiAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTViYzNkNDUyYzMgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMnB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWJjM2Q0NTJjMyI+PHJlY3Qgd2lkdGg9IjI0MiIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI4OS44MDQ2ODc1IiB5PSIxMDUuMSI+MjQyeDIwMDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
<div class="card">
<img class="card-img-top" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MiAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTViYzNkNDUyYzMgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMnB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWJjM2Q0NTJjMyI+PHJlY3Qgd2lkdGg9IjI0MiIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI4OS44MDQ2ODc1IiB5PSIxMDUuMSI+MjQyeDIwMDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
<div class="card">
<img class="card-img-top" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MiAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTViYzNkNDUyYzMgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMnB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWJjM2Q0NTJjMyI+PHJlY3Qgd2lkdGg9IjI0MiIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI4OS44MDQ2ODc1IiB5PSIxMDUuMSI+MjQyeDIwMDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
<div class="card">
<img class="card-img-top" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MiAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTViYzNkNDUyYzMgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMnB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWJjM2Q0NTJjMyI+PHJlY3Qgd2lkdGg9IjI0MiIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI4OS44MDQ2ODc1IiB5PSIxMDUuMSI+MjQyeDIwMDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
<div class="card">
<img class="card-img-top" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MiAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTViYzNkNDUyYzMgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMnB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWJjM2Q0NTJjMyI+PHJlY3Qgd2lkdGg9IjI0MiIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI4OS44MDQ2ODc1IiB5PSIxMDUuMSI+MjQyeDIwMDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
<div class="card">
<img class="card-img-top" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MiAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTViYzNkNDUyYzMgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMnB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWJjM2Q0NTJjMyI+PHJlY3Qgd2lkdGg9IjI0MiIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI4OS44MDQ2ODc1IiB5PSIxMDUuMSI+MjQyeDIwMDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
<div class="card">
<img class="card-img-top" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MiAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTViYzNkNDUyYzMgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMnB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWJjM2Q0NTJjMyI+PHJlY3Qgd2lkdGg9IjI0MiIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI4OS44MDQ2ODc1IiB5PSIxMDUuMSI+MjQyeDIwMDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
<div class="card">
<img class="card-img-top" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MiAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTViYzNkNDUyYzMgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMnB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWJjM2Q0NTJjMyI+PHJlY3Qgd2lkdGg9IjI0MiIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI4OS44MDQ2ODc1IiB5PSIxMDUuMSI+MjQyeDIwMDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>Here is a Demo Link
Bootstrap 4 Different Grid Layouts Demo:
Here is the code for the above example:
<div class="container">
<h2 class="text-center text-primary"> Bootstrap 4 Grid Layouts</h2>
<hr><h2 class="text-info">One column centered</h2><div class="row justify-content-center">
<div class="col-md-6"></div>
</div><h2 class="text-success">Two column</h2>
<div class="row"><div class="col-sm-6"></div>
<!-- /.col -->
<div class="col-sm-6"></div>
<!-- /.col -->
</div>
<!-- /.row --><h2 class="text-warning">Two column - Golden Ratio Left</h2>
<div class="row"><div class="col-sm-8"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-4"></div>
<!-- /.col-sm-6 -->
</div>
<!-- /.row --><h2 class="text-danger">Two column - Golden Ratio Right</h2>
<div class="row"><div class="col-sm-4"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-8"></div>
<!-- /.col-sm-6 -->
</div>
<!-- /.row --><h2>Three column</h2>
<div class="row"><div class="col-sm-4"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-4"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-4"></div>
<!-- /.col-sm-6 -->
</div>
<!-- /.row --><h2 class="text-info">Four column</h2>
<div class="row"><div class="col-sm-3"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-3"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-3"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-3"></div>
<!-- /.col-sm-6 --></div>
<!-- /.row --><h2 class="text-success">Five column</h2>
<p>Unable to have an equal number of columns equal 12 so this is not possible without custom CSS</p>
<h2 class="text-warning">Six column</h2>
<div class="row"><div class="col-sm-2"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-2"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-2"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-2"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-2"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-2"></div>
<!-- /.col-sm-6 -->
</div>
<!-- /.row --><h2 class="text-danger">12 column</h2>
<div class="row">
<div class="col-sm-1"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-1"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-1"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-1"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-1"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-1"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-1"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-1"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-1"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-1"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-1"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-1"></div>
<!-- /.col-sm-6 -->
</div>
<!-- /.row --><h2>No Gutters - Two column</h2>
<div class="row no-gutters"><div class="col-sm-6"></div>
<!-- /.col -->
<div class="col-sm-6"></div>
<!-- /.col -->
</div>
<!-- /.row --></div>
<!-- /.container --><div class="container-fluid">
<h2 class="text-info">Two column Fluid</h2>
<div class="row"><div class="col-sm-6"></div>
<!-- /.col-sm-6 -->
<div class="col-sm-6"></div>
<!-- /.col-sm-6 -->
</div>
<!-- /.row --></div>
<!-- /.container-fluid -->
CSS:
body {
margin: 2em 0;
background:#f9f9f9;
}
.row div {
margin-bottom: 1em;
background: #8ed9d4;
}
.row div:nth-child(odd) {
background-color: #8ed9d4;
}.row div:after {
content: " ";
background: #fff;
width: 100%;
display: block;
height: 30px;
}
Checkout this Demo Link
Foundation 6 Grid System
With foundation you can create powerful multi-device layouts quickly and easily with the default 12-column, nestable grid.
In foundation you can see three different classification
- XY Grid — Recently introduced in v6.4
- Float Grid — Usual Grid Sytem — 12 Column nestable grid
- Flex Grid — Powered by Flexbox
Let us start with regular 12-column nestable grid.
- Foundation never uses container as you see in Bootstrap.
- Foundation is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.
- Start by adding an element with a class of
.row. This will create a horizontal block to contain vertical columns. - Then add elements with a
.columnclass within that row. - Specify the widths of each column with the
.small-#,.medium-#, and.large-#classes.
By default .column has an alias .columns (see the $grid-column-alias option) —the only difference is grammar.
<div class="row">
<div class="small-2 large-4 columns"><!-- ... --></div>
<div class="small-4 large-4 columns"><!-- ... --></div>
<div class="small-6 large-4 columns"><!-- ... --></div>
</div>
<div class="row">
<div class="large-3 columns"><!-- ... --></div>
<div class="large-6 columns"><!-- ... --></div>
<div class="large-3 columns"><!-- ... --></div>
</div>
<div class="row">
<div class="small-6 large-2 columns"><!-- ... --></div>
<div class="small-6 large-8 columns"><!-- ... --></div>
<div class="small-12 large-2 columns"><!-- ... --></div>
</div>
<div class="row">
<div class="small-3 columns"><!-- ... --></div>
<div class="small-9 columns"><!-- ... --></div>
</div>
<div class="row">
<div class="large-4 columns"><!-- ... --></div>
<div class="large-8 columns"><!-- ... --></div>
</div>
<div class="row">
<div class="small-6 large-5 columns"><!-- ... --></div>
<div class="small-6 large-7 columns"><!-- ... --></div>
</div>
<div class="row">
<div class="large-6 columns"><!-- ... --></div>
<div class="large-6 columns"><!-- ... --></div>
</div>.large-4 + .large-4 + .large-4 columns = 12
.large-3 + .large-3 + .large-3 + .large-3 = 12
.large-6 + .large-6 = 12
Combining Responsive Classes
<div class="large-4 medium-4 small-6 columns"></div>Foundation offers a few more grid features than Bootstrap, including centered columns, incomplete rows, responsive gutters, semantic grid options and fluid rows.
Centered Columns
You can center your columns by adding a class of .small-centered to your column. Large will inherit small centering by default, but you can also center solely on large by applying a .large-centered class. To uncenter on large screens, use .large-uncentered.
<div class="row">
<div class="small-3 small-centered columns">3 centered</div>
</div>
<div class="row">
<div class="small-6 large-centered columns">6 centered</div>
</div>
<div class="row">
<div class="small-9 small-centered large-uncentered columns">9 centered</div>
</div>
<div class="row">
<div class="small-11 small-centered columns">11 centered</div>
</div>
Here is the Demo link using Centered Columns
<div class="row login-form-outer">
<div class="small-12 large-6 medium-6 small-centered columns login-skin">
<form class="log-in-form">
<h4 class="text-center">Log in using your credentials
</h4>
<label>Email
<input type="email" placeholder="somebody@example.com">
</label>
<label>Password
<input type="password" placeholder="Password">
</label>
<input id="show-password" type="checkbox">
<label for="show-password">Show password</label>
<p>
<input type="submit" class="button success expanded" value="Log in">
</p>
<p class="text-center">
<a href="#">Forgot your password?</a>
</p>
</form>
</div>
</div>CSS:
.login-form-outer{
margin-top:5rem;
}
.login-skin{
padding:1rem;
background:#555;
color:#fff;
}
.login-skin a{
color:#f9f9f9;
}
.login-skin label{
color:#fff;
}Source Ordering is yet another interesting feature using which you can shift columns around between our breakpoints.
With source ordering you can place sub-navigation below main content on small displays, you have the option to position the sub-navigation on either the left or right of the page for large displays. Prefix push/pull with the size of the device you want to apply the styles to. .medium-push-#, .large-push-# is the syntax you'll use. Use the number 0 instead to reset a push/pull, such as .medium-push-0 or .large-pull-0.
<div class="row">
<div class="small-10 small-push-2 columns">10</div>
<div class="small-2 small-pull-10 columns">2, last</div>
</div>
<div class="row">
<div class="large-9 large-push-3 columns">9</div>
<div class="large-3 large-pull-9 columns">3, last</div>
</div>
<div class="row">
<div class="large-8 large-push-4 columns">8</div>
<div class="large-4 large-pull-8 columns">4, last</div>
</div>
<div class="row">
<div class="small-5 small-push-7 medium-7 medium-push-5 columns">7</div>
<div class="small-7 small-pull-5 medium-5 medium-pull-7 columns">5, last</div>
</div>
<div class="row">
<div class="medium-6 medium-push-6 columns">6</div>
<div class="medium-6 medium-pull-6 columns">6, last</div>
</div>Block Grids
Block grids are a shorthand way to create equally-sized columns. Add a class of the format .[size]-up-[n] to change the number of columns within the row. By default, the max number of columns you can use with block grid are 8. Adding the .column-block class to columns will apply a bottom margin equal to the width of gutters.
<div class="row small-up-2 medium-up-3 large-up-4">
<div class="column column-block">
<img src="https://placehold.it/600x600" class="thumbnail" alt="">
</div>
<div class="column column-block">
<img src="https://placehold.it/600x600" class="thumbnail" alt="">
</div>
<div class="column column-block">
<img src="https://placehold.it/600x600" class="thumbnail" alt="">
</div>
<div class="column column-block">
<img src="https://placehold.it/600x600" class="thumbnail" alt="">
</div>
<div class="column column-block">
<img src="https://placehold.it/600x600" class="thumbnail" alt="">
</div>
<div class="column column-block">
<img src="https://placehold.it/600x600" class="thumbnail" alt="">
</div>
</div>
Here is the Demo Link for Foundation Block Grids
<div class="row columns">
<div class="medium-12 large-12 columns">
<h1>Foundation Block Grids Demo</h1>
<p class="subheader">There is beauty in space, and it is orderly. There is no weather, and there is regularity. It is predictable. Everything in space obeys the laws of physics. If you know these laws, and obey them, space will treat you kindly.
</p>
<button class="button">Take a Tour</button>
<button class="button alert">Start a free trial</button>
</div>
</div>
<div class="row small-up-2 medium-up-3 large-up-4">
<div class="column column-block">
<img src="https://placehold.it/600x600" class="thumbnail" alt="">
</div>
<div class="column column-block">
<img src="https://placehold.it/600x600" class="thumbnail" alt="">
</div>
<div class="column column-block">
<img src="https://placehold.it/600x600" class="thumbnail" alt="">
</div>
<div class="column column-block">
<img src="https://placehold.it/600x600" class="thumbnail" alt="">
</div>
<div class="column column-block">
<img src="https://placehold.it/600x600" class="thumbnail" alt="">
</div>
<div class="column column-block">
<img src="https://placehold.it/600x600" class="thumbnail" alt="">
</div>
</div>
