CODEWITHSUNDEEP
htmlcssresponsive-designbootstrap-4
Sunny0101
Sunny0101

Reputation: 476

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

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  */
}

Picture of what the current code gives me with no gaps

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>

Upvotes: 0

Views: 133

Answers (2)

arieljuod
arieljuod

Reputation: 15848

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;
}

Upvotes: 1

Matei Adriel
Matei Adriel

Reputation: 94

Add a margin to the test class

.test{
    margin:5px;
}

Upvotes: 0

Related Questions