...">
Geek Answers Handbook

Bootstrap - panels with the same height and width

I have div.rowone 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 would like to set all panels of the same height regardless of their contents, for example, on this section of Twitter Bootstrap 3 - Panels of equal height in the fluid line , so I set the class .equal.

.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 do not have the same width (by default).

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

Jsfiddle

+4
2

, - :

.

.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

+4

, 100%?

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

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

0

More articles:


All Articles