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

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%;
}