How To Place Two Divi Buttons Modules Side By Side In The Same Column Tutorial by Pee Aye Creative

How To Place Two Divi Buttons Side By Side In The Same Column

Nelson Miller Pee Aye Creative
This quick Divi Pro Tip will show you how to place two button modules side by side in the same column with a simple and easy solution.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Add The CSS Code Snippet

We are not actually going to do anything to the Button Module itself, but rather to the column that the Button Modules are inside. That’s because we need to target the button wrapper, and this is the only way to do that.

Find the row and column where you want to place the buttons. In the column settings, go to the Advanced tab to the CSS Class. Add the class “pa-inline-buttons” and save.

Next, copy and paste the following snippet to your website.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

/*place button modules next to each other in the same column*/
.pa-inline-buttons .et_pb_button_module_wrapper {
    display: inline-block;
}

Add Button Modules

Now you can go ahead and add two or more Button Modules there in that column. They will line up next to each other.

Adjust The Spacing In The Button Modules

Now of course you can adjust the spacing, because by default they will smash right up against each other. I’d recommend going in to the button settings and adding a margin left of 10px or so on the right button.

Center The Buttons In The Column

If you want to center the buttons inside the column, you will need to add an additional snippet of code:

.pa-inline-buttons {
    text-align: center !important;
}

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Please share this post!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

