divi buttons side by side end result

Divi Buttons side-by-side and next to each other using CSS

We’ve recently used the WordPress theme/page builder DIVI on a few websites and by-and-large it’s pretty user-friendly and you can build great looking websites much faster than coding from scratch. However, it does have some limitations and some things that you’d expect to be included as standard right out of the boxes aren’t there.

Side by side buttons (the easy way)

For example, trying to put buttons side by side is a case in point. Nowadays, “call to action” buttons are seen as a must-have for most websites and you quite often want them to appear side by side rather than below each other. While there are ways of doing this within the DIVI page builder by creating a new section then a row split into two (or more) parallel parts, it’s not always ideal and may not get things to look how you want them to. With both buttons will be side by side, they’ll most likely be spaced too far apart as in the two screenshots below

buttons side far apart backendButtons split into two halves seen from the backend page builder view of Divi

buttons side side but too far apartDivi buttons side by side viewed from the front-end

 Divi buttons rendered side by side using CSS

So, if the above really isn’t what you’re looking for because you want your buttons to be closer together in your Divi theme, how do you achieve that instead? If we’re to assume that you want them similar to the image at the very top of this article, you’ll need to delve into a bit of simple CSS. So, here’s how you do it. Firstly, create a “section” and then a “row” as you normally would do within the DIVI builder. Then, we’ll add a couple of buttons so they appear like the image below (backend view).

two divi buttons stacked

Here’s what that looks like on the front end of Divi: two divi buttons stacked front end Not really what we’re looking for, so here’s where the CSS comes into play… The first thing to do is to go into the “Row” settings and click on the advanced tab (see image below) and put this bit of CSS in the “CSS Class” field so it’s the same as in the picture:

css advanced row

Save it and then go to the WordPress dashboard. Select Divi’s theme options (image below).

Divi theme options

Scroll down to the bottom of the “General” tab which is the default page when it loads and you’ll see the area where you can insert your custom side-by-side button CSS code. This is what goes in the box:

/* Buttons side by side for header */
 .btn-inline .et_pb_button_module_wrapper {
 display: inline-block;
 padding-bottom: 20px;
 margin: 0 10px;

Here’s what it looks like:

side by side button css divi theme

Save it and go and check the front end and it should now look like the picture below:

end result divi buttons side by side

And there you have it; a simple way to get your buttons next to each other on your DIVI website and you can see what it looks like on this site that’s built using the Divi theme.

Centre (or center) the buttons

If the default left justification isn’t what you want and you want them centred (or centered), simply add an additional class of centered-buttons next to your btn-inline code in your Row’s CSS class, then add this to Divi’s custom CSS as before:

/* Center the container for my side by side buttons */
.centered-buttons {
  text-align: center; /* Center horizontally */

For other DIVI tips and tricks see also: How to put a caption with an image in a DIVI module. How to make Hyperlink Color and Hover Color Change in DIVI.

About Us

We’re an SEO consulting and digital marketing agency based in the UK, and we love working with DIVI!