Setting up heights to multiple section blocks

[newcoder1010]

HTML:

<section data-quickedit-entity-id="block_content/43" id="block-acquisitionpractices" class="col-lg-6 col-md-6 col-sm-6 col-xs-12>
<div> one </div>
<div> two </div>
<div> three </div>
</section>

<section data-quickedit-entity-id="block_content/43" id="block-acquisitionpractices" class="col-lg-6 col-md-6 col-sm-6 col-xs-12>
<div> one </div>
<div> two </div>
<div> three </div>
<div> four </div>

</section>

<section data-quickedit-entity-id="block_content/43" id="block-acquisitionpractices" class="col-lg-6 col-md-6 col-sm-6 col-xs-12>
<div> one </div>
<div> two </div>

</section>

<section data-quickedit-entity-id="block_content/43" id="block-acquisitionpractices" class="col-lg-6 col-md-6 col-sm-6 col-xs-12>
<div> one </div>
<div> two </div>
<div> three </div>
<div> one </div>
<div> two </div>
<div> three </div>
</section>

As you can see, different blocks have different sizes of strings. However, I like to set the height equal. Height:650px works but some devices do not fit the contents, some devices show too much padding in the bottom, etc. What would be the best way to set the height equal(html plus css)  in all devices when blocks may not have equal number of characters?

 

Thanks!

[Ingolme]

If instead of bootstrap you use CSS, you can use the flexbox: https://www.w3schools.com/css/css3_flexbox.asp

With the align-items CSS property, you can make all of the items in the flexbox have the same height. To display a different amount of items per row, you can enable flex-wrap and give each box a percentage width using media queries.

[dsonesuk]

Once you have done valid html by adding closing quotes to class names, all you have to do is add

<div class="container">
  <div class="row">
	<!-- existing VALID html code -->
	</div></div>

[newcoder1010]

Thank you! Flexbox requires me to spend sometime before I am able to do it. I will look into it later. 

@dsonesuk I am bit confused with your answer. Can you please clarify a bit?

 

[dsonesuk]

Your code uses bootstrap, the code is already set up for flex box usage. But you are missing part of bootstrap code that uses display: flex; the class 'row' element that must wrap round all the elements with class 'col-*'. So by inserting your original code (once you have fixed missing quotes) where the html comment is, will correct it how it should've been used to achieve the flex box effect.

[newcoder1010]

Thanks! I will play with it.

 

[newcoder1010]

Could you please take a look at here? My requirement is to put border around each block. If I did not use border, then I might be okay. When I put borders and height then I see problem. How can I make the columns responsive and equal height?

[dsonesuk]

Don't use height.

The highest container whos content will set the height of itself and obviously the parent container. Then the flex box effect should make each other child containers, fill the height available to them from parent. So you dont need to set the height, doing so breaks the whole point in using flex- box in first place.

Edited August 8, 2020 by dsonesuk

[newcoder1010]

Now it is working. I set parent class to display flex and then removed height from child elements. Many thanks!

[dsonesuk]

Ahh. You are using version 3 of bootstrap, that doesn't use flex only 4 does, but you can add d-flex along with class 'row' which will give same result.