"Cols same height with button at bottom"
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
<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 ---------->
<h2>All the Same Height: Make the row think it's a table</h2>
<div class="big-sexy-buttons">
<div class="container">
<div class="row is-table-row">
<div class="col-sm-4">
<div class="box">
<h2>Oh My God!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad. adipisicing elit, sed do eiusmod tempor</p>
<a href="http://trovacamporella.com" class="btn btn-primary">trovacamporella</a>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>Becky, Look at Her Butt!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
<a href="http://mispicaderos.com" class="btn btn-primary">mispicaderos</a>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>It is like so super-duper this is a crazy long sentence big!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>
<a href="http://placesforlove.com" class="btn btn-primary">placesforlove</a>
</div>
</div>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
@media only screen and (min-width : 768px) {
.is-table-row {
display: table;
}
.is-table-row [class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
}
.is-table-row .box {
background: none;
position: static;
}
.is-table-row [class*="col-"] {
background: #fff;
}
/* Base Stuff Ignore */
a { transition: all 225ms ease; }
.container { padding-top: 25px; padding-bottom: 25px; background: rgba(255, 255, 255, 0.1); }
.row { padding-top: 25px; padding-bottom: 25px; background: rgba(255, 255, 255, 0.3); }
[class*="col-"] { border: solid 1px #e3e3e3; border-top-width: 2px; border-bottom-width: 2px; padding-top: 25px; padding-bottom: 25px; background: rgba(255, 255, 255, 0.5); }
[class*="col-"]:first-child { border-left-width: 2px; }
[class*="col-"]:last-child { border-right-width: 2px; }
.box {
padding: 25px 7% 0;
text-align: center;
position: relative;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: