title: Bootstrap 4: How to horizontally align elements inside a drop-down?
body: <p>I have a <code>dropdown</code> with 3 main "categories" inside, and each "category" has several checkboxes (this is being used to filter a search).
  Here's an example:</p>
  
  <pre><code>&lt;div class="dropdown"&gt;
      &lt;button type="button" class="btn dropdown-toggle" data-toggle="dropdown"&gt;Button&lt;/button&gt;
      &lt;div class="dropdown-menu"&gt;
          &lt;h6 class="dropdown-header"&gt;Category 1:&lt;/h6&gt;
          &lt;a class="dropdown-item" href="#"&gt;&lt;input type="checkbox"&gt; Option1&lt;/a&gt;
          &lt;a class="dropdown-item" href="#"&gt;&lt;input type="checkbox"&gt; Option2&lt;/a&gt;
          &lt;a class="dropdown-item" href="#"&gt;&lt;input type="checkbox"&gt; Option3&lt;/a&gt;
  
          &lt;h6 class="dropdown-header"&gt;Category 2:&lt;/h6&gt;
          &lt;a class="dropdown-item" href="#"&gt;&lt;input type="checkbox"&gt; Option1&lt;/a&gt;
          &lt;a class="dropdown-item" href="#"&gt;&lt;input type="checkbox"&gt; Option2&lt;/a&gt;
          &lt;a class="dropdown-item" href="#"&gt;&lt;input type="checkbox"&gt; Option3&lt;/a&gt;
  
          &lt;h6 class="dropdown-header"&gt;Category 3:&lt;/h6&gt;
          &lt;a class="dropdown-item" href="#"&gt;&lt;input type="checkbox"&gt; Option1&lt;/a&gt;
          &lt;a class="dropdown-item" href="#"&gt;&lt;input type="checkbox"&gt; Option2&lt;/a&gt;
          &lt;a class="dropdown-item" href="#"&gt;&lt;input type="checkbox"&gt; Option3&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want the 3 "categories" to be side by side, however, by default, in Bootstrap's <code>dropdown</code> class they're presented as a vertical stack.
  I have tried to take advantage of the grid system by adding the <code>row</code> class to the <code>dropdown</code> and creating a <code>col-4</code> for each main "category" but the result was null. How can I put them side by side, having each one its own checkboxes below?</p>