title: How to align div with proper space in between in bootstrap 4
body: <p>How to align these 3 div with more margin?</p>
  
  <p>i tried col-3, but still doesn't work for me, i want 1 div to be in left, 2nd in center, and 3rd in right. i tried using css for margin, but it's worse in responsive. do i need to do responsive part to?</p>
  
  <p>Check this image, i want to make this..</p>
  
  <p><img src="https://i.stack.imgur.com/ehXBq.png" alt="i want proper space in in between these 3 divs"></p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
          &lt;head&gt;
              &lt;meta charset="UTF-8"&gt;
              &lt;title&gt;General Announcement&lt;/title&gt;
          &lt;/head&gt;
          &lt;body&gt;
  
          &lt;section class="activities"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-12"&gt;
                          &lt;h3 class="text-center text-primary text-uppercase font-weight-bold mb-4"&gt;Upcoming activities for october 2019&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-3 mb-sm-5"&gt;
                          &lt;img src="images/img-5.jpg" class="img-fluid"&gt;
                              &lt;span class="d-block text-uppercase font-weight-bold mt-3"&gt;October 20&lt;/span&gt;
                              &lt;h4 class="text-uppercase font-weight-bold"&gt;Run for charity&lt;/h4&gt;
                          &lt;a href="#" class="btn btn-default btn-primary"&gt;More info&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-3 mb-sm-5"&gt;
                          &lt;img src="images/img-6.jpg" class="img-fluid"&gt;
                          &lt;span class="d-block text-uppercase font-weight-bold mt-3"&gt;October 11&lt;/span&gt;
                          &lt;h4 class="text-uppercase font-weight-bold"&gt;Book drive&lt;/h4&gt;
                          &lt;a href="#" class="btn btn-default btn-primary"&gt;More info&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-3"&gt;
                          &lt;img src="images/img-7.jpg" class="img-fluid"&gt;
                          &lt;span class="d-block text-uppercase font-weight-bold mt-3"&gt;October 21&lt;/span&gt;
                          &lt;h4 class="text-uppercase font-weight-bold"&gt;Recycling initiative&lt;/h4&gt;
                          &lt;a href="#" class="btn btn-default btn-primary"&gt;More info&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
  
          &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>