Bootstrap css conflicts with page

Could you give us a link to your page so we can see the nature of the conflict, and also share the snippet you use in your page to embed BibBase? Which version of bootstrap are you using? In theory, BibBase detects if bootstrap is already loaded and if so, doesn't load it again. But that check can go wrong when things are loaded in the wrong order.

https://armslab.github.io/lmpc-matlab/

Hi,

I've been having a similar issue with mkdocs which uses bootstrap by default. 

mkdocs is a static document generator that is based on markdown: http://www.mkdocs.org/ 

I've been trying to setup a new github pages setup and I get the same conflict.

You can see it here: https://mikepsn.github.io/docs/pubs/

Both the bibbase menus don't work and the bootstrap header is rendered incorrectly.

mkdocs allows theming. Switch to a 'material` theme and the problem goes away. I'm guessing it is some bootstrap related CSS issue.

Mike

Hi Michael,

BibBase tries to detect whether bootstrap is already loaded and if so, it doesn't load it again and everything should work. In your case however, the detection mechanism didn't work because of the way the bootstrap you are including is named. You seem to be loading bootstrap locally from https://mikepsn.github.io/docs/js/bootstrap-3.3.7.min.js, which is not very common. Most people use the bootstrap CDN (which is faster), and that one names the file bootstrap.min.js, e.g.: 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Hi all, 

I have to say I'm a bit out of my depth here as I'm not a massive expert of css/bootstrap... But I think I'm experiencing the same kind of weird behaviour. My list of publications generated by bibbase is embedded in my website (http://www.statistica.it/gianluca/misc/publicationslist/). The website is generated by R blogdown and uses Hugo. There is a css file, which I can manipulate, but I'm not sure where bootstrap gets loaded... I do get the same issue with bibbase menus and log rendered incorrectly. 

Like I said, it may be very trivial --- but help much appreciated!

Thanks

Gianluca

Hi all, sorry to keep nagging you with this problem. But I have banged my head against it and didn't managed to find a solution. I'm guessing it's about the css of my website --- would it help people to help me figure out, if I shared that?

I believe I have the same issue as the OP. My site does not use bootstrap. However, the Bibbase script is applying a stylesheet located at https://bibbase.org/css/bootstrap.min.css that is styling @media (min-width: 1200px) .container with a fixed width of 1170px. Unfortunately, .container is a very common class name so this creates problems, in my case a narrowing of the width of the entire page, not just the publications list. I was able to work around the issue by adding the inline style="width: inherit" to my <div class="container"> tag in order to take precedence. I hope this helps others facing similar problems. The issue did not appear to be able to be overcome either by selecting a different theme (such as "simple") or by specifying a custom css style file.

Thank you very much. I see it has been 4 years since you posted this, but this helped me figure out the problem I was having was related to their [class*=span] declaration that was conflicting with my divs with classes that have "spanish" in (which are added by the translation plugin). Thank you again for taking the time to post this. I had been researching for hours trying to prevent the Bootstarp CSS file from loading at all when I found your comment.