Twitter Bootstrap 3 Javascript components are based on the jQuery Javascript framework. Opposite to the older Twitter Bootstrap 2, some of these components are incompatible with the Prototype Javascript framework.

Affected components

Collapsible components useful for building accordion and navigation.

Normally animated, the component collapses abruptly, giving a very bad feeling when simultaneously another component expands.

Dropdown menus

When the menu is closed, it entirely disappears !

Modal dialogs

Almost invisible to the casual user, the closing of modal dialogs are abrupt and does not show the normal animation.

Tootips and Popovers

When the mouse left an element enhanced with a Bootstrap tooltip, the element entirely disappears !

Toggable tabs 

(only from with Bootstrap version 3.3) When you leave a tab, the tab disappears.

You may experiment the incompatibility issues encounter with these components from here

Root cause

While the gravity and kind of affection vary, the root cause is almost the same. It relates to the poor combination of jQuery event processing and Prototype DOM element extensions.

When loaded on modern browsers, Prototype immediately extends the prototype of all DOM elements, adding some very useful methods to them. Among those methods, the hide() and show() methods are of particular interest, since these allow toggling the addition of style="display: none" to the related element.

When an event is triggered using the .trigger() methods of the jQuery API, if the triggered event name matches the name of a method on the DOM element concerned, jQuery will attempt to call that method, unless a previous handler has called event.preventDefault().

For all the affected component above, Bootstrap triggers events named "hide" and "show". It will therefore indirectly trigger the execution of the hide() and show() method added by Prototype to any DOM element. The side of effect of those method will be terrible for those Bootstrap components. Even worse, Bootstrap will not execute its own handler if we add a call to event.preventDefault() to prevent calls to the method defined by Prototype.

Workaround

Issue regarding these incompatibilities has been reported on the issue tracker of Twitter Bootstrap, but these have been closed "Won't fix". You are therefore on your own to fix those issues. One way to do so would be to modify Bootstrap sources, but this will be a maintenance nightmare at each new update. Here is a workaround that do not change any of the implicated libraries, based on an initial idea from Marius Florea.  This workaround consist in removing the definition of the hide and show method from Prototype for the duration of the event execution.

• Workaround without using AMD module
• Workaround using Require.js to integrate jQuery and Bootstrap

This second workaround also expose a good method to integrate Bootstrap and jQuery over Prototype without conflict using require.js.