/*
<!--
	example for following two classes
	both the red and green columns should be the same height with their text verticall aligned middle
	under md they will be underneath one-another just as normal bootstrap cols
	Note: this only works for one row, i.e. your col-X-Y must only add up to 12
-->
<div class="equal-height-md vertical-align-md">
	<div class="row">
		<div class="col-md-8" style="background:red">
			[long text here]
		</div>
		<div class="col-md-4" style="background:green">
			[short text here]
		</div>
	</div>
</div>
*/
.equal-height-xs {
  margin: 0 -15px;
}
.equal-height-xs > .row {
  margin: 0;
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}
.equal-height-xs > .row:before,
.equal-height-xs > .row:after {
  content: none;
  display: none;
}
.equal-height-xs > .row > [class*="col-"] {
  display: table-cell;
  float: none;
  height: 100%;
  vertical-align: top;
}
@media (min-width: 768px) {
  .equal-height-sm {
    margin: 0 -15px;
  }
  .equal-height-sm > .row {
    margin: 0;
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .equal-height-sm > .row:before,
  .equal-height-sm > .row:after {
    content: none;
    display: none;
  }
  .equal-height-sm > .row > [class*="col-"] {
    display: table-cell;
    float: none;
    height: 100%;
    vertical-align: top;
  }
}
@media (min-width: 992px) {
  .equal-height-md {
    margin: 0 -15px;
  }
  .equal-height-md > .row {
    margin: 0;
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .equal-height-md > .row:before,
  .equal-height-md > .row:after {
    content: none;
    display: none;
  }
  .equal-height-md > .row > [class*="col-"] {
    display: table-cell;
    float: none;
    height: 100%;
    vertical-align: top;
  }
}
@media (min-width: 1200px) {
  .equal-height-lg {
    margin: 0 -15px;
  }
  .equal-height-lg > .row {
    margin: 0;
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .equal-height-lg > .row:before,
  .equal-height-lg > .row:after {
    content: none;
    display: none;
  }
  .equal-height-lg > .row > [class*="col-"] {
    display: table-cell;
    float: none;
    height: 100%;
    vertical-align: top;
  }
}
.vertical-align-xs > .row > [class*="col-"] {
  vertical-align: middle;
}
@media (min-width: 768px) {
  .vertical-align-sm > .row > [class*="col-"] {
    vertical-align: middle;
  }
}
@media (min-width: 992px) {
  .vertical-align-md > .row > [class*="col-"] {
    vertical-align: middle;
  }
}
@media (min-width: 1200px) {
  .vertical-align-lg > .row > [class*="col-"] {
    vertical-align: middle;
  }
}
[class*="col-"] {
  width: 100%;
}