Adding space between columns in Bootstrap 4

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>

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. — Korgrue, Feb 16 '18 at 22:20

WebDevBooster · Accepted Answer · 2018-02-16T22:20:34.057

12

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>

edited Feb 16 '18 at 22:20

answered Feb 16 '18 at 20:31

WebDevBooster

14,674
9
66
70

5

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. – sev Feb 16 '18 at 20:35
Of course, `m-1` will break the layout. That's why I recommended `p-1`. – WebDevBooster Feb 16 '18 at 20:36
1

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. – sev Feb 16 '18 at 20:42
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"! – WebDevBooster Feb 16 '18 at 20:46
I'm really sorry for my questioning. I know I can't describe it good.. at all. – sev Feb 16 '18 at 20:48
3

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. – WebDevBooster Feb 16 '18 at 20:50
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). – sev Feb 16 '18 at 20:51
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. – WebDevBooster Feb 16 '18 at 20:51
Ok I will edit the main post, give me a second – sev Feb 16 '18 at 20:52
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). – sev Feb 16 '18 at 21:05
OK, here's one mistake I see there: You put some content directly into rows. Bootstrap `.row`s are NOT meant for anything other than Bootstrap columns. – WebDevBooster Feb 16 '18 at 21:06
So, you cannot put anything (except Bootstrap columns) into rows directly. – WebDevBooster Feb 16 '18 at 21:07
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? – sev Feb 16 '18 at 21:08
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. – WebDevBooster Feb 16 '18 at 21:10
So, a Bootstrap `.row` can only have a Bootstrap column as a child. Nothing else. Ever. – WebDevBooster Feb 16 '18 at 21:11
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? – sev Feb 16 '18 at 21:11
No. `bbbb
bbbb
` sits directly in the row. Not allowed. – WebDevBooster Feb 16 '18 at 21:12
No, the row closes just before the bbbb(..). The content itself is inside the "col-md-6 black". – sev Feb 16 '18 at 21:14
Oh, sorry! My bad! It's sits in the column! – WebDevBooster Feb 16 '18 at 21:14
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 – sev Feb 16 '18 at 21:15
It's absolutely not hard. I just need to understand first which parts exactly need spacing where... – WebDevBooster Feb 16 '18 at 21:18
You have a lot of nesting going on. That makes it slightly harder than normal. – WebDevBooster Feb 16 '18 at 21:19
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 – sev Feb 16 '18 at 21:20
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 – sev Feb 16 '18 at 21:24
Added a code snippet that right now only addresses spacing between "bbb" and "ccc". Is that what you need? – WebDevBooster Feb 16 '18 at 21:25
That's not exactly it. Check out my new added screenshot. Thank you so much for your help! – sev Feb 16 '18 at 21:26
You should have come up with that "screenshot" MUCH SOONER! A lot of time wasted on useless GUESSWORK! – WebDevBooster Feb 16 '18 at 21:27
So sorry for the confusion. Thank you for your patience – sev Feb 16 '18 at 21:40
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. – WebDevBooster Feb 16 '18 at 22:04
Thank you. But with only the "col" there is no breakpoint on "col-md-*". Does it not work with a specific col-size? – sev Feb 16 '18 at 22:08
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. – sev Feb 16 '18 at 22:17
Oh, yes, I forgot about that. I think the updated snippet fixes the problem? `col-12 col-md m-1` was needed there. – WebDevBooster Feb 16 '18 at 22:23
Wow, it was really easy and I feel really dumb. I didn't even know that you can do that. Thank you so much! – sev Feb 16 '18 at 22:27
apply styles for child with 100% height – Anji V Jan 28 '20 at 07:04

Adding space between columns in Bootstrap 4

1 Answers1