0

Bootstrap Responsive Columns of Same Height

Vertical alignment on Bootstrap columns with equal height

Following is the Html
[code language=”html”]
<div class="container container-sm-height">
<div class="row row-sm-height">
<div class="col-xs-12 col-sm-6 col-sm-height"></div>
<div class="col-xs-6 col-sm-3 col-sm-height col-top"></div>
<div class="col-xs-6 col-sm-2 col-sm-height col-middle"></div>
<div class="col-xs-6 col-sm-1 col-sm-height col-bottom"></div>
</div>
</div>
[/code]

Follwing is the css

[code language=”css”]

* columns of same height styles */
.container-xs-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.row-xs-height {
display:table-row;
}
.col-xs-height {
display:table-cell;
float:none;
}
@media (min-width: 768px) {
.container-sm-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.row-sm-height {
display:table-row;
}
.col-sm-height {
display:table-cell;
float:none;
}
}
@media (min-width: 992px) {
.container-md-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.row-md-height {
display:table-row;
}
.col-md-height {
display:table-cell;
float:none;
}
}
@media (min-width: 1200px) {
.container-lg-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.row-lg-height {
display:table-row;
}
.col-lg-height {
display:table-cell;
float:none;
}
}
* firefox fix */
.img-responsive {
width: 100%;
}

/* vertical alignment styles */
.col-top {
vertical-align:top;
}
.col-middle {
vertical-align:middle;
}
.col-bottom {
vertical-align:bottom;
}

[/code]

Sandeep Kumar

Sandeep kumar is a web developer and a professinal blogger. He works for latest technologies and write articles what he learn. In ICodeHub he share web languages tutorials and other programming tips and tricks. if you need some help or have some suggestion then mail him at sandeep92pal@gmail.com without any hesitation. He believes in learning and sharing.