How you’ve been getting the Bootstrap grid all wrong—and how to fix it.

BEFORE YOU READ: I’ve built a whole new project unlike anything I’ve done before — a fiction podcast/book written and produced by me! Go see how I’m applying the skills of design to a whole different type of medium and give my series a try!

That’s right, I’ve made a book/podcast web series! http://www.thedauntlessgambit.com!

No grid is perfect. Some grids are useful.

A long time ago, in a galaxy far far away, I wrote 3 articles on Bootstrap. They have amassed a staggering 1.5 million page views. 😮 I wrote them after hanging out in the Bootstrap IRC channel for a few weeks, and after working with grids (Blueprint, 960!), designers, and developers for over a decade, it became clear that people know how to use a grid, but don’t really understand how it works and how to get themselves out of trouble.

Bootstrap 4

There are a lot of articles on Bootstrap 4 and the grid as a whole. I am only covering a very narrow topic here: building your grid via mixins. This is a topic that is very under-documented, and I want to share my perspective on it.

The Misconception

For people new to Bootstrap or other CSS grids, the first thing they usually see is the application of a grid via in-HTML classes. There is a presumption that the Bootstrap grid implementation has to look like this:

<div class="container">
<div class="row">
<div class="banana col-sm-6 col-md-4">
<p>banana 🍌 content</p>
</div>
</div>
</div>
col-sm-6 col-md-4
<div class="col-6 col-sm-4 col-md-8 offset-md-4 align-self-start justify-content-end"> wow 😱 </div>

The Problems With This

The method of including the CSS classes in your HTML has various problems. First, it’s non-semantic; col-sm-6 col-md-4 says nothing about what that element is, only how it will behave responsively.

A portion of the CSS included — it’s all or nothing.
<div class="container">
<div class="row">
<div class="banana col-sm-6 col-md-4">
<p>banana 🍌 content</p>
</div>
</div>
</div>
.banana {
p {
font-size: 3rem;
color: yellow;
font-weight: 600;
}
}

The Mixin Solution

So what’s the cure? The mixin.

<div class="banana"> 
<p>banana 🍌 content</p>
</div>
.banana {
@include make-col-ready;
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(md) {
@include make-col(4);
}
p {
font-size: 3rem;
color: yellow;
font-weight: 600;
}
}

Turning off the CSS

Since I’m talking about eliminating the CSS and the usage of the classes in the HTML, we need to turn it off. Easy.

$enable-grid-classes:       true !default;
$enable-grid-classes:       false;

Containers and Rows

One nitpick with the above is that often, containers and rows don’t really have their own semantic names. You can do some semantic gymnastics and try and name them all, but often just including those as your ONLY non-semantic grid elements isn’t that bad. It adds very, very little to your compiled CSS, and lets you keep these global, structural elements named something that makes sense.

.grid-container {
@include make-container();
@include make-container-max-widths;
}
.grid-container {
@include make-container();
@include media-breakpoint-up(md) {
@include make-container-max-widths;
}
}
.grid-row {
@include make-row();
}
.tangerine {
@include make-container();
@include make-container-max-widths;
}
.pineapple {
@include make-row();
}

Happy Mixin-ing

I hope this helps clear up how to create your grid without the verbose, tightly coupled, non-semantic HTML classes.

Bonus Content: Customizing Grid Columns, Breakpoints, Gutters

One last thing: the actual grid parameters are controllable by variables in the SCSS as well.

$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
) !default;
$grid-columns:                12 !default;
$grid-gutter-width: 30px !default;

But before you go…

You should give this article maximum claps 👏, and you should follow me Erik Flowers on Medium (and on Twitter — @erik_flowers).

Fiction author, Sr. Principal Design Strategist at Mural. Everything has a narrative arc, my job is to make it a good one.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store