Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save mshahin364/0680439098664ee4d1dd to your computer and use it in GitHub Desktop.
Save mshahin364/0680439098664ee4d1dd to your computer and use it in GitHub Desktop.
// Source by http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
// 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;
}
}
// 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