title: What's the correct way to add multiple classes in Bootstrap 4?
body: <p>I'm building a new template using Bootstrap 4 and compiling it with Sass. I have <code>.socialgraph-gadget</code> and I want it to both <code>display: flex</code> and <code>justify-content: space-between</code>.</p>
  
  <p>Should I just do:</p>
  
  <pre><code>&lt;div class="socialgraph-gadget d-flex justify-content-between"&gt;
    &lt;!-- awesome content --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Or remove the flex utility classes and add them to <code>.socialgraph-gadget</code>:</p>
  
  <pre><code>.socialgraph-gadget
  {
    text-align: center;
    display: flex;
    justify-content: space-between;
  }
  </code></pre>
  
  <p>Or is there some better sass-y third option I'm missing like:</p>
  
  <pre><code>.socialgraph-gadget
  {
    text-align: center;
    @extend .d-flex;
    @extend .justify-content-between;
  }
  </code></pre>
  
  <p>This is a question I keep bumping into a lot with Bootstrap 4. There are just so many utility classes I can't decided if it's better to just add them on (composition) or define them in the class (configuration). If I go the composition route, I end up with so many classes it really clutters up the html. If I go the configuration route, I feel like I'm adding unnecessary bloat to my css files.</p>
  
  <p>What's the rule of thumb or best practice here? Thanks. Sorry if this is a repost.</p>