Tutorial & code

Bottom Aligned Modules in Columns

A simple CSS snippet that let you align modules to the bottom of columns.

Minimum BB plugin required:      Saved under:  
Skill level:     Contributor: 

Template Location

Bj Custom Rows Nav 1

Video

Notes

 The video here was made before the Beaver Junction plugin was created.
Note: This needs the columns to remain set to equal heights.

Beaver Builder Equalize Heights

See the Bottom Aligned Modules in Columns template in action.

Code

CSS

/* This is added to the containing row, but can be added anywhere */ 
.bottom-aligned{
align-content: flex-end;
flex: 1 1 0;
display: grid;
}

You can support my work by buying the tools I use through my affiliate links:

Exclusive 25% Off These Two Lifetime Deals:

MainWP.   Discount code "digitalfreedoms"
WP Code Box.  Discount  code "beaverjunction"

--------------------------------------------------------------

WP Rocket | ShortPixel | Beaver Builder |

Can you improve this template?

We'd love it if you can so please comment and share.

For help please post to the Beaver Builder Beginners Facebook group or the YouTube video with this post.

Leave a Comment