Remove Equal Height In Bootstrap 4 Row Columns

I'm currently trying out the new version of Bootstrap, when using the updated grid system to segment two columns using this code (JSFiddle): Each column matches height, which is c

Solution 1:

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

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" /><divclass="row align-items-start"><divclass="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><divclass="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>

Bootstrap is using flexbox to format the grid:

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together. source:https://getbootstrap.com/docs/4.0/layout/grid/

So you can change the behavior of the grid by using the flexbox utilities.

Solution 2:

This is beacuse bootstrap uses flexbox. You can't turn it off.

What you can do is to use semantic elements for your content. Don't put text in meaningles divs, use Paragraphs and Links. They won't be as tall as the column.

<divclass="row"><divclass="col-lg-4 col-md-4 col-sm-4 hidden-xs-down"><p>Some content on the left that's going to be smaller than right</p></div><divclass="col-lg-8 col-md-8 col-sm-8 col-xs-12"><ul><li>A </li><li>b </li><li>c </li><li>d </li></ul></div></div>

What is your desired output, maybe you are using the grid system in an inefficient way? If we would have more info on how the result should look like we could offer some other solutions to you?