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:


Updated: Use this more logical solution offered by Zack Pyle.

.equal-height-buttons{
display: flex;
justify-content: center;
align-items: flex-end;
flex: 1 1 0;
}
.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!

10 Comments

  1. Peter Ingersoll 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 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 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 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?

    • Peter Peter on November 19, 2020 at 7:54 pm

      Thanks Jodi! This works better. For me, David’s solution displays fine on desktop, but not on mobile.

      • David Waumsley David Waumsley on November 19, 2020 at 8:42 pm

        Hi Peter,

        Thanks Peter. Useful you mention this. I still am trying to work out what is happening here. I don’t see mine working differently for mobiles.

        https://designs.beaverjunction.com/bottom-aligned-modules-in-columns/

        I added this as a template to my Beaver Junction plugin and would swap the code for Neil’s if I could workout what makes it seem to fail.
        Maybe lack of browser support display: grid or different content/settings to my example?

        I worry if I change it the folk who have been using mine will then have an issue because the situation is different. Any ideas?

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

    This worked perfectly for me! Thank you

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

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

  4. Annie Anderson Annie Anderson on March 16, 2022 at 5:37 pm

    Well. . . it works, except it makes the button the class is applied to auto width instead of full width like it’s supposed to be

Leave a Reply Cancel Reply