CODEWITHSUNDEEP
htmlcssbootstrap-4
astralmaster
astralmaster

Reputation: 2465

Make all flex columns the same height in Bootstrap 4

In the following example, how would one utilize flex classes to make columns no.3 and 4 the same height as columns no.1 and 2? Without Javascript, that is.

More specifically, how would I make the height of all columns change automatically to the height of the column with the biggest 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>

https://www.codeply.com/p/Y25WSHG8fs

Upvotes: 0

Views: 65

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105883

If you want to keep it done via CSS, you will need to swap from a flex layout to a grid layout to even rows and columns:

Example to show the idea with style overiding bs4's css

( for ie11 old syntax + @supports for others can be a compromise test here : https://jsbin.com/bewaducewe/1/edit )

/* overwrite bs4 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>

Upvotes: 2

Serhan Yav&#231;in
Serhan Yav&#231;in

Reputation: 89

If you want to use it, there is a plugin for just that.

jQuery.matchHeight

$(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>

Upvotes: 0

Related Questions