Equal Heights For Each Row In Bootstrap Grid

This thread is resolved. Here is a description of the problem and solution.

Problem:
How to make each row equal height, and match the height of the tallest grid item within each row? I'd prefer the grid to automatically adapted to the height of the tallest item in each row.

Solution:
Here is basic HTML structure for creating Equal heights for each column in a row:
https://toolset.com/forums/topic/equal-heights-for-each-row-in-bootstrap-grid/#post-589049

This support ticket is created 7 years ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	12:00 – 17:00	12:00 – 17:00	12:00 – 17:00	12:00 – 17:00	12:00 – 17:00	-
-	18:00 – 21:00	18:00 – 21:00	18:00 – 21:00	18:00 – 21:00	18:00 – 21:00	-

Supporter timezone: Asia/Karachi (GMT+05:00)

Tagged: Views, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by Brent Urbanski 7 years ago.

Assisted by: Noman.

Author

Posts

November 10, 2017 at 5:41 pm #588685

Brent Urbanski

Screen Shot 2017-11-10 at 9.37.45 AM.png

Screen Shot 2017-11-10 at 9.37.23 AM.png

Would you happen to know how to make each row equal height, and match the heigh of the tallest grid item within each row?

I can set a specific height value with css for the grid item, but I'd prefer the grid to automatically adapted to the height of the tallest item in each row.

I'm working locally, so I cannot share a web page. I've uploaded some images of my View, but not sure if this helps.

November 13, 2017 at 8:43 am #589049

Noman

Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Brent,

Thank you for contacting Toolset support. Here is basic HTML structure for creating Equal heights for each column in a row:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Equal height rows</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
.list {
	display: flex;
	flex-wrap: wrap;
}
.list-item {
	display: flex;
	margin-bottom: 20px;
}
.list-content {
	width: 100%;
	background-color: #ccc;
	padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row list">
  <div class="col-sm-3 list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
	  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>
  <div class="col-sm-3 list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>
  <div class="col-sm-3 list-item">
    <div class="list-content">
      <h3>box 3</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </div>
  <div class="col-sm-3 list-item">
    <div class="list-content">
      <h3>box 4</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </div>
  <div class="col-sm-3 list-item">
    <div class="list-content">
      <h1>box 5</h1>
    </div>
  </div>
  <div class="col-sm-3 list-item">
    <div class="list-content">
      <h1>box 6</h1>
    </div>
  </div>
  </ul>
</div>
</body>
</html>

For more info:
hidden link

Thank you

November 14, 2017 at 7:04 am #589340

Brent Urbanski

Works perfectly, Norman.

Thanks for your help.