Losing all the styling on using Bootstrap or SemanticUI

[KulkiratSingh]

I am looking to use bootstrap/semantic-ui components in my Docusaurus generated website. But when I use either bootstrap or any other CSS-framework/CDN then all the styling is changed. I tried using it using stylesheet method as well in docusaurus.config.js file as given in the document like this:

module.exports = {
....
stylesheets: [ { href: "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css", type: "text/css", }, ],
}

but it had the some issues. Is there a way we can use bootstrap or any other CDN by not getting the built-in styling changed on using bootstrap/semantic-UI ?

[slorber]

Duplicate of #4662

The classic theme/preset is using Infima, a utility CSS framework similar to bootstrap.

If you try to use bootstrap with the classic theme/preset, Infima class names might conflict with bootstrap classnames, leading to weird visual bugs.

If you really want to use bootstrap, then you should compile it so that the bootstrap has a prefix (like .myBootstrapPrefix-container instead of .container, so that it does not conflict with the .container class that Infima already provides).The bootstrap fwk allows you to add such prefix by compiling the lib with Sass with some customization options, so that you have a customized css file for Bootstrap.

Otherwise, you will have to avoid using the classic theme/preset, and create your own docusaurus theme instead (which I don't recommend right now, we'll make this simpler). We have a bootstrap theme available but it's not production ready at all, but in the future we plan to improve it and make it usable. You'll have to wait, for now the 1st option of using a bootstrap prefix is the simplest.