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!

6 Comments

  1. Peter Ingersoll on January 15, 2020 at 5:50 pm

    Hi David,

    Very cool, indeed.
    I did have to add a minimum height to the column – but it doesn’t look like you needed to in your example.
    I got the clue for minimum height from your previous post on doing something similar for the pricing table.

    – Peter

    • David Waumsley on March 6, 2020 at 7:26 am

      So sorry Peter. I only just saw this. Very interesting. Yes, you are right it did not need to set the minimum height. Great tip.

  2. Jodi on March 11, 2020 at 6:26 am

    I couldn’t get it to work quite right for some reason, but found this worked:

    .button {
    margin-top: auto;
    }

    Source: https://wpbeaches.com/aligning-last-item-bottom-container-flexbox/

    • David Waumsley on March 12, 2020 at 9:38 am

      Excellent find Jodi. Thanks so much for sharing. I wonder what is making the difference between working and not.

      I have enough feedback to know mine was not a one of success, but don’t know what makes it not work. Different modules, maybe?

  3. Lis Sowerbutts on October 30, 2020 at 12:18 am

    This worked perfectly for me! Thank you

    • David Waumsley on October 30, 2020 at 3:17 am

      Thanks Liz,
      I have now added this to templates on the Beaver Junction plugin.

Leave a Comment