Main Content

Make Beaver Builder CTAs, Callouts and Info Banners align.

When using Beaver Builder, chance are you (or your client) will use the Call To Action (CTA) module, put a few in one row, and then realize that the button’s don’t align. 

CTA buttons out of alignment.

Then you’ll spend quite a bit of time trying to make them align only to realize that they don’t stay aligned at different break points.

Good news, I have some CSS that can help!

Add the following CSS to your WordPress child theme, or to the builder. It should render your modules now with the buttons all aligned.

CTA buttons in alignment.

Make sure to read the requirements in the code as well. Having the columns set to equal hight is a part of the alignment process. It also doesn’t work well when CTA buttons are inline, so make sure they’re stacked.

This doesn’t stop at the CTA module either. If you’re using the Callout module, here’s code to make them align.

If you’re using Ultimate Addons for Beaver Builder, here’s code for the UABB Info Banner module.

The same code can be modified to work with most any module, but it can be tricky based on how many wrappers each module has. 

I’ve tested this code back to IE11 and everything is working at the moment. If Beaver Builder changes classes, or adds more wrappers, it will probably need to be updated.

If you don’t know what Beaver Builder is, check out the quick start guide.

1 Response

  1. Michael says:

    Thank you, thank you!

Leave a Reply