112 Comments

  1. steve

    I can’t seem to get it to work. pa-inline-buttons

    Reply
  2. Alan Rogers

    Hi and many thanks for this.

    I’m just trying to get the two buttons to be centred in the column and not sure how to do this?

    I’ve set the Button Alignment to Center but there doesn’t seem to be an option in the Column Settings to Center content?

    I’ve set some vw margin at the moment to move them right and create a space between the two but this is not going to achieve consistent centering across all screen sizes.

    Is there any additional css that can be added?

    Thanks in advance

    Reply
  3. Brandi

    I’m having trouble getting this to work on the mobile page. Is that possible?

    Reply
  4. John

    Thank you for fantastic content.

    Luckily this worked for three buttons, as can be seen in the image, where the “Date”, “Location” and “Gender” are all aligned perfectly. But how would you align buttons towards the bottom in Call To Action-modules?

    I’ve attached a photo that hopefully will explain what I mean. But I have a row of Call To Action-modules (the ones with pictures of individuals and buttons with their names); which will be constantly added to.

    The above row is how it looks like in my website and the lower row is what I created with Paint:
    https://i.imgur.com/z0EqxPY.jpg

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi John,
      The simple answer is to just not use the CTA module. I don’t know if I have ever used it, to be honest. In your case, the image is the background image of the CTA module, so you may as well make it the background image of the columns and then add text and button modules as needed and even adjust the min heights of the text above the buttons if you want them to go to the bottom.

      Reply
      • John

        What module would you recommend I use instead? And any easy to follow step-by-step guide for that, since I’m a novice (and don’t intend to have any text on the images, just buttons – and those buttons, when clicked on, would open up popups for each individual with more info and pictures)

      • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

        I’m not sure what you are asking. I mentioned using text and image modules. Did you try that?

  5. Kelly Morris

    This is amazingly helpful, thank you, thank you!. Now I’ve just got to get my side by and nicely centred buttons (and only the buttons) to always be at the bottom of the column and lined up with each other across the page. I have text of different lengths above them (don’t we always!) I don’t suppose you can help me with that? I’ve been trying all sorts to but nothing has worked. If i try the position: absolute; / bottom: 0; it knocks everything out of whack. and flex puts them one on top of each other again. I’m stumped.

    Any help would be gratefully received 🙂

    Reply
      • Kelly Morris

        Thanks for getting back to me. That of course worked like a dream. Why I dint think of that perfectly simple solution is beyond me. But like you say, sometimes you just overlook the simple solution. Thanks again for your help 🙂

  6. emma

    thanks I was looking for this. I am new to Divi. could you also help me out with inline text module in the same column.

    Reply
      • Nelson

        Thanks so much for that !! That’s exactly what I was looking for! I was trying to push a social media follow button with a normal button. This was the solution I needed.

  7. Anthony

    Thank you for saving me 9 bucks.

    Reply
  8. rico

    Thx for help)

    Reply
  9. Jeremias

    worked perfectly, thanks for the help

    Reply
  10. SUKESH

    .pa-inline-buttons {
      text-align: center !important;
    }

    this worked but I want to center it only phone and tablet mode. How I can get it?

    Reply
  11. Chris

    Hi Nelson, This looks simple, but I cannot seem to get it to work!

    I have placed the code in the correct places (have tried placing the CSS in Page, Divi Options and Child CSS Files) But the buttons will not go side by side, they just stay in their original (Default) positions
    I have also tried on blank page and the DIVI theme builder, but all have the same result…:(

    I have no other custom CSS applied to buttons or Plugins that might be interfering so I am now at a loss as to why?

    Unfortunately it is not a live site at the moment so I cannot provide a link

    Any suggestions appreciated.

    Reply
      • Chris

        Absolutely 🙁 double checked your written and video instructions, it is an odd one. I Have implemented some of your other tips/trick without issue in the past!
        Getting Closer, just not inline

        I’ll see if i can get a link organised..

  12. Fabio

    This worked great with buttons, how can i extend this behaviour to image modules? thanks in advance!

    Reply
  13. Philippe

    Again, Great guide.

    I was wondering if it would be possible to do the same thing but with image modules within a column instead?

    Thanks !

    Reply
  14. Wim Gernaey

    Hi Nelson, thanks for the helpful tutorial. Is there a way to disable this for smartphone? I assume I have to add something to the snippet?

    Regards, Wim

    Reply
  15. Cristina

    Hello! Does this only work in Divi? I tried using your method in another builder but it didn’t work 🙁

    GoHighLevel is what I tried using it in, in case it matters 😀

    Reply
  16. Gal

    Hi, I’m able to get this to work on a row with a single column, but when it’s multiple columns it doesn’t seem to work for me. Any suggestion?

    Reply
  17. Karel

    Great tutorial, fast and clear!

    Reply
  18. GilsonP

    Thanks a lot, been looking for this for a long time now. (Difficulty with the CSS <ul> button thing.) This is a life saver

    Reply
  19. Dick Ockers

    AGAIN!… SUPERB!… saved my day!

    Reply
  20. Hasnain

    Not working for me/

    Reply
  21. Hendrik

    Hey! Great tut. I also had problems with the buttons not being side-by-side at first, but it was the issue of either the buttons being too wide or the column too narrow.

    1/3 – 2/3 layout fixed it!

    Reply
    • Hemant Gaba

      Hi Hendrik,

      We are glad to know that everything is working fine now. 🙂

      Reply
  22. lenarts

    It can be used for shordcode

    Reply
  23. Demitris

    Do these buttons stack on mobile or are they side by side? I want them to stack on mobile so if they don’t that automatically how can I get them to stack?

    Reply
      • Erik B

        The “wrap” to the next line thing works, but with the addition of the margin to space the buttons, one of them is off-center as a result. Ideas on how this could be remedied?

  24. Sean Callanan <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    Hi Nelson,

    This has always worked for two buttons, but on the site I’m currently working on, it calls for three buttons. All of them line up, but the “click” or “hover” are working. The design I was asked to deliver called for a large negative margin on the section that contains the buttons. Could that be the cause? Is it maybe a z-index issue?

    This is the site if you care to have a look. The buttons are right on the home page.

    https://ramlawdev.wpengine.com/

    Reply
    • Hemant Gaba

      Hi Sean,

      I can see those three buttons but I am afraid I am not able to understand completely what you are trying to achieve. Could you please elaborate a bit for my better clarity?

      Reply
  25. Yick

    Can this be modified to put multiple images beside each other within a column? If so, what would you need to replace “.et_pb_button_module_wrapper” with?

    Reply
      • Yick

        Thank you. Do you know if there is any way to force a line break between multiples of this element?

      • Hemant Gaba

        Hey Yick,

        Could you please share the URL and elaborate what you are trying to achieve for me to investigate further?

  26. Ali Lamb

    Hey! Thanks for the awesome guide. I am surprised this feature is missing from Divi but hey ho! Sorry I am new to Divi and its many menu options and boxes etc! Where do I place the css code to centre the buttons? In Divi>Theme Options>Custom CSS??

    Reply
  27. Renars

    Hej folks. But i have text before two buttons and text ic centert by this css display: flex;
    flex-direction: column;
    justify-content: center;

    and buttons does not work then with the code i have got here. Any suggestions how to fix it

    Reply
    • Hemant Gaba

      Hey Renars,

      Could you please direct me to where you are facing this issue on the website right now as I am not able to spot it?

      Reply
  28. Annaliza Sturge

    Hi, can you confirm if this is possible with the icon block and what I should change in the code to do to have two icons next to each other?

    Reply
  29. Mark

    SUPER helpful and easy to implement. Thank you so much for both the video and written content.

    Reply
  30. timsta

    thanx nelson. its interesting that we need such tips 22 years after creaitng the first websites 🙂 as the frameworks change, the pitfalls change too. i remember the browser wars from netscape vs. ie in 2000…where we handcraftes sites with tons of table-layouts….ah crazy world.

    Reply
  31. Steve Wiseman

    Thanks so so much!! Really helpful and simple. Love the videos, they are essential!!

    Reply
  32. Greg

    I used this for blurbs, added width and some media queries for phones. Worked awesome!

    Reply
  33. Marc

    Hi Nelson, always great ressources for Divi here! Worked great, thank you!!

    Reply
  34. ahssan

    Thanks for posting this codes and tutorial. Your posts are always helpful. In this case, when it comes to responsive the buttons don’t display the way I would like them in terms of width.

    You know there is an alternative to this. In divi you can add a “Specialty” Section which then allows you to add the additional two column within one column.

    To that I add the 100% width class ID and code.

    .your_button {
    width: 100%;
    text-align: center;
    }

    Reply
  35. WeepingWind

    I’ve implemented this fine in a sticky bar at the top of the page with two buttons on mobile, I’ve also activated disable hover state in divi responsive helper plugin and tried to add the class to the button module to remove hover state. Everything works fine on Android but on iOS safari if you sit there and click a button wait for the page to load then click the other button and wait for the page to load and repeat this a few times the button will get stuck and you will have to keep on touching the button to try unstick it and get the page to load through that stuck button.

    Is there any solution for this? I’ve noticed it happening on other websites also which are not using divi but have two CTA buttons in a top sticky bar. Any help would be appreciated.

    Thanks

    Reply
  36. Ilana Gordon

    Hi Nelson

    This class didn’t completely work for me this time, although it has worked previously. The text-align: center did not centre the buttons. I used some flex code instead and stacked my buttons. Not exactly what I needed but it’s ok. If you do find a fix for this, please post here.

    Cheers from Cape Town, South Africa,

    Ilana

    Reply
  37. Saar

    Hi!

    Thanks for this blog it was super helpful! One thing I am struggling with is that I don’t want to have a page for my custom post type.

    So just a listing page with all the posts. The post should not have a link to his own page.

    I hope anyone has a solution!

    Saar

    Reply
    • Hemant Gaba

      Hello Saar!

      I’m not sure of the exact problem you are facing, that’s a little outside the scope of the tutorial.

      I advise getting in touch with the Divi support team regarding the CPT issue. They’ll assist you in resolving the problem.

      Reply
  38. Eric

    I tried this solution but for some reason, it’s not working for me. The inline works fine, but the two buttons are not centering for me for some reason, even with the text-align: center !important code.

    Reply
  39. Gus

    Awesome ! Thw a lot. I like to stumble upon your website, great help all the time.

    Reply
  40. Akramul Hasan

    Great tips but I think there has a more efficient and easy way. No need to put any class name and custom CSS rules. Just put ‘display:flex’ inside the Main Element of Custom CSS under the Advanced tab of Column settings. Boom !!!!

    Reply
  41. Bash

    I keep getting this error when trying to center the buttons:

    .pa-inline-buttons {
    [EXPECTED RBRACE.]
    text-align: center !important;
    }
    [UNEXPECTED TOKEN ,},.

    Reply
  42. Matt

    Great tutorial,
    Got it to work for the most part but when screen size is smaller than 325px the buttons overlap. I know I have to put a media query in but I have been playing around for some time and can’t/don’t really know what to put to get it to work.

    Any suggestions?

    Reply
  43. Matt

    This is great and I got it to work on a website. However, if the screen size is below 320px (which the owners phone seems to be) the buttons stack on each other without any room.

    I know I have to use a media query but I’ve played around for hours trying to get it to work. Any suggestions?

    Reply
  44. Daniel DeHart

    Hey Nelson,

    I followed your tutorial and it works glowingly!

    I was wondering if you knew how to stack 2 buttons that are inline with each other on top of 2 other inline buttons? The URL is kingdomecosystems.com/home-old and you can see the 4 buttons on the hero.

    I was wanting the buttons to be on 2 lines. Is that possible?

    Reply
    • Hemant Gaba

      Hi Daniel!

      The page is not available now. Can you please share the URL of the page to investigate further?

      Reply
  45. kristin

    Hey!

    Is there a way to exclude one of the buttons from lining up?
    I have a module with 5 buttons that I want side by side, and one main button that should be on it’s own line.

    Reply
    • Hemant Gaba

      Hi Kristin!

      You can avoid adding the class pa-inline-buttons in the main button. However to understand the layout better, can you please share the URL of the page?

      Reply
  46. Christine

    Hi! Thanks for this! It looks great on desktop but I need it to center on mobile. Is there a way to have the aligned buttons center on mobile? OR for the alignment to only be on desktop and let them stack on mobile?

    Reply
    • Hemant Gaba

      Hi Christine!

      I need to check the structure of the page in order to provide the code. Can you share the URL of the page to investigate further?

      Reply
  47. Steven Butler

    I’ve got my buttons side by side and centered but now how can I make them resize to fit the window 100% horizontally?

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart