Using Bootstrap how do I layout elements horizontally?

Question

I have the below that I am trying to replicate this mock-up -->

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 style but it seems like I shouldn't need to.

Here's what I have so far -->

<div id="Row1" class="row">
<div id="Door1" class="col-md-2 panel panel-primary" >
    <div id="Door1Head" class="panel-heading">
        <span class="badge">1</span>
        <h3 class="panel-title">RE031159</h3>
        <span class="glyphicon glyphicon-arrow-up"></span>
    </div>
    <div class="panel-body">
        <ul class="list-group">
            <li class="list-group-item">
                12315 Carregeenan WG-16 4000 lbs
            </li>
            <li class="list-group-item">
                1063545 Carp meal spread 1042 lbs
            </li>
        </ul>
    </div>
</div>
<div id="Door2" class="col-md-2">
    <span class="badge">2</span>
</div>
<div id="Door3" class="col-md-2">
    <span class="badge">3</span>
</div>
<div id="Door4" class="col-md-2">
    <span class="badge">4</span>
</div>
<div id="Door5" class="col-md-2">
    <span class="badge">5</span>
</div>

<div id="Row2" class="row">
    <div id="Door6" class="col-md-2">
        <span class="badge">6</span>
    </div>
    <div id="Door7" class="col-md-2">
        <span class="badge">7</span>
    </div>
    <div id="Door8" class="col-md-2">
        <span class="badge">8</span>
    </div>
    <div id="Door9" class="col-md-2">
        <span class="badge">9</span>
    </div>
    <div id="Door10" class="col-md-2">
        <span class="badge">10</span>
    </div>
</div>

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 @foreach loops to build each "card".

Answer 1

As mentioned in a bunch of other comments, all your columns in a row need to add up to 12. There is a couple of ways to correct this. The answer proposed by Robb puts an empty column on each end of the row in order to do this. You could also limit 4 "doors" per row and increase the size of each column to 3. Finally you could come up with a 10 column system, but that might be a little extreme given then other two solutions.

As far as your headers not aligning horizontally. The following code demos one possible way to do it.

My changes are

    <div id="Door1Head" class="panel-heading">
      <span class="badge pull-left">1</span>
      <span class="glyphicon glyphicon-arrow-up pull-right" ></span>
      <h3 class="panel-title text-center">RE031159</h3>
      <div class="clearfix text-center">Some text here</div>
    </div>

Maybe not the best way to do things in bootstrap, but it works. Hopefully someone can build off of this to get you what you are looking for.

Answer 2

Not sure this is exactly what you are looking for, but I'd work at having a single row and getting my panels to just iterate inside the row. Something like this:

<div class="row">  
  <div class="col-2 col-sm-5 col-md-3 col-lg-2 panel panel-primary">
    <div class="panel-heading">
      <span class="badge">01</span>
      <h3 class="panel-title">Panel Title</h3>
    </div><!-- /.panel-heading -->
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  </div><!--/span-->
</div><!-- /.row -->

Working Bootply example with responsive panels