Bottom Aligned Buttons on columns

January 15, 2020/David Waumsley

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:

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).

Posted in Beaver Builder Plugin Tips

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

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

Reply
- 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.
  
  Reply
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/

Reply
- 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?
  
  Reply
- 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.
  
  Reply
  - 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?
    
    Reply
Lis Sowerbutts on October 30, 2020 at 12:18 am

This worked perfectly for me! Thank you

Reply
- David Waumsley on October 30, 2020 at 3:17 am
  
  Thanks Liz,
  I have now added this to templates on the Beaver Junction plugin.
  
  Reply
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

Reply
- Annie S. Anderson on March 16, 2022 at 5:40 pm
  
  margin-top: auto; works perfectly for me, though!
  
  Reply

Bottom Aligned Buttons on columns

David Waumsley

10 Comments

Leave a Reply Cancel Reply