Add small spaces around Bootstrap Grids (between the columns and rows)

Question

I have tried numerous approaches on this issue I have and cannot find the correct Bootstrap way. I am wanting to build a responsive simple website using the grids (or col) but with a gap in between each row and column (similar to what the FOLDY grid system does automatically for you). Snippet of my html code below along with screenshot of what it looks like on a webpage.

        <div class="container-fluid">
          <div class="row">
            <div class="col-lg-6 test">half</div>
            <div class="col-lg-6 test">half</div>
          </div>

          <div class="row">
            <div class="col-md-4 test">third</div>
            <div class="col-md-4 test">third</div>
            <div class="col-md-4 test">third</div>
          </div>

          <div class="row">
            <div class="col-md-10 test">10</div>
            <div class="col-md-2 test">2</div>
          </div>
        </div>

    .row{
  background-color: #eee; /* This changes colour of my background grid  */
}

Links to Bootstrap:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

arieljuod · Accepted Answer · 2019-02-10 15:16:19Z

1

The problem is that you are applying a background to the row, so a gap between the columns will just show the row background.

But! If you set a background on the columns you may have the same issue, since bootstrap creates that gap using paddings on the columns https://getbootstrap.com/docs/4.2/layout/grid/#columns-and-gutters

What you can do is set a background on the column's child with the child using 100% of the available space.

EDIT: the code would be something like this https://jsfiddle.net/dnhv9x0p/

.row {
  width: 100%;
  margin: 0;
  padding: 0;
}

.row [class^='col-'] {
  padding: 3px 5px; // chenge the size of the gaps here
}

.row [class^='col-'] span { //i've used a span, but you can use any element inside columns, just make it a block
  background: #bbb;
  display: block;
}

edited Feb 10, 2019 at 15:16

answered Feb 9, 2019 at 19:37

arieljuod

15.9k2 gold badges27 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sunny0101 Over a year ago

Hi arieljuod, do you think you could help a little with the code/guidance, on your screenshot could I just alter the grid-columns class? Thanks so much, Kayleigh

arieljuod Over a year ago

@K.Haydock i've added a jsfiddle with the example

Sunny0101 Over a year ago

Thank you so much for your help, I can't believe how long I've spent trying to figure this out!.... LIFE SAVER :-)

Matei Adriel · Accepted Answer · 2019-02-09 18:13:25Z

0

Add a margin to the test class

.test{
    margin:5px;
}

answered Feb 9, 2019 at 18:13

Matei Adriel

941 silver badge5 bronze badges

7 Comments

Sunny0101 Over a year ago

Hi Matei, thank you that has added a small gap between the row however what about the columns?

Matei Adriel Over a year ago

Try adsing padding:5px; to the test class

Sunny0101 Over a year ago

Hi again Matei unfortunetely by replacing the margin with padding, it went back to no gaps whatsoever as you can see in my screenshot, and with adding both padding AND margin it still didn't add any gaps in between the columns. It's so fiddly I bet it's just one line of code I cannot find.

Matei Adriel Over a year ago

Well, is your css after the link to bootstrap?

Matei Adriel Over a year ago

Maybe add display:block to .test ?

|

Collectives™ on Stack Overflow

Add small spaces around Bootstrap Grids (between the columns and rows)

2 Answers 2

3 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related