Bootstrap Snippet Equal height cols using HTML CSS Bootstrap

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 ---------->
<div class="container">
    <div class="row">
        <h2>EQUAL COLS</h2></h2>
    </div>
</div>
<div class="container">
    <div class="row display-flex">
        <div class="col-lg-4 col-md-6 col-sm-12">
            <div class="box">
                <img src="//placehold.it/150x50" class="center-block">
                <h3>Some text</h3>
                 <a hre="" class="btn">BOTON</a>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12">
            <div class="box">
                <img src="//placehold.it/150x50" class="center-block">
                <h3>Some text</h3>
                <a hre="" class="btn">BOTON</a>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12">
            <div class="box">
                <img src="//placehold.it/150x50" class="center-block">
                <h3>Some text more more more more more more more more more more more more text that wraps to new link</h3>
                 <a hre="" class="btn">BOTON</a>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12">
            <div class="box">
                <img src="//placehold.it/150x50" class="center-block">
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
.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  flex-grow: 1;
  margin-bottom:20px;
}
.row.display-flex .btn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    background-color: #000000;
    margin: 0 40px;
}
.row.display-flex .box {
    border:1px #666 solid;
    height: 100%;
    padding:20px 20px 60px 20px;
    background-color: #fff000;
}
body {
    background-color: grey;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Equal height cols"
Bootstrap 3.3.0 Snippet by joseanmola

Related: See More

Questions / Comments:

"Equal height cols" Bootstrap 3.3.0 Snippet by joseanmola

Related: See More

Questions / Comments:

"Equal height cols"
Bootstrap 3.3.0 Snippet by joseanmola