[Resolved] Set columns to have equal height

[Author]

Posts

[jamesW-26]

Tell us what you are trying to do?
I have created a view which uses Bootstrap grid with 3 columns. I am trying to get the columns to have equal width.

Is there any documentation that you are following?
All I can find is previous support tickets, none of which provide a clear cut answer.

What is the link to your site?
hidden link (click on "Latest" half way down the page)

Here is the view: hidden link

[Luo Yang]

Hello,

Thanks for the details, I have checked the URL you mentioned above with my Chrome browser, each column does have same height 487px, see screenshot: column-height.JPG

The problem inner HTML elements inside each column do not have same height, so it conducts the problem you mentioned above, I suggest you try to setup those inner HTML element with same height and test again, for example:
hidden link

[jamesW-26]

Hi Luo,

My apologies, in my message above I said "equal width", when I meant "equal height", but you picked up on that so thanks.

Specifying a specific height is not an option in this situation, as the content in the boxes are dynamic. I have just found a solution though ...

For the div inside each colum, I have applied this css:

height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;