title: Using Bootstrap how do I layout elements horizontally?
body: <p>I have the below  that I am trying to replicate this mock-up --> <img src="https://i.stack.imgur.com/vD0w8.jpg" alt="DoorPanelImage"></p>
  
  <p>I am stuck on how to make my elements display horizontally?  Would I need to make a list or another "table"?  Was able to accomplish it using <code>style</code> but it seems like I shouldn't need to.</p>
  
  <p>Here's what I have so far --></p>
  
  <pre><code>&lt;div id="Row1" class="row"&gt;
  &lt;div id="Door1" class="col-md-2 panel panel-primary" &gt;
      &lt;div id="Door1Head" class="panel-heading"&gt;
          &lt;span class="badge"&gt;1&lt;/span&gt;
          &lt;h3 class="panel-title"&gt;RE031159&lt;/h3&gt;
          &lt;span class="glyphicon glyphicon-arrow-up"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
          &lt;ul class="list-group"&gt;
              &lt;li class="list-group-item"&gt;
                  12315 Carregeenan WG-16 4000 lbs
              &lt;/li&gt;
              &lt;li class="list-group-item"&gt;
                  1063545 Carp meal spread 1042 lbs
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="Door2" class="col-md-2"&gt;
      &lt;span class="badge"&gt;2&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="Door3" class="col-md-2"&gt;
      &lt;span class="badge"&gt;3&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="Door4" class="col-md-2"&gt;
      &lt;span class="badge"&gt;4&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="Door5" class="col-md-2"&gt;
      &lt;span class="badge"&gt;5&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div id="Row2" class="row"&gt;
      &lt;div id="Door6" class="col-md-2"&gt;
          &lt;span class="badge"&gt;6&lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="Door7" class="col-md-2"&gt;
          &lt;span class="badge"&gt;7&lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="Door8" class="col-md-2"&gt;
          &lt;span class="badge"&gt;8&lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="Door9" class="col-md-2"&gt;
          &lt;span class="badge"&gt;9&lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="Door10" class="col-md-2"&gt;
          &lt;span class="badge"&gt;10&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>For bigger picture, I am using Bootstrap 3 within an MVC 5 app.  I will be populating the info in the mock-up from a SQL DB using EF6.  I am imagining that I will be using some <code>@foreach</code> loops to build each "card".</p>