Skip to content

Instantly share code, notes, and snippets.

@awood
Created April 24, 2014 18:51
Show Gist options
  • Save awood/11265312 to your computer and use it in GitHub Desktop.
Save awood/11265312 to your computer and use it in GitHub Desktop.
A simple LESS style sheet that you can use in Bootstrap 3 to create columns of uniform height.
// Courtesy of http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
.column-rules(@type) {
.container-@{type}-height {
display: table;
padding-left: 0px;
padding-right: 0px;
}
.row-@{type}-height {
display: table-row;
}
.col-@{type}-height {
display: table-cell;
float: none;
}
}
.column-rules(xs);
@media(min-width: @screen-sm-min) { .column-rules(sm); }
@media(min-width: @screen-md-min) { .column-rules(md); }
@media(min-width: @screen-lg-min) { .column-rules(lg); }
/* vertical alignment styles */
.col-top {
vertical-align: top;
}
.col-middle {
vertical-align: middle;
}
.col-bottom {
vertical-align: bottom;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment