Is there a way to align these 3 divs with more margin?
I attempted using col-3, but it didn't have the desired effect. I want the first div on the left, the second in the center, and the third on the right. I tried incorporating CSS for margin, but it caused issues in responsive design. Do I need to address the responsiveness as well?
Here is an image of what I am trying to achieve:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>General Announcement</title>
</head>
<body>
<section class="activities>
<div class="container>
<div class="row>
<div class="col-md-12>
<h3 class="text-center text-primary text-uppercase font-weight-bold mb-4>Upcoming activities for October 2019</h3>
</div>
<div class="col-md-3 mb-sm-5>
<img src="images/img-5.jpg" class="img-fluid>
<span class="d-block text-uppercase font-weight-bold mt-3>October 20</span>
<h4 class="text-uppercase font-weight-bold>Run for charity</h4>
<a href="#" class="btn btn-default btn-primary>More info</a>
</div>
<div class="col-md-3 mb-sm-5>
<img src="images/img-6.jpg" class="img-fluid>
<span class="d-block text-uppercase font-weight-bold mt-3>October 11</span>
<h4 class="text-uppercase font-weight-bold>Book drive</h4>
<a href="#" class="btn btn-default btn-primary>More info</a>
</div>
<div class="col-md-3>
<img src="images/img-7.jpg" class="img-fluid>
<span class="d-block text-uppercase font-weight-bold mt-3>October 21</span>
<h4 class="text-uppercase font-weight-bold>Recycling initiative</h4>
<a href="#" class="btn btn-default btn-primary>More info</a>
</div>
</div>
</div>
</section>
</body>
</html>