title: How to make space between items using d-flex
body: <p>I still do not know where I should separate my items by grid system and col and when to use d-flex? Imagine I have 4 buttons:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="d-flex justify-content-center"&gt;
    &lt;button class="btn"&gt;First&lt;/button&gt;
    &lt;button class="btn"&gt;second&lt;/button&gt;
    &lt;button class="btn"&gt;Third&lt;/button&gt;
    &lt;button class="btn"&gt;fourth&lt;/button&gt;
    &lt;button class="btn"&gt;Fifth&lt;/button&gt;
    &lt;button class="btn"&gt;six&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I have items in row and center but without padding out space among them, how can I achieve it? And should I use col and row or flex?</p>
  <p><a href="https://i.stack.imgur.com/d3Bz3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d3Bz3.jpg" alt="myproblem" /></a></p>