When using Bootstrap and Prototype.js, certain Bootstrap features break as a result of jQuery triggering events with the same names as Prototype events.
The Issue
Features of Bootstrap that break:
- Collapsible components bounce disruptively due to Effects.
- Drop down menus parent disappears upon closing child.
- Tooltip trigger/parent disappear on blur.
- Popover trigger/parent disappears on blur or toggle.
- Tabs disappear on trigger and toggle.
With most of these issues, the cause is that Prototype.js applies display:none; to the parent element, making it disappear.
The Solution
There are several possible solutions but the quickest, most efficient way is to simply add this code to the head of your document:
I’m not going to go into it too much but basically you are temporarily disabling the show
and hide
triggers for Prototype.js and then you reinitialize the components of Bootstrap using Javascript.
Resolve the conflict between Bootstrap 3 and PrototypeJS
Recent Comments