I have following HTML code:
<div class="row">
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-body">
Panel 1 (left)
</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-body">
Panel 2 (center)
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-body">
Panel 3 (right)
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-body">
Panel 2-2 (under panel 2)
</div>
</div>
</div>
</div>
Final result should look like this:
And it works, but if panel 3 have bigger height than panel 1 or 2 I get this:
How can I fix it?
This is how you should have done it, by nesting the Panel 2-2 under Panel 2 instead of letting it lie at the end, which is not what you'll want. Here's the Bootply:http://bootply.com/102721
Code
<div class="row">
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-body">Panel 1 (left)</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-body">Panel 2 (center)</div>
</div>
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-body">Panel 2-2 (under panel 2)</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-body">Panel 3 (right)
<br>Panel 3 (right)
<br>Panel 3 (right)
<br>Panel 3 (right)
<br>Panel 3 (right)
<br>Panel 3 (right)
<br>Panel 3 (right)
<br>Panel 3 (right)
<br>Panel 3 (right)
<br>Panel 3 (right)
<br>Panel 3 (right)
<br>
</div>
</div>
</div>
</div>
Demo
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With