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>