Bottom Aligned Buttons on columns

I stumbled upon a way to align buttons (or any module) to the bottom of equal height Beaver Builder columns.

Bottom Aligned Buttons.fw

First make sure the columns are equal

Beaver Builder Equalize Heights

Then give your buttons a CSS class or ID selector name:

Beaver Builder Button Css

Finally add this CSS to your usual place using the selector name you chose:

.equal-height-buttons
{
align-content: flex-end;
flex: 1 1 0;
display: grid;
}

Notes:

  • I have no idea why this works (explanations welcomed).
  • but it works on the latest versions Chrome, Firefox and MS Edge. but not on Internet Explorer.
  • The extra space disappears when the columns stack on mobiles (which is good).
  • Flex 1 1 0 = grow 1, shrink 1 and basis 0 (this seemed to work best to not throw Internet Explorer out, but flex:1; alone would work on modern browsers).
david-waumsley-web-developer-150x150-circle

David Waumsley

A British chap who helps with websites and whatnot.  Some refer to him as a digital nomad, but he will accepts the term "fugitive" or "international bag lady".  He actually builds websites for a living. Yeah, I know!

Leave a Comment