How to disable same height columns in bootstrap 4.0

user_8740581 0
Viewed 2850

After hours of pulling my hair out as to why my columns all kept being set to the same height I learned bootstrap now automatically ships this way in v4. How does one go about turning that off and going bad to normal columns of v3?

Thanks.

<div class="container">
          <div class="row">
             <div class="col-sm-8">
              <p> Hi, I'm a small container. </p>
             </div>
             <div class="col-sm-4">
              <h1> Hi, I'm a much bigger container. </h1>
             </div>
          </div>
   </div>

In this example, my smaller div's height gets stretched so it is the same height as the bigger one for the larger text. This is what I want to avoid.

twitter-bootstrap-4 multiple-columns
1 Answers

On Bootstrap 4 there are flexbox utilities, so you can add .align-items-start to the .row:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row align-items-start">
  <div class="col-lg-4 col-md-4 col-sm-4 hidden-xs-down">
      Some content on the left that's going to be smaller than right
  </div>
  <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
     A <br/>
     B <br/>
     C <br/>
     D <br/>
     E <br/>
     F <br/>
  </div>
</div>

user_39900970
Related