Bootstrap Panels not Aligned

Question

I'm trying to correctly align multiple columns and rows of Bootstrap Panels.

Sorry if this is a simple question, I'm very new to Bootstrap and fairly new to CSS+HTML.

Here's the code for one panel;

<div class="row">
    <div class="col-sm-3">
        <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Overall</h3>
            </div>
            <div class="panel-body">
                 Panel Body.
            </div>
        </div>
    </div>

Duplicate this, and we get two side by side. However, if we add an extra </div> at the end, the next one appears on a new line, but out of alignment. I want a similar layout to this;

X X X X
X X X X
X X X X
X X X X

Here's a screenshot of how it looks when out of alignment: http://i.imgur.com/t030kVU.png

Thanks for any help you can give, I'm sure it's something simple.

Answer 1

I don't really see the issue. Your markup seems fine to me. Just put your panels in a new row if you want a new row :)

<div class="row">
<div class="col-sm-3">
    <div class="panel panel-default">
        <div class="panel-heading">
             <h3 class="panel-title">Overall</h3>
        </div>
        <div class="panel-body">Panel Body.</div>
    </div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
    <div class="panel panel-default">
        <div class="panel-heading">
             <h3 class="panel-title">Overall</h3>
        </div>
        <div class="panel-body">Panel Body.</div>
    </div>
</div>
</div>

See this simple fiddle: http://jsfiddle.net/anup1986/4m0xfzz2/