title: Horizontal list not working
body: <p>I am trying to make use of Bootstrap horizontal lists, but it’s not working correctly. How can I fix this issue?</p>
  
  <p>I am trying to get this:<br>
  <a href="https://i.stack.imgur.com/zzBFi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zzBFi.png" alt="example"></a></p>
  
  <p>Currently, I have this:<br>
  <a href="https://i.stack.imgur.com/cfoZN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cfoZN.png" alt="issue"></a></p>
  
  <p>Here is my code:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.btn-xs, .btn-group-xs &gt; .btn {
      padding: 1px 5px;
      font-size: 12px;
      line-height: 1.5;
      border-radius: 3px;
      width: 73px;
      height: 38px;
      background-color: #53585f;
      color: white;
      font-family: sans-serif;
  }
    .btn-default:hover {
  
      background-color: #b89981;
      color: white;
  
  }
  ul.list-group:after {
    clear: both;
    display: block;
    content: "";
  }
  
  .list-group-item {
      float: left;
  }
  
  .list-group-item {
      position: relative;
      display: block;
      padding: 10px 15px;
      margin-bottom: -1px;
      background-color: #fff;
      border: 1px solid #ddd;
      width: 73px;
  }
  .padding20 {
      padding : 10px;
  }
  
  .textbox {
      line-height: 24px;
  }
  .liststyle1 {
      margin: 0;
      list-style: none;
      margin-top: 10px;
      line-height: 28px;
      color: #309be8;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;h2&gt;dsd&lt;/h2&gt;
    &lt;button type="button" class="btn btn-default btn-xs"&gt;Total&lt;/button&gt;
           &lt;button type="button" class="btn btn-default btn-xs"&gt;Check-Out&lt;/button&gt;
             &lt;button type="button" class="btn btn-default btn-xs"&gt;Check-In&lt;/button&gt;
               &lt;button type="button" class="btn btn-default btn-xs"&gt;Alerts&lt;/button&gt;
                 &lt;button type="button" class="btn btn-default btn-xs"&gt;Tentative&lt;/button&gt;
  
  
  &lt;/div&gt;
  
  &lt;div class="container list-top"&gt;
    &lt;ul class="list-group"&gt;
      &lt;li class="list-group-item"&gt;12Bookings
  &lt;/li&gt;
      &lt;li class="list-group-item"&gt;Dapibus &lt;/li&gt;
      &lt;li class="list-group-item"&gt;Morbi&lt;/li&gt;
      &lt;li class="list-group-item"&gt;Porta&lt;/li&gt;
      &lt;li class="list-group-item"&gt;Vestib&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>