Created
December 8, 2015 09:36
-
-
Save anonymous/1e1975c0514cca6de19a to your computer and use it in GitHub Desktop.
Bootstrap 3 responsive columns of same height Bootstrap 3 responsive columns of same height // source http://jsbin.com/xokerexola
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Bootstrap 3 responsive columns of same height</title> | |
<meta name="description" content="Bootstrap 3 responsive columns of same height"> | |
<!-- include bootstrap --> | |
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> | |
<style id="jsbin-css"> | |
/* USAGE | |
<div class="row"> | |
<div class="row-height"> | |
<div class="col-xs-2 col-xs-height col-xs-middle"> | |
<div class="inside"></div> | |
</div> | |
<div class="col-xs-4 col-lg-5 col-xs-height col-xs-middle"> | |
<div class="inside"></div> | |
</div> | |
</div> | |
</div> | |
*/ | |
/* content styles */ | |
.inside { | |
margin-top: 20px; | |
margin-bottom: 20px; | |
background: #ededed; | |
background: -webkit-gradient(linear, left top, left bottom,color-stop(0%, #f4f4f4), color-stop(100%, #ededed)); | |
background: -moz-linear-gradient(top, #f4f4f4 0%, #ededed 100%); | |
background: -ms-linear-gradient(top, #f4f4f4 0%, #ededed 100%); | |
} | |
.inside-full-height { | |
/* | |
// if you want to give content full height give him height: 100%; | |
// with content full height you can't apply margins to the content | |
// content full height does not work in ie http://stackoverflow.com/questions/27384433/ie-display-table-cell-child-ignores-height-100 | |
*/ | |
height: 100%; | |
margin-top: 0; | |
margin-bottom: 0; | |
} | |
.content { | |
padding: 12px 3px; | |
} | |
/* columns of same height styles */ | |
.row-height { | |
display: table; | |
table-layout: fixed; | |
height: 100%; | |
width: 100%; | |
} | |
.col-height { | |
display: table-cell; | |
float: none; | |
height: 100%; | |
} | |
.col-top { | |
vertical-align: top; | |
} | |
.col-middle { | |
vertical-align: middle; | |
} | |
.col-bottom { | |
vertical-align: bottom; | |
} | |
@media (min-width: 480px) { | |
.row-xs-height { | |
display: table; | |
table-layout: fixed; | |
height: 100%; | |
width: 100%; | |
} | |
.col-xs-height { | |
display: table-cell; | |
float: none; | |
height: 100%; | |
} | |
.col-xs-top { | |
vertical-align: top; | |
} | |
.col-xs-middle { | |
vertical-align: middle; | |
} | |
.col-xs-bottom { | |
vertical-align: bottom; | |
} | |
} | |
@media (min-width: 768px) { | |
.row-sm-height { | |
display: table; | |
table-layout: fixed; | |
height: 100%; | |
width: 100%; | |
} | |
.col-sm-height { | |
display: table-cell; | |
float: none; | |
height: 100%; | |
} | |
.col-sm-top { | |
vertical-align: top; | |
} | |
.col-sm-middle { | |
vertical-align: middle; | |
} | |
.col-sm-bottom { | |
vertical-align: bottom; | |
} | |
} | |
@media (min-width: 992px) { | |
.row-md-height { | |
display: table; | |
table-layout: fixed; | |
height: 100%; | |
width: 100%; | |
} | |
.col-md-height { | |
display: table-cell; | |
float: none; | |
height: 100%; | |
} | |
.col-md-top { | |
vertical-align: top; | |
} | |
.col-md-middle { | |
vertical-align: middle; | |
} | |
.col-md-bottom { | |
vertical-align: bottom; | |
} | |
} | |
@media (min-width: 1200px) { | |
.row-lg-height { | |
display: table; | |
table-layout: fixed; | |
height: 100%; | |
width: 100%; | |
} | |
.col-lg-height { | |
display: table-cell; | |
float: none; | |
height: 100%; | |
} | |
.col-lg-top { | |
vertical-align: top; | |
} | |
.col-lg-middle { | |
vertical-align: middle; | |
} | |
.col-lg-bottom { | |
vertical-align: bottom; | |
} | |
} | |
/* visual styles */ | |
body { | |
padding-bottom: 40px; | |
} | |
h1 { | |
margin: 40px 0px 20px 0px; | |
color: #95c500; | |
font-size: 28px; | |
line-height: 34px; | |
text-align: center; | |
} | |
[class*="col-"] { | |
border: 1px solid #80aa00; | |
background: #d6ec94; | |
} | |
/* centering styles for jsbin */ | |
html, | |
body { | |
width: 100%; | |
height: 100%; | |
} | |
html { | |
display: table; | |
} | |
body { | |
display: table-cell; | |
vertical-align: middle; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<h1>Full Height</h1> | |
<div class="row"> | |
<div class="row-height"> | |
<div class="col-xs-12 col-sm-6 col-sm-height"> | |
<div class="inside inside-full-height"> | |
<div class="content"><br><br><br><br><br><br><br></div> | |
</div> | |
</div> | |
<div class="col-xs-6 col-sm-3 col-sm-height col-sm-top"> | |
<div class="inside inside-full-height"> | |
<div class="content"></div> | |
</div> | |
</div> | |
<div class="col-xs-6 col-sm-2 col-sm-height col-sm-middle"> | |
<div class="inside inside-full-height"> | |
<div class="content"></div> | |
</div> | |
</div> | |
<div class="col-xs-6 col-sm-1 col-sm-height col-sm-bottom"> | |
<div class="inside inside-full-height"> | |
<div class="content"></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<h1>All resolutions</h1> | |
<div class="row"> | |
<div class="row-height"> | |
<div class="col-xs-6 col-height"> | |
<div class="inside"> | |
<div class="content"><br><br><br><br><br><br><br></div> | |
</div> | |
</div> | |
<div class="col-xs-3 col-height col-top"> | |
<div class="inside"> | |
<div class="content"></div> | |
</div> | |
</div> | |
<div class="col-xs-2 col-height col-middle"> | |
<div class="inside"> | |
<div class="content"></div> | |
</div> | |
</div> | |
<div class="col-xs-1 col-height col-bottom"> | |
<div class="inside"> | |
<div class="content"></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<h1>Columns width trick</h1> | |
<div class="row"> | |
<div class="col-xs-8"> | |
<div class="row"> | |
<div class="row-md-height"> | |
<div class="col-xs-5 col-md-height col-md-middle"> | |
<div class="inside"> | |
<div class="content"><br><br><br><br><br><br><br></div> | |
</div> | |
</div> | |
<div class="col-xs-3 col-md-height col-md-middle"> | |
<div class="inside"> | |
<div class="content"></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<h1>Push and pull</h1> | |
<div class="row"> | |
<div class="row-md-height"> | |
<div class="col-xs-2 col-md-push-1 col-md-height col-md-middle"> | |
<div class="inside"> | |
<div class="content"><br><br><br><br><br><br><br></div> | |
</div> | |
</div> | |
<div class="col-xs-3 col-md-pull-1 col-md-height col-md-middle"> | |
<div class="inside"> | |
<div class="content"></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<h1>Offset</h1> | |
<div class="row"> | |
<div class="row-md-height"> | |
<div class="col-xs-1 col-md-height"> | |
<div class="inside"> | |
<div class="content"><br><br><br><br><br><br><br></div> | |
</div> | |
</div> | |
<div class="col-xs-1 col-md-height"> | |
<div class="inside"> | |
<div class="content"></div> | |
</div> | |
</div> | |
<div class="col-xs-1 col-md-height"> | |
<div class="inside"> | |
<div class="content"></div> | |
</div> | |
</div> | |
<div class="col-xs-1 col-md-height"> | |
<div class="inside"> | |
<div class="content"></div> | |
</div> | |
</div> | |
<div class="col-xs-1 col-md-height"> | |
<div class="inside"> | |
<div class="content"></div> | |
</div> | |
</div> | |
<div class="col-xs-1 col-md-height"> | |
<div class="inside"> | |
<div class="content"></div> | |
</div> | |
</div> | |
<div class="col-xs-1 col-md-height"> | |
<div class="inside"> | |
<div class="content"></div> | |
</div> | |
</div> | |
<div class="col-xs-1 col-md-height"> | |
<div class="inside"> | |
<div class="content"></div> | |
</div> | |
</div> | |
<div class="col-xs-1 col-md-height"> | |
<div class="inside"> | |
<div class="content"></div> | |
</div> | |
</div> | |
<div class="col-xs-1 col-md-height"> | |
<div class="inside"> | |
<div class="content"></div> | |
</div> | |
</div> | |
<div class="col-xs-1 col-md-height"> | |
<div class="inside"> | |
<div class="content"></div> | |
</div> | |
</div> | |
</div> | |
<div class="row-md-height"> | |
<div class="col-xs-5 col-xs-offset-3 col-md-height"> | |
<div class="inside"> | |
<div class="content"><br><br><br><br><br><br><br></div> | |
</div> | |
</div> | |
<div class="col-xs-6 col-xs-offset-3 col-md-height"> | |
<div class="inside"> | |
<div class="content"></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script id="jsbin-source-css" type="text/css"> | |
/* USAGE | |
<div class="row"> | |
<div class="row-height"> | |
<div class="col-xs-2 col-xs-height col-xs-middle"> | |
<div class="inside"></div> | |
</div> | |
<div class="col-xs-4 col-lg-5 col-xs-height col-xs-middle"> | |
<div class="inside"></div> | |
</div> | |
</div> | |
</div> | |
*/ | |
/* content styles */ | |
.inside { | |
margin-top: 20px; | |
margin-bottom: 20px; | |
background: #ededed; | |
background: -webkit-gradient(linear, left top, left bottom,color-stop(0%, #f4f4f4), color-stop(100%, #ededed)); | |
background: -moz-linear-gradient(top, #f4f4f4 0%, #ededed 100%); | |
background: -ms-linear-gradient(top, #f4f4f4 0%, #ededed 100%); | |
} | |
.inside-full-height { | |
/* | |
// if you want to give content full height give him height: 100%; | |
// with content full height you can't apply margins to the content | |
// content full height does not work in ie http://stackoverflow.com/questions/27384433/ie-display-table-cell-child-ignores-height-100 | |
*/ | |
height: 100%; | |
margin-top: 0; | |
margin-bottom: 0; | |
} | |
.content { | |
padding: 12px 3px; | |
} | |
/* columns of same height styles */ | |
.row-height { | |
display: table; | |
table-layout: fixed; | |
height: 100%; | |
width: 100%; | |
} | |
.col-height { | |
display: table-cell; | |
float: none; | |
height: 100%; | |
} | |
.col-top { | |
vertical-align: top; | |
} | |
.col-middle { | |
vertical-align: middle; | |
} | |
.col-bottom { | |
vertical-align: bottom; | |
} | |
@media (min-width: 480px) { | |
.row-xs-height { | |
display: table; | |
table-layout: fixed; | |
height: 100%; | |
width: 100%; | |
} | |
.col-xs-height { | |
display: table-cell; | |
float: none; | |
height: 100%; | |
} | |
.col-xs-top { | |
vertical-align: top; | |
} | |
.col-xs-middle { | |
vertical-align: middle; | |
} | |
.col-xs-bottom { | |
vertical-align: bottom; | |
} | |
} | |
@media (min-width: 768px) { | |
.row-sm-height { | |
display: table; | |
table-layout: fixed; | |
height: 100%; | |
width: 100%; | |
} | |
.col-sm-height { | |
display: table-cell; | |
float: none; | |
height: 100%; | |
} | |
.col-sm-top { | |
vertical-align: top; | |
} | |
.col-sm-middle { | |
vertical-align: middle; | |
} | |
.col-sm-bottom { | |
vertical-align: bottom; | |
} | |
} | |
@media (min-width: 992px) { | |
.row-md-height { | |
display: table; | |
table-layout: fixed; | |
height: 100%; | |
width: 100%; | |
} | |
.col-md-height { | |
display: table-cell; | |
float: none; | |
height: 100%; | |
} | |
.col-md-top { | |
vertical-align: top; | |
} | |
.col-md-middle { | |
vertical-align: middle; | |
} | |
.col-md-bottom { | |
vertical-align: bottom; | |
} | |
} | |
@media (min-width: 1200px) { | |
.row-lg-height { | |
display: table; | |
table-layout: fixed; | |
height: 100%; | |
width: 100%; | |
} | |
.col-lg-height { | |
display: table-cell; | |
float: none; | |
height: 100%; | |
} | |
.col-lg-top { | |
vertical-align: top; | |
} | |
.col-lg-middle { | |
vertical-align: middle; | |
} | |
.col-lg-bottom { | |
vertical-align: bottom; | |
} | |
} | |
/* visual styles */ | |
body { | |
padding-bottom: 40px; | |
} | |
h1 { | |
margin: 40px 0px 20px 0px; | |
color: #95c500; | |
font-size: 28px; | |
line-height: 34px; | |
text-align: center; | |
} | |
[class*="col-"] { | |
border: 1px solid #80aa00; | |
background: #d6ec94; | |
} | |
/* centering styles for jsbin */ | |
html, | |
body { | |
width: 100%; | |
height: 100%; | |
} | |
html { | |
display: table; | |
} | |
body { | |
display: table-cell; | |
vertical-align: middle; | |
}</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* USAGE | |
<div class="row"> | |
<div class="row-height"> | |
<div class="col-xs-2 col-xs-height col-xs-middle"> | |
<div class="inside"></div> | |
</div> | |
<div class="col-xs-4 col-lg-5 col-xs-height col-xs-middle"> | |
<div class="inside"></div> | |
</div> | |
</div> | |
</div> | |
*/ | |
/* content styles */ | |
.inside { | |
margin-top: 20px; | |
margin-bottom: 20px; | |
background: #ededed; | |
background: -webkit-gradient(linear, left top, left bottom,color-stop(0%, #f4f4f4), color-stop(100%, #ededed)); | |
background: -moz-linear-gradient(top, #f4f4f4 0%, #ededed 100%); | |
background: -ms-linear-gradient(top, #f4f4f4 0%, #ededed 100%); | |
} | |
.inside-full-height { | |
/* | |
// if you want to give content full height give him height: 100%; | |
// with content full height you can't apply margins to the content | |
// content full height does not work in ie http://stackoverflow.com/questions/27384433/ie-display-table-cell-child-ignores-height-100 | |
*/ | |
height: 100%; | |
margin-top: 0; | |
margin-bottom: 0; | |
} | |
.content { | |
padding: 12px 3px; | |
} | |
/* columns of same height styles */ | |
.row-height { | |
display: table; | |
table-layout: fixed; | |
height: 100%; | |
width: 100%; | |
} | |
.col-height { | |
display: table-cell; | |
float: none; | |
height: 100%; | |
} | |
.col-top { | |
vertical-align: top; | |
} | |
.col-middle { | |
vertical-align: middle; | |
} | |
.col-bottom { | |
vertical-align: bottom; | |
} | |
@media (min-width: 480px) { | |
.row-xs-height { | |
display: table; | |
table-layout: fixed; | |
height: 100%; | |
width: 100%; | |
} | |
.col-xs-height { | |
display: table-cell; | |
float: none; | |
height: 100%; | |
} | |
.col-xs-top { | |
vertical-align: top; | |
} | |
.col-xs-middle { | |
vertical-align: middle; | |
} | |
.col-xs-bottom { | |
vertical-align: bottom; | |
} | |
} | |
@media (min-width: 768px) { | |
.row-sm-height { | |
display: table; | |
table-layout: fixed; | |
height: 100%; | |
width: 100%; | |
} | |
.col-sm-height { | |
display: table-cell; | |
float: none; | |
height: 100%; | |
} | |
.col-sm-top { | |
vertical-align: top; | |
} | |
.col-sm-middle { | |
vertical-align: middle; | |
} | |
.col-sm-bottom { | |
vertical-align: bottom; | |
} | |
} | |
@media (min-width: 992px) { | |
.row-md-height { | |
display: table; | |
table-layout: fixed; | |
height: 100%; | |
width: 100%; | |
} | |
.col-md-height { | |
display: table-cell; | |
float: none; | |
height: 100%; | |
} | |
.col-md-top { | |
vertical-align: top; | |
} | |
.col-md-middle { | |
vertical-align: middle; | |
} | |
.col-md-bottom { | |
vertical-align: bottom; | |
} | |
} | |
@media (min-width: 1200px) { | |
.row-lg-height { | |
display: table; | |
table-layout: fixed; | |
height: 100%; | |
width: 100%; | |
} | |
.col-lg-height { | |
display: table-cell; | |
float: none; | |
height: 100%; | |
} | |
.col-lg-top { | |
vertical-align: top; | |
} | |
.col-lg-middle { | |
vertical-align: middle; | |
} | |
.col-lg-bottom { | |
vertical-align: bottom; | |
} | |
} | |
/* visual styles */ | |
body { | |
padding-bottom: 40px; | |
} | |
h1 { | |
margin: 40px 0px 20px 0px; | |
color: #95c500; | |
font-size: 28px; | |
line-height: 34px; | |
text-align: center; | |
} | |
[class*="col-"] { | |
border: 1px solid #80aa00; | |
background: #d6ec94; | |
} | |
/* centering styles for jsbin */ | |
html, | |
body { | |
width: 100%; | |
height: 100%; | |
} | |
html { | |
display: table; | |
} | |
body { | |
display: table-cell; | |
vertical-align: middle; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment