Seven Column Full Width Grid With Bootstrap4

Everyone loves good CSS framework. Me too. I was a backend developer before. After  I became a full-time freelancer I had plenty of time and projects with front-end development. Among all other responsive CSS frameworks in the world Bootstrap is my favorite. With the rise of responsive CSS frameworks, CSS3 and the fall of Internet Explorer 😀 UI engineers now able to widen their boundaries. Hey, enough of the unrelated stuff today post is about creating a 7 column grid with Bootstrap 4.

All the Bootstrap versions offer us 12 column grid system. What if someone wanted to create a seven column full width girds. Well, at least I needed it yesterday. Thanks to good folks out there, this is what I come up with finally.

This compatible with Bootstrap4 (I started to use Bootstrap 4 once the beta out) If you are using Bootstrap 3 just remove the highlighted lines.

<style type="text/css">
@media (min-width: 768px){
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 100%;
*width: 100%;
}
}
@media (min-width: 992px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
max-width: 14.285714285714285714285714285714% !important;
flex:none !important;
}
}
@media (min-width: 1200px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
max-width: 14.285714285714285714285714285714% !important;
flex:none !important;
}
}
</style>
<div class="row seven-cols">
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
</div>
Cover Photo by Taras Shypka on Unsplash

Leave a Reply