Odd numbers of icons and varying text lengths lead to irregular alignment of the second row of icons

[DaveParr]

Describe the bug
When there are 5 icons with differing text lengths, drawing position for the second row is not garunteed to be aligned on desktop screens

satRdays/Columbus2020@987d77c#diff-618063036395fe9ee107f22b46c9eadeL100-L106 In the highlighted section of this commit, the description of the icons is lengthed significantly as well as deleting one icon leads to the '4th' icon on larger displays wrapping to fit 'under' the '3rd', while the '5th' will be staggered downward and drawn to the left.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Current work around
Keep the icon number at six, and the description text lengths roughly consistent

[jdblischak]

From my research last year, I learned this was a known limitation of bootstrap. This SO post describes multiple potential CSS-based workarounds to accommodate the situation where the number of lines of text differs between the items.

The most immediate fix is to simply ensure all your items have the same number of lines of text. This has been my general experience with bootstrap. All of their example website templates look beautiful, but the fact that all the images and example text are the exact same size isn't just because it's a demo; it's because it's a requirement. If you want your website to have the same layout, you have to pre-edit all your images to have the exact same dimensions and ensure the text in each column has the same number of lines.