"Equal Panel Height"
Bootstrap 3.3.0 Snippet by joseanmola

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- dirty spacers -->
<br />
<br />
<div class="container">
<div class="row equal-panels">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h1>Large Header</h1>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis sem dui.
</div>
<div class="panel-footer">
<div class="pull-right">
Small Footer
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading">
<span>small header</span>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent quis sem dui. Maecenas consectetur augue et tortor
scelerisque ultricies. Ut posuere at enim id mollis. Mauris
nec vestibulum augue. Morbi imperdiet nibh vel elit tempor
dignissim. Sed nec diam eget mi sagittis fermentum ac non
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
.equal-panels, .equal-panels > div[class*='col-'] { display: flex; }
.equal-panels .panel { display: flex; flex: 1; flex-flow: column nowrap;}
.equal-panels .panel-body { flex-grow: 1; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: