title: How to add space between columns in Bootstrap 4
body: <p>I have the following container with 3 columns using Bootstrap 4 </p>
  
  <pre><code>  &lt;section id="features"&gt;
  
      &lt;div class="container-fluid"&gt;
        &lt;div class="row justify-content-around"&gt;
          &lt;div class="col-lg-4 col-md-12 "&gt;
            &lt;i class="fas fa-check-circle"&gt;&lt;/i&gt;
            &lt;h3&gt;Easy to use.&lt;/h3&gt;
            &lt;p&gt;So easy to use, even your dog could do it.&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="col-lg-4 col-md-12" &gt;
            &lt;i class="fas fa-bullseye"&gt;&lt;/i&gt;
            &lt;h3&gt;Elite Clientele&lt;/h3&gt;
            &lt;p&gt;We have all the dogs, the greatest dogs.&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="col-lg-4 col-md-12"&gt;
            &lt;i class="fas fa-heart"&gt;&lt;/i&gt;
            &lt;h3&gt;Guaranteed to work.&lt;/h3&gt;
            &lt;p&gt;Find the love of your dog's life or your money back.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/3GVpO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3GVpO.png" alt="Three columns"></a></p>
  
  <p>I want to add space between them so they are more separated, however when i try to add padding or margin it breaks the row. How can i add the space maitaining the three items in the same row. </p>