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

Bootstrap 4

The Misconception

<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

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

<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

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

Containers and Rows

.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

Bonus Content: Customizing Grid Columns, Breakpoints, Gutters

$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…

--

--

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
Erik Flowers

Erik Flowers

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