Tutorial & code

Bottom Aligned Modules in Columns

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

VIDEO

CODE

Minimum BB plugin required: Lite Saved under: Rows
Skill level: Beginner Contributor: David Waumsley

Template Location

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.

See the Bottom Aligned Modules in Columns template in action.

Example

Code

CSS

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

}
/* This is need to allow the buttons to be full width */
.bottom-aligned > *{
flex: 1 1 100%;
}

Discounts On These Two Lifetime Deals:

MainWP. Discount code "digitalfreedoms" 15% off
WP Code Box. Discount code "beaverjunction" 25% off

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

Get the Beaver Junction Plugins here

Get it now

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.