Bootstrap, can't make panels the same size

Question

this is the code I have:

<div class="col-md-4">
   <div class="panel panel-default">
      <div class="panel-heading">
         <h4><i class="fa fa-fw fa-tasks"></i> Extreme Performance</h4>
      </div>
      <div class="panel-body">
         <p>We deploy 3.5ghz+ nodes powered by ultra fast solid state drives, topped off with a 1-click mod installer to provide the ultimate Minecraft experience.</p>
      </div>
   </div>
</div>
<div class="col-md-4">
   <div class="panel panel-default">
      <div class="panel-heading">
         <h4><i class="fa fa-fw fa-gift"></i> Completely Free</h4>
      </div>
      <div class="panel-body">
         <p>Our Minecraft servers are completely free; we have no hidden fees, and don't ask for any payment information. As the old saying goes, "The best things in life are free".</p>
      </div>
   </div>
</div>
<div class="col-md-4">
   <div class="panel panel-default">
      <div class="panel-heading">
         <h4><i class="fa fa-fw fa-cog"></i> Easy to Use</h4>
      </div>
      <div class="panel-body">
         <p>We utilize a combination of TCAdmin V2, and McMyAdmin. This allows for the streamline access and management of your server.</p>
      </div>
   </div>
</div>

I just can't seem to get the boxes to be the same height. I've tried bootstrap's solution using the eq height class, but it causes the boxes to connect to one another. I've also tried flex box, to no avail.

I'm been struggling with this for the past few days, hopefully you guys can help me out.

plenty of solutions around in stackoverflow (and the web overall) about how to make floating containers same height. You just have to spend a few minutes searching. — Alvaro Menéndez, Oct 02 '15 at 20:52
For instance: http://stackoverflow.com/questions/20503064/twitter-bootstrap-3-three-panels-of-equal-height-in-a-fluid-row — Marshall, Oct 02 '15 at 20:58
I saw that post and tried the solutions within it. They suggested both flex box and eq height which both make the panels stick together. — Francesco Aiello, Oct 02 '15 at 21:01
the panels don't look stuck together in the example: http://www.bootply.com/127828 Check that markup against yours and make sure you're not missing anything. The code you posted for instance is missing the .row div (or is it a .row-fluid?) — Marshall, Oct 02 '15 at 21:08
I'm not entirely sure, I'm still learning HTML & CSS. This came from one of getbootstrap's templates. — Francesco Aiello, Oct 02 '15 at 21:22
Can you show your issue in a fiddle? Here is what I see https://jsfiddle.net/99x50s2s/120/ and there is no issue.. — JGV, Oct 02 '15 at 21:44

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

Or if you like, here's your markup with the css class: http://www.bootply.com/MCDSaiRYWO

This will only work in browsers that support flexbox of course.

But go here and upvote this guy. He wrote the CSS.

edited May 23 '17 at 11:58

Community

1
1

answered Oct 02 '15 at 21:21

Marshall

196
10

That worked perfectly! It must have been my inability to properly markup the html. – Francesco Aiello Oct 02 '15 at 21:28

score 0 · Answer 2 · answered Oct 02 '15 at 22:01

I think you just tried to use Bootstrap's equal columns in a wrong way. Here's a fully working example:

[https://jsfiddle.net/Optimix/5dm2330g/2/][1]

Alternatively you can use .wells to achieve the same result:

[https://jsfiddle.net/Optimix/D4xdE/359/][1]

Hope you will find it helpful :)

Bootstrap, can't make panels the same size

2 Answers2