CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Jack Hales
Jack Hales

Reputation: 1654

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):

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <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>

Each column matches height, which is currently an undesired attribute for the content I'll be displaying.

I've done a search for this and found out this was not in Bootstrap 3 and was now introduced into Bootstrap 4 by default.

Upvotes: 2

Views: 3807

Answers (2)

Sebastian Brosch
Sebastian Brosch

Reputation: 43594

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>

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.

Upvotes: 6

cloned
cloned

Reputation: 6742

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. 

<div class="row">
    <div class="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>

    <div class="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?

Upvotes: 2

Related Questions