Solution 1 :

You can us the margin (m) and padding (p) classes that are included in bootstrap e.g.

<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 m-3" style="background-color:#214B68;">
    <div class="div-left m-3"><h2>Title1</h2>
    <a class="btn btn-primary" href="#" role="button">Link</a>  
    </div>
    <div class="div-right"><i class="fas fa-clock"></i></div>
</div>

You can mix m and p with r t b l (right, top, bottom, left) to get the spacing you need. For example mr-3 (margin-right: 3em;)

There is more information here: https://getbootstrap.com/docs/4.4/utilities/spacing/

EDIT TO FIX GRID STRUCTURE.

You seem to want separation of rows but only some of your sections have defined rows. If you ensure each section is within a row class then you can add CSS as follows:

.row {
    margin-bottom: 3em;
}

Working code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>

  <style>

.row {margin-bottom: 3em;}


  i {
    color: white;
    font-size: 150px;
    padding-right: 20px;
    float:right;
    position: absolute;
    bottom: 0;
    right: 0;
  }

  h2 {
    color: white;
  }

  h3 {
    color: white;
  }

  .col-sm-6, .col-sm-4, .col-sm-12 {
  min-height: 200px;
  }

  .btn-primary {
    background-color: white;
    color:#214B68;
    border: none;
    position: absolute;
    bottom: 0;
    margin-bottom: 20px;
  }



  </style>

</head>
<body>

<div class="container">   
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" style="background-color:#214B68;">
    <div class="div-left"><h2>Title1</h2>
    <a class="btn btn-primary" href="#" role="button">Link</a>  
    </div>
    <div class="div-right"><i class="fas fa-clock"></i></div>
</div>
</div>
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" style="background-color:#214B68;">
        <div class="div-left m-3"><h2>Office Removals</h2>
        <a class="btn btn-primary" href="#" role="button">Link</a>  
        </div>
        <div class="div-right"><i class="fas fa-clock"></i>
        </div>
    </div>
  </div>
    <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 m-3" style="background-color:#1BB1A2;">
        <div class="div-left m-3"><h2>House Clearances</h2>
        <a class="btn btn-primary" href="#" role="button">Link</a>  
        </div>
        <div class="div-right"><i class="fas fa-clock"></i></div>
    </div>
    </div>
<div class="row">

    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 m-3" style="background-color:#1BB1A2;">
        <div class="div-left m-3"><h2>Office Clearances</h2>
        <a class="btn btn-primary" href="#" role="button">Link</a>  
        </div>
        <div class="div-right"><i class="fas fa-clock"></i>
        </div>
    </div>
  </div>
    <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" style="background-color:#1BB1A2;">
        <div class="div-left"><h2>Garage Clearances</h2>
        <a class="btn btn-primary" href="#" role="button">Link</a>  
        </div>
        <div class="div-right"><i class="fas fa-clock"></i></div>
    </div>
    </div>
<div class="row">

    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" style="background-color:#EA5380;">
        <div class="div-left"><h2>Collection and Delivery</h2>
        <a class="btn btn-primary" href="#" role="button">Link</a>  
        </div>
        <div class="div-right"><i class="fas fa-clock"></i>
        </div>
    </div>
  </div>
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" style="background-color:#658091;">
            <div class="div-left"><h3>Pricing For All Services</h3>
        <a class="btn btn-primary" href="#" role="button">Link</a>  
            </div>
            <div class="div-right"><i class="fas fa-clock"></i>
            </div>
        </div>
        </div>
<div class="row">

        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" style="background-color:#658091;">
            <div class="div-left"><h3>Free Quote</h3>
        <a class="btn btn-primary" href="#" role="button">Link</a>  
            </div>
            <div class="div-right"><i class="fas fa-clock"></i>
            </div>
        </div>
        </div>
<div class="row">

        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" style="background-color:#658091;">
            <div class="div-left"><h3>Tips and Guides For Moving House</h3>
        <a class="btn btn-primary" href="#" role="button">Link</a>  
            </div>
            <div class="div-right"><i class="fas fa-clock"></i>
            </div>
    </div>
  </div>

</div>

</body>
</html>

Problem :

I have looked through the Bootstrap info online as well as a few answers on here but i still cant find a way to put a gap between each of the sections in a grid. Any help would be appreciated.

  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" style="background-color:#214B68;">
    	<div class="div-left"><h2>Title1</h2>
        <a class="btn btn-primary" href="#" role="button">Link</a>  
        </div>
        <div class="div-right"><i class="fas fa-clock"></i></div>
    </div>

Structure

Grid Structure

Comments

Comment posted by w3schools.com/code/tryit.asp?filename=GEL0ZJZ5NW1W

Thanks for the answer, I still seem to be having problems, i’ve just put the code into here and it doesnt seem to work, maybe i’ve got something blocking it working in the css? I’ve tried to define “m-3” as well but it just moves the columns underneath –

Comment posted by fraggley

please see the edit. The issue is due to the way you are structuring your html. Ensure for each section you have

SECTION HTML HERE

Comment posted by j4mes83

Thanks. Do I need to have a row for each section even if i was a 2, 2, 2, 3 column structure for each row? Still having problems with the gap between the columns. Ive added a diagram to my original post.

Comment posted by jsfiddle.net/fraggley/2suov8a7

Check this out –

Comment posted by j4mes83

Thanks so much for all your help. One last thing, if I wanted to make it responsive on small devices to display each section on top of each other, how would i do this? So just 1 column and 9 rows. thanks

By

Leave a Reply

Your email address will not be published. Required fields are marked *