[Resolved] Bootstrap Causing Conflicts with OceanWP top bar & footer and Elementor widgets

[Author]

Posts

[brettD-3]

I am trying to: Use Toolset Views to create custom search page

Link to a page where the issue can be seen: Currently disabled bootstrap in toolset settings so we can work on the site. see screen shots attached.

I expected to see:
When toolset settings are enabled with suggested setting: Toolset should load Bootstrap 3.0 - The issue is that elementor/oceanwp loses both top bar and footer menus, View formats to three columns as expected.

Instead, I got:
When I save the Toolset Setting to: The theme or another plugin is already loading Bootstrap 3.0 OR the bottom choice to use CSS - I lose the 3 columns and data is displaying as a one column list.

The advice on the OceanWP page of Toolset website provides this:
Solving Bootstrap CSS conflicts
When using the OceanWP Theme some Bootstrap CSS styling that is loaded by Toolset can be overwritten. If you encounter the situation where theme.css CSS definitions override bootstrap.css you can use a simple workaround to fix this issue. All that you need to do is to add styles that get overwritten to the Toolset Forms with an !important rule.

I dont really understand what the above is suggesting.

Can you help me to solve using bootstrap 3 with Elementor and Oceanwp?

[Beda]

OceanWP can only be used with Toolset if the following settings are made:
https://toolset.com/documentation/recommended-themes/using-toolset-with-oceanwp-theme/#important-toolset-settings
- Toolset should load Bootstrap 3.0 option.
- The Layouts should use Row as wide as post content.
- You should solve these conflicts manually:
https://toolset.com/documentation/recommended-themes/using-toolset-with-oceanwp-theme/#solving-bootstrap-css-conflicts

There are some Forum threads related to this as well, such as https://toolset.com/forums/topic/toolset-breaks-oceanwp-layout-with-overriding-css/.

Concluding, OceanWP and Bootstrap are not the best choices, but to use Toolset at its full extent you'll need Bootstrap.
Hence either you would load it and fix the conflicts manually or choose a Theme that doesn't conflict with it.

Views Loop Wizard is based on Bootstrap so if you don't use Bootstrap you'd have to use native HTML to create the columns.

The suggestion of the DOC is bad, I asked to review it, it wants to say:
When using the OceanWP Theme some Bootstrap CSS styling that is loaded by Toolset can be overwritten. If you encounter the situation where theme.css CSS definitions override bootstrap.css you can use a simple workaround to fix this issue. All that you need to do is to add styles that get overwritten to the Toolset related CSS Editor (Content Template, View, Layout, Form) with an !important rule.
==> Basically you need to over-overwrite the theme's css that is causing the trouble here by overwriting Bootstrap.

[Beda]

We updated the Documentation as well now:
https://toolset.com/documentation/recommended-themes/using-toolset-with-oceanwp-theme/#solving-bootstrap-css-conflicts