Equal Height Components in Bulma Columns
Look at the following example. We have three message components in columns of Bulma (version 0.6.2).
Header of Column 1
Body of Column 1
Header of Column 2
Body of Column 3
Header of Column 2
Body of
Column 3
Column 3
The column 3 is higher than the other two columns on wide screens, and it looks ugly. We want to make the three messages to be of equal height. (You should not view this page on mobile devices because the columns will be stacked)
The solution [2] is to add height: 100%; to your components. In this case, we add the following rule in CSS:
.message {
height: 100%;
}
After adding height: 100%;, The above example will look like:
Header of Column 1
Body of Column 1
Header of Column 2
Body of Column 3
Header of Column 2
Body of
Column 3
Column 3
Now it looks better and should be the result of most designers want.
References:
| [1] |
| [2] | Equal height of card components · Issue #218 · jgthms/bulma · GitHub |
| [3] | [Question] How to set columns height equal to the longest column? · Issue #696 · jgthms/bulma · GitHub |
| [4] | css - How to set column height equal to longest column in Bulma (flexbox)? - Stack Overflow |
| [5] |