Center align, left or right aligned text in mobile Beaver layout

So, you have left or right aligned text in a “text editor” widget and want it to appear center aligned when viewed on smaller mobile layout. There is no default setting in the Beaver Builder for this. However, you can easily implement this using quick CSS.

Default desktop view (left or right aligned text)


Mobile view (center aligned text)


Center align text editor text in mobile layout

Note: Make sure text within “text editor” widget is “not” left – center – right aligned using inline alignment option (like selecting text and clicking left – center – right buttons on the editor toolbar).

1. While in the “Beaver Builder” mode, click “add content” button. Then drag and drop “text editor” (under “Basic Modules” section) to the layout.


2. Add text to the “text editor” box and click on “Advanced” tab. Add a unique class like mobile-left-center to it. Then save changes.


3. Add following CSS code in the CSS box on the same page or add it to the style.css file of your child theme.

mobile-left-center class will make left aligned text, center aligned in the mobile layout. While, mobile-right-center class will make right aligned text, center aligned in the mobile layout.

Davinder Singh Kainth

About Davinder Singh Kainth

Davinder loves creating and implementing online spaces. He has over a decade of experience reaching corners of: design, development, blogging and SEO. Learn more at


  1. Chinmoy Paul on September 7, 2016 at 7:30 pm

    Great tut.

    Just a friendly suggestion: Replace the post ID with the permalink at @link line.

  2. Sascha on February 17, 2017 at 10:28 am

    Hi, very helfull, thanks!

  3. Andrew on August 16, 2017 at 2:50 pm

    Question. How would you do this with an image, easily. For example, I’m using a logo in Themer and I have added CSS to set a max width, like:

    .header-logo {
    max-width: 200px;

    Only I noticed on mobile it jumps to the center now. How I can ensure it stays on the left?

    • Davinder Singh Kainth on August 20, 2017 at 1:51 pm

      You can try float:left property. If you can share URL, more targeted code can be provided.

  4. Luis on May 10, 2018 at 9:24 am

    It’s 2018 and there is still no mobile alignment for some of the text modules. I wonder what the reason behind it is. Perhaps some sort of coding issue.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.