Adding space between columns in Bootstrap 4 [duplicate]

Question

How I want it to look like:

I'm trying to add horizontal and vertical space between the columns in BS4 but it keeps either messing breakpoints around (black or red) or the breakpoints of bootstrap. Is there any easy way to add space? I've tried the new margin settings of BS4, but it didn't really help (messed up the heading and background-color). Also, the 2 horizontal columns should have the same height.

btw. If you run the snippet, the columns don't display correctly because of the size of the snippet output. That's what it should look like on non-mobile: screenshot (or expand the snippet)

* {
  color: white;
}

.black {
  background-color: black;
}

.red {
  background-color: red;
}

nav {
  background-color: antiquewhite;
  margin: 0px;
}

.row {}

.head {
  background-color: aqua;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" >
<nav class="navbar-static-top">
  Nav
</nav>
 <div class="container-fluid">
        <div class="row p-1">
            <div class="col black">
                <div class="row">
                    <div class="col head">
                        HEADING 0 COLUMN
                    </div>
                </div>
                <p>aaaa<br>
                aaaa</p>
            </div>
        </div>
        <div class="row row-eq-height p-1">
            <div class="col-md-6 black">
                <div class="row">
                    <div class="col head">
                        HEADING 1 COLUMNS BLACK
                    </div>
                </div>bbbb<br>
                bbbb<br>
            </div>
            <div class="col-md-6 red">
                <div class="row">
                    <div class="col head">
                        HEADING 2 CLOUMNS RED
                    </div>
                </div>cccc
            </div>
        </div>
        <div class="row p-1">
            <div class="col black">
                dddd
            </div>
        </div>
        <div class="row p-1">
            <div class="col black">
                eeee
            </div>
        </div>
        <div class="row row-eq-height p-1">
            <div class="col-md-6 black">
                <div class="row">
                    <div class="col head">
                        HEADING 3 COLUMNS BLACK
                    </div>
                </div>ffff<br>
                ffff<br>
            </div>
            <div class="col-md-6 red">
                <div class="row">
                    <div class="col head">
                        HEADING 4 CLOUMNS RED
                    </div>
                </div>hhhh
            </div>
        </div>
    </div>

Effusion

Use the SASS version. There is a _variables sass document in there where you can set the gutters to a different width and when you precompile it will adjust this throughout the entire CSS. – Indigoid

Answer 1

For spacing Bootstrap 4 has responsive spacing classes p-* (for padding) and m-* (for margins).

So, in your case, you could experiment by adding p-1 or maybe p-2 to all your columns to achieve the desired effect.

Note: The Bootstrap spacing classes are based on rem units, not on px because px is the old and outdated way of doing things when it comes to responsive design and accessibility.

Here's the reference link for you:

https://getbootstrap.com/docs/4.0/utilities/spacing/

The following code snippet produces the desired result by using nesting as well as the m-1 class to create margins around the columns:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
<style>
    * {
        color: white;
    }

    .black {
        background-color: black;
    }

    .red {
        background-color: red;
    }

    nav {
        background-color: antiquewhite;
        margin: 0px;
    }
    .head {
        background-color: aqua;
    }
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md m-1">
            <div class="row">
                <div class="col black">
                    <div class="row">
                        <div class="col head">
                            HEADING 0 COLUMN
                        </div>
                    </div>
                    <p>aaaa<br>
                        aaaa</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row row-eq-height">
        <div class="col-12 col-md m-1">
            <div class="row">
                <div class="col black">
                    <div class="row">
                        <div class="col head">
                            HEADING 1 COLUMNS BLACK
                        </div>
                    </div>

                    bbbb<br>
                    bbbb<br>

                </div>
            </div>
        </div>
        <div class="col-12 col-md m-1">
            <div class="row h-100">
                <div class="col red">
                    <div class="row">
                        <div class="col head">
                            HEADING 2 CLOUMNS RED
                        </div>
                    </div>cccc
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md m-1">
            <div class="row">
                <div class="col black">
                    dddd
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md m-1">
            <div class="row">
                <div class="col black">
                    eeee
                </div>
            </div>
        </div>
    </div>
    
    <div class="row row-eq-height">
        <div class="col-12 col-md m-1">
            <div class="row">
                <div class="col black">
                    <div class="row">
                        <div class="col head">
                            HEADING 3 COLUMNS BLACK
                        </div>
                    </div>

                    ffff<br>
                    ffff<br>

                </div>
            </div>
        </div>
        <div class="col-12 col-md m-1">
            <div class="row h-100">
                <div class="col red">
                    <div class="row">
                        <div class="col head">
                            HEADING 4 CLOUMNS RED
                        </div>
                    </div>hhhh
                </div>
            </div>
        </div>
    </div>
</div>

Triadelphous

I've tried that, but it keeps messing up the breakpoints of BS. I've tried adding "m-1" to every row and my layout broke. – Effusion

Of course, m-1 will break the layout. That's why I recommended p-1. – Triadelphous

Thanks, I also tried that. But there was still no space between the 2 horizontal colums. Adding a "p-1" to the columns messed up the "heading" of the column. – Effusion

Again, WHICH are the "2 horizontal columns"?? Why aren't they named "horizontal column 1" and "horizontal column 2"? Who is supposed to guess which columns you actually mean? You just said you meant "spacing everywhere". Now, it's back to "not everywhere"! – Triadelphous

I'm really sorry for my questioning. I know I can't describe it good.. at all. – Effusion

Well, that's the first thing you gotta learn when coding. Describing the issue properly gets you sometimes the solution. Just by describing properly, the solution often emerges all by itself. – Triadelphous

I only have 2 rows with 2 columns inside them, as you can see in my code. The rest of the rows only has 1 column and I've managed to get it working with the "p-1" class now, as you suggested. Now I want a space in the middle of both of the column "groups" (Black and red column in the rows). – Effusion

Give each element a UNIQUE name (no 2 elements shall have the same name). Then modify your code with those names, post it and come back to me. – Triadelphous

Ok I will edit the main post, give me a second – Effusion

I edited my main post. The p-1 is now already added. All I'm trying to get done is space between column 1 (bbbb) and column 2 (cccc) and 3 (ffff) and 4 (eeee). – Effusion

OK, here's one mistake I see there: You put some content directly into rows. Bootstrap .rows are NOT meant for anything other than Bootstrap columns. – Triadelphous

So, you cannot put anything (except Bootstrap columns) into rows directly. – Triadelphous

Sorry, but where? As far as I checked, there's always a column around them. All I can see are nested rows and another column with content in it. But that's allowed, right? – Effusion

All content must always go into Bootstrap columns (.col-*). It's also possible to put content directly into a Bootstrap .container but that would make sense only in a few special cases. – Triadelphous

So, a Bootstrap .row can only have a Bootstrap column as a child. Nothing else. Ever. – Triadelphous

All my contents are either in columns or nested colums within another row in the row. I just double checked. Wait, so you're saying you can't nest rows into rows? – Effusion

No. bbbb<br>bbbb<br> sits directly in the row. Not allowed. – Triadelphous

No, the row closes just before the bbbb(..). The content itself is inside the "col-md-6 black". – Effusion

Oh, sorry! My bad! It's sits in the column! – Triadelphous

Why is it so hard to get a space in between the columns. I've tried everything.. Sitting here for almost 5 hours now. Frustrating – Effusion

It's absolutely not hard. I just need to understand first which parts exactly need spacing where... – Triadelphous

You have a lot of nesting going on. That makes it slightly harder than normal. – Triadelphous

I know and I don't like it. But I couldn't find out any other way to add the "headings" with a different background-color. Maybe that can be done easier – Effusion

I've added a screenshot on how I want it to look like at the top of my main post. Maybe this can explain a little better – Effusion

Added a code snippet that right now only addresses spacing between "bbb" and "ccc". Is that what you need? – Triadelphous

That's not exactly it. Check out my new added screenshot. Thank you so much for your help! – Effusion

You should have come up with that "screenshot" MUCH SOONER! A lot of time wasted on useless GUESSWORK! – Triadelphous

So sorry for the confusion. Thank you for your patience – Effusion

The updated snippet produces the desired result. Don't use black as the background color in the future because it makes it impossible to see things the way you need to be able to see when working with css. – Triadelphous

Thank you. But with only the "col" there is no breakpoint on "col-md-*". Does it not work with a specific col-size? – Effusion

I'm very thankful for trying to help me, but I'm back to the problem I had before. As soon as I use "m-1" with a specific column-size like "col-md-6" it messes up the layout as soon as it breaks on smaller devices. – Effusion

Oh, yes, I forgot about that. I think the updated snippet fixes the problem? col-12 col-md m-1 was needed there. – Triadelphous

Wow, it was really easy and I feel really dumb. I didn't even know that you can do that. Thank you so much! – Effusion

apply styles for child with 100% height – Wavellite