CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
m_collard
m_collard

Reputation: 2028

How to make the 2nd column in a 2 column Bootstrap grid the same height as the 1st column

I've created a 1 row, 2 column Bootstrap grid. The 1st column contains an img that has a width of 100%. So the row height changes when the Browser window width is made bigger or smaller (which is what I want).

The 2nd column contains a div with a paragraph of text. I would like the div in the 2nd column to have the same height as the div (image) in the 1st column. And the text in the 2nd column centred both horizontally and vertically.

But at the moment this is what my Bootstrap grid looks like using the following HTML and CSS: enter image description here

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/styles.css" media="all">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="all">
        <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body>
        <div class="container" style="padding-top: 20px;">
            <div class="row">
                <div class="col-xs-8 left-column">
                    <img alt="" src="images/beach.jpg">
                </div>
                <div class="col-xs-4 right-column">
                    <p>Lots of sand on the beach</p>
                </div>
            </div>
        </div>
    </body>
</html>

CSS

.left-column img {
    width: 100%;
}

.right-column {
    background-color: red;
}
.right-column p {
    text-align: center;
    vertical-align: middle;
}

As you can see the div in the 2nd column isn't the same height as the div (image) in the 1st column.

Below is an image of what I'm trying to achieve

enter image description here

Can someone please show me how to make the div (right-column) in the 2nd column have the same height as the div (image) in the 1st column (even when the width of the Browser window is resized).

Upvotes: 1

Views: 1833

Answers (2)

Himechi90
Himechi90

Reputation: 348

This is a snippet that you can use:

/* 
TRICK FOR SAME COLUMN HEIGHT USING BOOTSTRAP 3

USAGE EXAMPLE:
<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>
*/

/* 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;
  }
}

DEMO: http://codepen.io/Himechi90/pen/MaoEWg

Good luck!

Upvotes: 2

Nathaniel Flick
Nathaniel Flick

Reputation: 2963

row-eq-height class on the columns you want to be the same. More here: http://getbootstrap.com.vn/examples/equal-height-columns/

Just make sure you only need to support browsers that support Flex-Box.

Upvotes: 2

Related Questions