Twitter Bootstrap Question posted in

Twitter bootstrap – Bootstrap – panels with same height and width

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

Tags:

2

Answers


  1. 0

    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/

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search