David Avellan David Avellan - 4 months ago 296
CSS Question

Bootstrap 3 - Displaying multiple panels side by side

So I have a website running on Bootstrap 3 and having a bit of an issue getting a panel to line up exactly like I want it to. At the bottom is how it looks now.

What I want is for that last panel on the bottom left to move up to fit beneath the top left panel, but I am not sure how to go about it doing it. It must be something simple that I am missing. Any advice is greatly appreciated. Thanks!



My jFiddle

<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">Test</div>
<div class="panel-body">Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">Test</div>
<div class="panel-body">Test Content</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">Test</div>
<div class="panel-body">Test Content</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">Test</div>
<div class="panel-body">Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">Test</div>
<div class="panel-body">Test Content</div>
</div>
</div>
</div>


Panels

Answer

You need to put the last panel under the first one, in the same column :

<div class="row">
    <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
            <div class="panel-heading">Test</div>
            <div class="panel-body">Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.</div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">Test</div>
            <div class="panel-body">Test Content</div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
            <div class="panel-heading">Test</div>
            <div class="panel-body">Test Content</div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
            <div class="panel-heading">Test</div>
            <div class="panel-body">Test Content</div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
            <div class="panel-heading">Test</div>
            <div class="panel-body">Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.</div>
        </div>
    </div>
</div>
Comments