Skip to content
thednp edited this page Nov 18, 2024 · 21 revisions

Does this library work as a drop-in replacement for the original jQuery plugins?

If your markup is valid and provides the expected element attributes, the answer is YES, however if your application makes use of public methods, or expects the event handlers to behave exactly the same as the original, the answer is NO as explained later on this page. You will need to make proper updates to your application scripting in order to connect or access the library's generated objects.

What's different with the jQuery plugins?

Some component public methods may have different names, but stay cool, for each component these details are fully explained. The Popover and Tooltip components are initialized automatically when target elements use proper DATA API attributes, while the original plugins require a manual initialization.

An important difference however is that the jQuery version will bind events globally and delegate the handlers to elements allowing the plugins to work with later added elements, more details here.

Does it work with legacy browsers?

The answer is No, Bootstrap Native V5 is not compatible with IE10+ and early Edge versions, so please make sure to check the browser support wiki page for detailed information.

Does it use DATA API?

The answer is YES, but it's different from the original version. The original version relies on jQuery's data() method to store functionality at the node level, while we only use the data-bs-toggle="dropdown" or data-bs-target="#myTarget" as a means of elements query or setting component options.

Does it support nesting?

The short answer is NO. The library does not support this kind of functionality especially for complex components like Carousel. The Dropdown supported nesting with our previous versions, but has been removed in favor for RTL support and automatic repositioning, but other components like Tab or Collapse might work, just keep in mind it wasn't tested or developed with nesting in mind. For components like Tooltip and Popover it wouldn't make sense.

Can I re-initialize on targets already initialized?

The answer is YES. Some components like Carousel or Modal even have a special handling to allow you to call .dispose() or new BSN.Modal('#target').show(), just to call the instance method.

Can I use e.preventDefault() on custom events?

The answer is YES. When you use e.preventDefault() for an event like hide.bs.modal, the event target will not fade out, but will remain visible and ready for further interactions. However using e.preventDefault() on events like hidden.bs.modal or slid.bs.carousel will produce no effect, since the respective components completed the execution, making it hard to argue the fact that preventing certain tasks could break the application completely.

Can I show multiple modal elements simultaneously?

The answer is NO, however you can trigger show() for other modal elements from inside modals, closing any visible modal automatically, just as shown in the demos.

Does the Carousel support swipe?

The answer is YES, starting with version 2.0.26.

Does the library support passive events?

The answer is YES, starting with version 2.0.26. However starting with v5.1.x, all resize/scroll event listeners have been replaced with ResizeObserver or Intersection observer to eliminate any potential performance issue.

Does it work with CustomElements?

The answer is YES, but not out of the box, so please check this comment to learn more about a user's experiment.

Does it work with later added elements?

The answer is NO in most cases. As discussed in this topic, and several other instances (#62, #60), the event listeners used by the components are not bound to the document and delegated to specific elements like jQuery plugins do, rather we took a more performance oriented approach and decided to bind event handlers to elements themselves.

When you add a new element to your page, you need to make sure you initialize it the right away:

// grab your newly added element
var myElement = document.getElementById('myElement');

// initialize with the corresponding component
var myCarousel = new BSN.Carousel(myElement, options);

More on jQuery plugins implementation here.