Need to add some spaces between your Bootstrap 5 columns? 

If so, then you've come to the right website. I'll show you how to do it here.

And the good news is: you don't need to create your own CSS classes to make it happen. Bootstrap already has the classes you need.

Unless you're going really fancy. But that's a scenario I won't cover here.

Let's get started.

Getting Into the Gutter

What you're looking for here is what Bootstrap calls a gutter.

That's the name for the padding between columns. The paddings are used together with negative margins to align the content properly.

But don't let that "negative margins" thing spook you. Just let Bootstrap do all the heavy lifting with the layout and you'll be fine.

So what's a gutter, anyway? A single gutter is 1.5rem or 24 pixels wide.

If you're unfamiliar with the concept of rem in CSS, it's the root element's font size. So a single rem is usually 16 pixels.

But you're not limited to just a single gutter. You can put multiple gutters together to create even more padding.

Let's look at some code that does just that:

<!DOCTYPE html>
<html lang="en-US">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <script src="" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
    <title>Column Spacing | Carey Development</title>

    <div class="container px-4">
        <div class="row gx-5">
            <div class="col-md-3">
                <div class="p-5 bg-primary"></div>
            <div class="col-md-3">
                <div class="p-5 bg-primary"></div>

There's no text because there's none needed. Instead, that code just draws two big blue blocks as columns and spaces them apart.

You can see that if you save the code above to an HTML file and then view it using your favorite browser.

That's what it looks like.

Each of those blue blocks represents three (3) columns. You can see that with the col-md-3 classes. That means those blocks will take up three columns on a medium-sized screen or bigger.

But pay attention to the gap between the two columns. That's the gutter.

Or, more specifically, it's five (5) gutters combined together.

You can see that with the use of the gx-5 class in the second <div> element. 

The "g" stands for gutter. The "x" stands for horizontal. And the "5" after the dash means "multiply the standard gutter by 5."

So you get five gutters.

Note that the gx-5 class is specified alongside the row class. That's how it creates the gutters between the child elements (which are usually columns with rows).

But Mobile

It's always important to test your layout on both mobile and desktop. No exception here.

So take a look at how this layout appears on a smartphone. You'll see something like this:


And that might be okay. But it probably isn't.

You'd also like some spacing between those elements on a smartphone, right?

Fortunately, that's easy.

Remember, the "x" in gx-5 means "horizontal." As in: horizontal spacing.

So what class do you think you need to include for vertical spacing?

If you guess gy-5, collect your winnings.

Just change that second <div> element to this:

<div class="row gx-5 gy-5">

Then save the file and view the page again with your browser showing the results in a smartphone (you can use Dev Tools or just shrink the browser window size). You should see this:


There's your vertical spacing.

But it's easier than that if you want equal horizontal and vertical spacing. Just leave out the x or the y and go with g-5. Like this:

<div class="row g-5">

That'll do 'er!

Wrapping It Up

Now you know how to use gutters.

So disregard any advice you heard about getting out of the gutter and get into the gutter. At least if you want spacing between columns with Bootstrap 5.

And have fun!

Photo by Philippe Donn from Pexels