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

Source: Resolve the conflict between Bootstrap 3 and PrototypeJS (DevelopersCorner.BootstrapPrototypeConflict) – XWiki

Shares