Skip Navigation

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

This support ticket is created 4 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

Author
Posts
#1262821
bootstrap3.0-on-2.png
bootstrap3.0-on.png

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?

#1263045

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.

#1264949
This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.