title: Bootstrap 4: Align dynamically added columns
body: <p>I am trying to use bootstrap 4 grid.
  The number of cols vary in number and are added dynamically. It leads to adding more than 12 cols within a row(which is not ideal - but not sure how to deal with such scenarios when the cols are dynamically added).</p>
  <p>The outcome: The grid works fine and rearranges the cols as expected. However, I think the gutter gets added <strong>twice</strong> for the inner cols. Refer to the image attached.</p>
  <p>I searched the docs, used justify-space-between/around - but no luck</p>
  <p><a href="https://jsfiddle.net/8L3dt1xh/1/" rel="nofollow noreferrer">https://jsfiddle.net/8L3dt1xh/1/</a></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-lg-2 col-md-3 col-sm-4 col-6&quot;&gt; .. image .. &lt;/div&gt;
    &lt;div class=&quot;col-lg-2 col-md-3 col-sm-4 col-6&quot;&gt; .. image .. &lt;/div&gt;
    ... many such divs .. 
    &lt;div class=&quot;col-lg-2 col-md-3 col-sm-4 col-6&quot;&gt; .. image .. &lt;/div&gt;
    &lt;div class=&quot;col-lg-2 col-md-3 col-sm-4 col-6&quot;&gt; .. image .. &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Any pointer on how to get uniform spacing between cols will be a great help.</p>
  <p><a href="https://i.stack.imgur.com/YQyIP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YQyIP.png" alt="enter image description here" /></a></p>