CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Jay
Jay

Reputation: 86

Bootstrap column height

I'm learning Bootstrap and hoping it will make building attractive page designs simpler for me.

I'm struggling to understand these two examples:

Bootstrap 3: http://codepen.io/rhutchinson/pen/WpxvWO

Bootstrap 4: http://codepen.io/rhutchinson/pen/aJZvKb

Since these are identical other than the version of Bootstrap used, I'm assuming that extending column height to the height of the .row is a new feature of Bootstrap 4.

Is there any way to replicate one version's behavior as to this issue while using the other version? If so, what would be the best way to go about doing that?

I'd like to understand these dimensional behaviors in order to give myself a better concept of front-end development, which doesn't come as naturally to me as the logic of back-end scripting.

Upvotes: 0

Views: 774

Answers (1)

neophyte
neophyte

Reputation: 6626

Yes the same column height is native support in bootstrap 4, as bootstrap 4 uses flex box.

You can easily achieve the same behaviour if you use flex for bootstrap 3 by using the below example--

img {
  border-radius: 50%;
}

.bord {
  border-style: solid;
}

.row-eq-height {
  display: flex;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row row-eq-height">
      <div class="col-sm-3 text-center bord">
        <img src="http://placehold.it/140x140" class="center-block" />
      </div>
      <div class="col-sm-6 text-center bord">
        <p>Some text</p>
      </div>
      <div class="col-sm-3 text-center bord">
        <img src="http://placehold.it/140x140" class="center-block" />
      </div>
    </div>
</div>

NOTE

As mentioned by @ZimSystems display: flex; works for full height, but it breaks the responsive behavior of the Bootstrap 3 row and columns .

Learn about flexbox here

Learn about the above example of .row-eq-height here

Hope this helps to clear your understanding!

Upvotes: 3

Related Questions