place buttons next to each other with Divi

I love Divi !
One of the common things that customers ask is to place the Divi Button modules next to each other.

Before:

After:

You could place them in separate columns in one row but that does not always give you the expected visual.

So here are short instructions to place Divi Button Side By Side

The key is to place them into an “inline” instead of the default “block” mode.

STEP 1 : Assign a custom CSS class to the column to which the buttons belong, e.g. sb-inline-buttons
Go to the Advanced tab and then to CSS Class.

STEP 2:

Place the code snippet below to or the page or a Code module in Divi.

/* to make the buttons inline */
.sb-inline-buttons .et_pb_button_module_wrapper {
    display: inline-block;
}
/* to center the text */
.sb-inline-buttons {
    text-align: center !important;
}

OPTION 1

Attention: this code will only apply to the page where the code is placed on. So this is perfect if you only need it on one page.

OPTION 2

Place it here: “Divi>Theme Options>Custom CSS box”

Attention: this code will apply to the whole website. So this is perfect if you only need it on multiple pages.

STEP 3: Adjust the margins of the buttons to make sure the buttons have some space around. So e.g. set the “right margin” to e.g. 10 px of the buttons that can use it.

Intersting youtube video around aligning in Divi:
https://www.youtube.com/watch?v=fmdt–2NzNU