Ensure consistent height for all flex columns in Bootstrap 4

Question

Ensure consistent height for all flex columns in Bootstrap 4

Is there a way to use flex classes in the example below to ensure columns 3 and 4 have the same height as columns 1 and 2 without using Javascript?

Specifically, how can I adjust the height of all columns automatically to match the tallest column's content?

<!-- Bootstrap 4.1.x library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="container">
  <div class="row">
    <div class="col-md-6">1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
      desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

    </div>
    <div class="col-md-6">2</div>
    <div class="col-md-6">3</div>
    <div class="col-md-6">4</div>
  </div>
</div>

html css bootstrap-4

Answer 1

Answer №1

To achieve the desired layout using CSS, you'll need to transition from a flexbox design to a grid layout to organize rows and columns uniformly:

Here's an example illustrating this concept with custom styles overriding Bootstrap 4's default CSS:

(You can use old syntax for IE11 compatibility + @supports for other browsers as a compromise test: https://jsbin.com/bewaducewe/1/edit)

/* Overriding Bootstrap 4 layout rules */

.container .row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
}

.container .row div {
  border: solid;
  min-width: 100%;
}

<!-- Bootstrap 4.1.x library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-6">1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
      desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

    </div>
    <div class="col-md-6">2</div>
    <div class="col-md-6">3</div>
    <div class="col-md-6">4</div>
  </div>
</div>

Answer 2

To achieve the desired layout using CSS, you'll need to transition from a flexbox design to a grid layout to organize rows and columns uniformly:

Here's an example illustrating this concept with custom styles overriding Bootstrap 4's default CSS:

(You can use old syntax for IE11 compatibility + @supports for other browsers as a compromise test: https://jsbin.com/bewaducewe/1/edit)

/* Overriding Bootstrap 4 layout rules */

.container .row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
}

.container .row div {
  border: solid;
  min-width: 100%;
}

<!-- Bootstrap 4.1.x library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-6">1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
      desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

    </div>
    <div class="col-md-6">2</div>
    <div class="col-md-6">3</div>
    <div class="col-md-6">4</div>
  </div>
</div>

Answer 3

Answer №2

If you're looking to utilize this feature, there's a handy plugin designed specifically for that purpose.

jQuery.matchHeight Plugin

$(function() {
    $('.fix-height').matchHeight(false);
});

.col-md-6 {
    background-color:green;
    border: 1px solid black;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="container">
    <div class="row equal-row">
        <div class="col-md-6 fix-height">1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</div>
        <div class="col-md-6 fix-height">2</div>
        <div class="col-md-6 fix-height">3</div>
        <div class="col-md-6 fix-height">4</div>
    </div>
</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Answer 4

If you're looking to utilize this feature, there's a handy plugin designed specifically for that purpose.

jQuery.matchHeight Plugin

$(function() {
    $('.fix-height').matchHeight(false);
});

.col-md-6 {
    background-color:green;
    border: 1px solid black;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="container">
    <div class="row equal-row">
        <div class="col-md-6 fix-height">1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</div>
        <div class="col-md-6 fix-height">2</div>
        <div class="col-md-6 fix-height">3</div>
        <div class="col-md-6 fix-height">4</div>
    </div>
</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Ensure consistent height for all flex columns in Bootstrap 4

Answer №1

Answer №2

Similar questions

How to position an element to the left and another to the center of the screen while vertically aligning both using CSS

How can you modify the Bootstrap width to activate the responsive design?

Clicking the button to send the form using JavaScript

The contents within the <div> element are not appearing on the webpage

Is there a way to add a dynamic animation of steam rising from a coffee cup to my SVG icon design?

How can I create a redirect link in HTML that opens in a new window

Guide to creating a PHP script for interfacing with a MySQL database

Assistance with CSS: How to Remove a Shape

Utilize AngularJS to compare and eliminate duplicate elements between two lists

Transferring information from JSON to HTML

Implement a Bootstrap button that can efficiently collapse all elements in one click

Place content following a three.js display created within a <div id="mainWindow">

Having trouble positioning a div in AngularJS so that it stays pixel-perfect regardless of browser resize or device orientation? Unfortunately, it's

There are two separate CSS files linked to the same page, but the browser is only rendering the styles from

Creating a navigation bar in React using react-scroll

The hovering of the mouse over a dropdown menu causes a division on the page to shift

Choosing the image that represents your website in Safari web previews

Exploring HTML5 canvas hit detection using isPointInPath() method

Adding a class to a clicked button in Vue.js

Saving the output of an AngularJS expression in an input field