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

Online Generator for Writing a Privacy Policy

Many websites need a privacy policy page. WordPress actually has a pre-built privacy policy page that users can edit. However, editing what they give you can be a little overwhelming. Also, most developers usually don’t have clients edit any pages yet while they’re building the site to avoid any mess

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