I often have to work on web sites that do not have a grid system in place. To minimize time by not reinventing a wheel, I prefer to include a framework for grid tasks.
While there are several grid-only CSS frameworks out there, Bootstrap is convenient if you are familiar with its conventions. However, the full framework also interferes with design. Other frameworks often use generic class names like “row” and “container” without any sort of wrapper to target only those within the grid. For this reason, I extracted the grid components from Bootstrap and compiled them into a separate library: Bootstrap Grid Only
npm install bootstrap-grid-only-css --save
bower install bootstrap4-grid-only
Unlike traditional Bootstrapped, the grid must be wrapped with the
.bootstrap-wrapper class in an attempt to minimize potential conflicts with other libraries.
Simply download the appropriate CSS file and include it in your HTML header (you only need one):
- bootstrap-grid.css – The expanded version
- bootstrap-grid.min.css – The minified version
<link rel="stylesheet" href="dist/css/bootstrap-grid.min.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/dmhendricks/[email protected]/dist/css/bootstrap-grid.min.css" />
<div class="bootstrap-wrapper"> <div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row hidden-sm-down"> <!-- Hidden on small screens --> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> </div> </div>
See the demo for more information.