Bootstrap - panels with same height and width

Question

I'm having a div.row that contains 3 panels with different contents:

<div class="row equal">

    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-body">
          <h3>Title 1</h3>
          <p>This is a paragraph</p>
          <p>This is a paragraph</p>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-body">
          <h3>Title 2</h3>
          <p>This is a paragraph</p>
          <p>This is a paragraph</p>
          <p>This is a paragraph</p>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-body">
          <h3>Title 3</h3>
          <p>This is a paragraph</p>
        </div>
      </div>
    </div>

</div>

I'd like to set all panels to have the same height, no matter their content, like on this topic Twitter Bootstrap 3 - Panels of Equal Height in a Fluid Row, so I have set my .equal class.

.equal, .equal > div[class*='col-'] {  
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex:1 1 auto;
}

The problem is that, although the height is set equal to all panels the width of each panel has changed, so now my panels don't have the same width (the default one).

Is there a way I can fix the width too, or maybe use another way to have in all my panels same width and height?

JSFiddle

By *(the default one)* you mean to `.panel` should occupy full `width` of `col-md-4` ? — vivekkupadhyay, Sep 02 '15 at 12:14

score 7 · Accepted Answer · answered Sep 02 '15 at 12:17

7

I think you want something like this:

Setting separated for ease of reference.

.equal {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

div[class*='col-'] {
  flex:1 1 auto;
  background: lightblue;
  display: flex;
}
.panel {
  flex:1 0 100%;
}

Codepen Demo

answered Sep 02 '15 at 12:17

Paulie_D

107,962
13
142
161

2

This is not responsive – ymakux Oct 09 '15 at 16:28
Yes...it is...check the Codepen demo. – Paulie_D Oct 09 '15 at 17:20
1

I mean panels not stacking. Try to add more panels (e.g 4 X col-md-3) - you'll get horizontal scrollbar. – ymakux Oct 10 '15 at 15:05
works like a charm. You saved me from lots of head scratching – Yonas Alemayehu Aug 29 '20 at 17:26

score 1 · Answer 2 · answered Sep 02 '15 at 12:15

1

what if you set the height of the parent and all children with height of 100%?

.equal{
    height:200px;
}
.col-md-4, .panel{
    height:100%;
}

https://jsfiddle.net/aroxv143/1/

answered Sep 02 '15 at 12:15

stackoverfloweth

6,669
5
38
69

Bootstrap - panels with same height and width

2 Answers2