title: How can we make list-group horizontal with Bootstrap 4
body: <p>With Bootstrap 4, the list-group component is very rich with design aesthetics, such as with borders, background colors, rounded corners, etc..  </p>
  
  <p>With my following list...</p>
  
  <pre><code>&lt;ul class="list-inline"&gt;
    &lt;li class="list-inline-item align-top"&gt;item 1&lt;/li&gt;
    &lt;li class="list-inline-item align-top"&gt;item 2&lt;/li&gt;
    &lt;li class="list-inline-item align-top"&gt;item 3&lt;/li&gt;
    &lt;li class="list-inline-item align-top"&gt;item 4&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>...how can I make it look fancy like the following....</p>
  
  <pre><code>&lt;ul class="list-group"&gt;
    &lt;li class="list-group-item"&gt;item 1&lt;/li&gt;
    &lt;li class="list-group-item"&gt;item 2&lt;/li&gt;
    &lt;li class="list-group-item"&gt;item 3&lt;/li&gt;
    &lt;li class="list-group-item"&gt;item 4&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>...and still keep it horizontal.</p>