Does your web page have a set of columns that all have buttons within them? Want to align the buttons to the bottom of the columns, but not sure how? Using the following methods can help you achieve that.
Method 1 – Using the CSS Flex Method
Step 1: Open the column advanced options.
Step 2: Copy and paste the code under “Custom CSS”:
selector .elementor-widget-wrap {
flex-direction: column;
}
selector .elementor-widget-wrap div:last-child {
margin-top: auto;
}
Step 3: (Optional) If you don’t have Elementor Pro, you can replace “selector” with your own CSS class that you can give to the columns. Give the class name to the columns by going to Column > Advanced > CSS classes for each. After that, add the CSS to your theme’s Additional CSS within the Customizer.
Method 2 – Using the CSS Grid Method
Step 1: Open the column advanced options.
Step 2: Copy and paste the code under “Custom CSS”:
selector .elementor-widget-wrap {
display: grid;
grid-template-rows: 1fr 3fr 5fr 1fr;
}
selector .elementor-widget-wrap > div.elementor-widget-button {
align-self: end;
}
Step 3: (Optional) If you don’t have Elementor Pro, you can replace “selector” with your own CSS class that you can give to the columns. Give the class name to the columns by going to Column > Advanced > CSS classes for each. After that, add the CSS to your theme’s Additional CSS within the Customizer.
After following one of the methods above, you should have your buttons aligned to the bottom of your columns. As a result, in some cases, you may need to adjust the horizontal alignment of your buttons and content within your column.
