[Gelöst] Bootstrap 4 is conflicting with my BuddyBoss theme

[Author]

Artikel

[NickC8880]

I just noticed that when Bootstrap 4 is loaded by Toolset, various image thumbnails in my BuddyBoss Theme/Platform Photo galleries either do not show up at all or are extremely small. When I switch to Bootstrap 3, it works fine.

I have little conception of what Bootstrap does, but I would prefer to be using the most up-to-date tools as I can (by the way, are there plans to make Toolset compatible with Bootstrap 5?).

So, I'm hoping that you can please explain to me what features I'm receiving from Bootstrap 4 in comparison to 3 to decide if it is acceptable to downgrade. Or, is there perhaps a way to simply exclude Bootstrap from acting upon certain pages or CSS classes, divs, etc...? Or is there another solution?

A related question - a lot of Toolset legacy documentation talks about using Bootstrap custom codes, but I don't see that in more recent documentation. Does this mean that Bootstrap is simply being accessed/leveraged through the Blocks GUI, making it as no-code as possible?

Link to a page where the issue can be seen:
versteckter Link

I have attached various images that show the difference between the photo galleries with Bootstrap 3 and 4.

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

During troubleshooting, I noticed that the BuddyBoss uses a very generic class name "media" around its media gallery container, which is also used by the Bootstrap 4 styles. This overlapping of the class name, results in the style conflict that you're seeing.

You can include the following custom CSS code in your site to overcome this conflict:

#media-stream.media {
display: block !important;  
} 

Bootstrap is a collection or library of pre-built CSS styles and JS scripts. It is included in the websites to standardize typography, buttons, forms, and various other user interface components.

If you're interested in reading about the specific differences between the Bootstrap 3 and 4, this chart will help:
versteckter Link

Principally, you should enable the latest Bootstrap library whenever it is available, as it will offer a more up-to-date user experience, unless some website/application has been specifically designed for an older version.

As for Bootstrap 5, it is still fairly new and we don't have any immediate plans to upgrade the compatibility of the Toolset plugins for that.

Your observation about the legacy editor and Bootstrap is correct. In Toolset's legacy editor, the output relied heavily on the Bootstrap styles, especially for elements like the grid/column system, input fields, and buttons, etc. But the Block UI introduces its own independent CSS styles for these components, which doesn't require the inclusion of the Bootstrap library, at all.

Your theme doesn't seem to rely on Bootstrap styles, either. Loading Bootstrap with Toolset plugins is only optional, and if you're not specifically using Bootstrap styles and scripts on the website, it is also safe to stop Toolset from loading it by selecting the option "This site is not using Bootstrap CSS".
( at WP Admin -> Toolset -> Settings -> General )

regards,
Waqar

[NickC8880]

Thanks so much for such a thorough reply! The code worked perfectly.

Before I close this ticket, I'd appreciate if you could help further clarify how Bootstrap is used.

I'm a fairly novice user so would prefer to use the GUI within the Block Editor almost completely for styling my site. So, if I turn off Bootstrap so as to minimize resource usage, would I notice any differences at all to the default Toolset Block functionality/styling?

If not, how would I leverage Bootstrap's functionality if I choose to do so in the future -through the Custom CSS and JS sections in the block editor? Would this be the best documentation to follow for doing so - https://toolset.com/2019/07/using-bootstrap-4-components-with-toolset/? (p.s. the component examples on that page aren't showing)

Or, finally, since my theme doesn't rely on Bootstrap, does this mean that turning it on will have no effect at all?

Thanks again.

[Waqar]

Thanks for writing back and glad that my message helped.

> I'm a fairly novice user so would prefer to use the GUI within the Block Editor almost completely for styling my site. So, if I turn off Bootstrap so as to minimize resource usage, would I notice any differences at all to the default Toolset Block functionality/styling?

- Yes, that is correct and if you're using the Blocks editor and disable the Bootstrap loading, you won't miss out or notice any difference in functionality/styling.

> If not, how would I leverage Bootstrap's functionality if I choose to do so in the future -through the Custom CSS and JS sections in the block editor? Would this be the best documentation to follow for doing so - https://toolset.com/2019/07/using-bootstrap-4-components-with-toolset/? (p.s. the component examples on that page aren't showing)

- Yes, that post will give you an idea of how to use the Bootstrap-based HTML code in your website's editors.

For a more thorough introduction and usage examples of the available Bootstrap components, its official documentation will prove more useful:
versteckter Link

Thank you for bringing forward those broken links. The code examples have been updated on that post, now.

You can find more details and example code for these Bootstrap card and jumbotron elements at:

versteckter Link
versteckter Link

> Or, finally, since my theme doesn't rely on Bootstrap, does this mean that turning it on will have no effect at all?

- If a theme is not Bootstrap friendly, chances are that some of the styles and scripts can result in a conflict or compatibility with Bootstrap. For example, the gallery display issue that this ticket was originally about. But, those can be fixed on a case-to-case basis, using the custom code snippets.

In summary, you should only decide to load the Bootstrap library, if the elements that you need are not available within your theme and the page builder/editor ( in this case the Toolset Blocks ).

[NickC8880]

Thanks very much for the clarifications! Very helpful.