When using Toolset with the Divi theme, there are some styling issues you can encounter. This page provides main guidelines for resolving these issues and styling a site that uses Toolset and Divi together.

 There are two main styling issues you can encounter:

  • Divi is not compatible with the Bootstrap CSS framework, which Toolset uses by default.
  • Default markup inserted by Divi makes custom posts and custom archives appear narrower than their blog counterparts.

Managing Divi Theme Bootstrap Incompatibility

Divi uses many of the same class names as Bootstrap but sets its own style rules for them. Because of this, adding Bootstrap to a Divi site will affect the layout and cause unexpected changes to elements such as menus.

The following steps resolve Divi theme incompatibility with Bootstrap.

Disable Bootstrap

First, you should disable Bootstrap on sites that use Divi and Toolset. Go to the Toolset -> Settings page and select the This site is not using Bootstrap CSS option.

If you really want to use Bootstrap on your site you should contact Divi developers for support.

Do Not Use Toolset Layouts

The Toolset Layouts plugin is the only Toolset component that requires Bootstrap. On the other hand, the intended use of Divi with Toolset is to design Views Content Templates. It makes no sense to use two page builders on the same site.

This is why you should not use Layouts and you should use the Divi page builder to create templates.

Toolset Forms limitations

Some of the Toolset Forms features rely on Bootstrap. When you disable Bootstrap the Forms editor will not allow you to create Bootstrap structures with its drag and drop feature. You will still be able to build the forms but not with the Bootstrap layout. The appearance of the forms on the frontend is also affected when Bootstrap is disabled.

You can design your forms with the drag and drop feature in a way that you add each field in a new row. You can then add custom HTML and CSS to style your forms.

If you use Expert mode you can add even more custom HTML and CSS to create a layout similar to Bootstrap layout. When adding custom CSS code you need to look after the potential conflict with Divi’s styling.

Add Styling for Main Form Elements and Filter Controls

Toolset form elements and Views filter controls can be styled however you choose, but normally, they inherit some basic styles from Bootstrap.

You can add the following styles based on Bootstrap so that such forms look good out-of-the-box. You can, of course, overwrite them with your own enhancements, if required.

Styles For Main Form Elements and Filter Controls (Click to Expand)
/* Checkboxes and radio buttons */
input[type="checkbox"], input[type="radio"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}

input[type="radio"] {
	margin: 4px 0 0;
    line-height: normal;
}

input[type="checkbox"] {
	margin: 6px 0 0;
    line-height: normal;
}

/* Labels */
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}

.wpt-form-radio-label {
	margin-left: 8px;
}


/* Form layout */
.form-group {
	margin-bottom: 15px;
}

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555555;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

ul.wpt-form-set {
	list-style-type: none !important;
}

Insert the above CSS styles into individual Toolset forms or Views as required. Alternatively, you can apply them to the whole site. Go to the Divi -> Theme Options page and add this styling to the Custom CSS field under the General tab.

Styling Buttons

If you want your buttons to look like standard Divi buttons, add the et_pb_button class to them.

Styling Custom Posts and Post Archives

Each row, column or module you insert into your Divi Builder design can have its own margins and padding. These affect the width available to your content. As a result, by default, custom posts displayed using templates designed with Divi will appear narrower than their standard blog counterparts.

Here is how to avoid that.

The principle is the same for both single posts and archives where Divi is used to design the Content Template.

You will need to edit Settings for both, the Section and the Row, as shown in the following image.

Divi's Section and Row Settings
Divi’s Section and Row Settings

Open the Section Settings and go to the Design tab, then set the custom padding to 0px on all four sides.

Repeat the same for the Row Settings. Additionally, within the Row Settings set a custom width of “100%”. Do not select “Full-width row” because, despite the name, it sets the row width to “89%”.

Single custom posts will now match the look of single blog posts.

To make your custom post archives match the look of the standard blog archive, you can recreate the same markup that Divi outputs.

So, when you design a custom WordPress Archive with Divi you can use the following markup in a text module to recreate the output of the standard blog archive for your custom posts.

Markup for Custom WordPress Archives (Click to Expand)
<article class="et_pb_post">
<a class="entry-featured-image-url" href="#">[wpv-post-featured-image size="et-pb-post-main-image-fullwidth"]</a>
<h2 class="entry-title">[wpv-post-link]</h2>
  <p class="post-meta">by <span class="author vcard">[wpv-post-author]</span> | <span class="published">[wpv-post-date]</span></p>
[wpv-post-excerpt]
</article>