thednp edited this page Mar 30, 2018 · 15 revisions

V4 version information

The Native JavaScript for Bootstrap version 4 is identical with the version 3 in terms of usage, options, methods and original events, except that version 4 does not include the Affix component, and some Button related functionality.

Please note that this library does not require the Popper script for Dropdown, Popover and Tooltip components like the original script does and the additional features from Popper have been partially implemented into our library. The functionality was added to both V3 and V4.

The demo page for BSN V3 provides documentation for a general guidance on how to use the library and applies to both versions, except the missing functionality mentioned above.

All components are initialized right away

That's right, if you include the library in your site <body> all components including Tooltip and Popover are initialized on load as long as you use properly their DATA API attributes, but Button is an exception with its state/text switching function that needs to be invoked manually, like the example shown in the demo page.

Use the right files

The library uses a set of utilities required by the components, like a selector utility, CSS class checking and manipulation or event handling. This is why you cannot use the files in the /lib folder right away.

Link the library the right way

Starting with 2.0.20 version, the library allows you to link it in your site <head> without any additional scripting required. It now exposes an object with various information and utilities you can use, so you might want to check this out.

Starting with 2.0.18 version, the library allows you to link it in your site <head>, but will not automatically initialize components with DATA API, you will have to initialize manually.

For performance reasons, the library should be linked at the end of your site's <body>, this is to avoid low page load speed and other problems, along with other benefits.

Some features have been dropped

I personally never found any use of them and/or Bootstrap developers decided to remove them. For instance Tooltip and Popover don't expose a destroy() public method or a show option for Modal due to the flexibility nature of native JavaScript, but that's fully explained for each component.

Some features are even better

How about having a paused class for Carousel when in paused state, or an option to keep a Dropdown open as if you would have a form inside, or Tooltip and Popover automatic (re)positioning without any required option and more? Our Tab component can do a nice transition when tab contents have different heights, and many more you can learn about these improvements for each component.

Additionally, all elements that the components target for initialization will store the initialization object, giving you full access even for instances when the DATA API was used. EG: myModalTrigger.Modal.

Starting with version 2.0.20 if you type in BSN and hit Enter in your console, you get the following object:

BSN = {
  version: '2.0.20',
  initCallback: function(lookup){},
  supports: [ /* an array with supported components */ ]

You can now use the initCallback in combination with various events, like so:

document.addEventListener('eventName', function(){
}, false);

You might want to use events like turbolinks:load (discussed here) or events triggered by AJAX loading content.


This is probably the most important part to be aware of. While the original events like are inline with the original components exactly, some method names might not be the same with the original library.

Additional styling

The dismiss Popover close button would require some adjustments for perfect looks. Copy this code in your application CSS files.

/* styles the close button for the dismissible popovers */
.popover .close { position: absolute; top: 7px; right: 10px; }

Previous versions of our library required some adjustments for some components, but since the original Bootstrap changed to support CSS3 transitions, we also make use of them for Collapse and Tab.

Don't use Modernizr or respond.js

They both make legacy browsers unusable. To target specific browsers, there are plenty of options. With this library you only need to make sure your layout looks consistent in legacy browsers, so you might consider browser specific classes to your HTML document, as show here. You don't have to worry about the JavaScript part.

About that respond.js thing, here is a 2k file of CSS to make your site's layout look normal on IE8. CSS is still faster and better in ALL cases, while the JavaScript will heavily load the browser's resize event, making it unresponsive and unusable. Open up the demo page on IE8 and let it fly.

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.