Equal heights columns - Bootstrap 4 - NOT WORKING!

HTML & CSS
1

Hello,

I never ever… tried to to figure out something very simple. I can’t manage to create equal heights… whatever i do. I have tried using flexbox, flex, min heights, jquery, negative margins/padding… nothing works…

Can somebody please help me? i am breaking my head here. when i resize to 2 columns it collapses… no mather what i tried…

<div class="container">
 <div class="row">
  <div class="col-md-4 col-sm-6 equal-heights">
     <h2>Column1 </h2>
    <p>This is column 1 lorem ipsum dollar hello/</p>
</div>
  <div class="col-md-4 col-sm-6 equal-heights">
     <h2>Column1 </h2>
    <p>This is column 1 dsadadassddsadsadasdasdasdasdasdasdsadsa</p>
</div>
  <div class="col-md-4 col-sm-6 equal-heights">
     <h2>Column1 </h2>
    <p>This is coewqeqweqweqweqweqweqwewqlumn 1 </p>
</div>
  <div class="col-md-4 col-sm-6 equal-heights">
     <h2>Column1 </h2>
    <p>This is coewqeqweqweqweqweqwlumn 1 </p>
</div>
2

I haven’t used bootstrap4 yet but I know it can use flexbox so you should be able to massage this approach into the structure.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.container{
	max-width:1170px;
	margin:auto;
}
.row{display:flex;flex-wrap:wrap;width:100%;}
.equal-heights{
		flex:1 0 23%;
		margin:1%;
		background:red;
		word-wrap:break-word;
}
@media screen and (max-width:800px){
	.equal-heights{flex:1 0 48%;}	
}
@media screen and (max-width:500px){
	.equal-heights{flex:1 0 98%;}	
}

</style>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6 equal-heights">
      <h2>Column1 </h2>
      <p>This is column 1 lorem ipsum dollar hello/</p>
    </div>
    <div class="col-md-4 col-sm-6 equal-heights">
      <h2>Column2 </h2>
      <p>This is column 1 dsada dassdds adsada sdasdasd asdasda dsadsa dsadadassdds adsada sdasdasd asdasda dsadsadsadadassdds adsada sdasdasd asdasda dsadsa</p>
    </div>
    <div class="col-md-4 col-sm-6 equal-heights">
      <h2>Column3 </h2>
      <p>This is coewqe qweqweqwe qweqwe qwewqlumn dsadadassdds adsada sdasdasd asdasda dsadsadsadadassdds adsada sdasdasd asdasda dsadsa </p>
    </div>
    <div class="col-md-4 col-sm-6 equal-heights">
      <h2>Column4 </h2>
      <p>This is coewqeqw eqweq weqwe qwlumn dsadadassdds adsada sdasdasd asdasda dsadsav </p>
    </div>
  </div>
</div>
</body>
</html>
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.