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

Smart Web Creative - How To Grab a URL Parameter for an Elementor Form in a Popup

Elementor: How To Grab a URL Parameter for an Elementor Form in a Popup

Trying to find out how to grab a URL parameter for an Elementor form in a popup? You can use the Javascript code below within an HTML widget that is on your Elementor popup: <script type="text/javascript"> jQuery(function($){ //When Clicking Input Fields $(document).on(‘click’,’input’, function(event){ //Grab Current URL var urlstr = window.location.href;

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

Let's Get Some Info