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