Elementor: How to Align Buttons to Bottom of Columns

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.

Other Helpful Articles

How To Create an Email Signature in Gmail/G Suite

You may have noticed many businesses and individuals will have email signatures that look professional. If you have Gmail or G Suite, there’s actually a pretty easy way to set one up. To start creating your email signature, sign in to your Gmail account. Over in the top right you’ll

Read More »

What Do You Need Done?:

(Please check all that apply)

Tell Us About You

Almost Done!

Let's Get Some Info

Let's Get Some Info

Let's Get Some Info

Let's Get Some Info