bootstrap.native

What is bootstrap.native?

bootstrap.native is a JavaScript library that provides native JavaScript components for Bootstrap, eliminating the need for jQuery. It aims to offer the same functionality as Bootstrap's JavaScript components but in a more lightweight and efficient manner.

What are bootstrap.native's main functionalities?

Modal

This code demonstrates how to create and control a Bootstrap modal using bootstrap.native. It initializes a modal and sets up an event listener to show the modal when a button is clicked.

document.addEventListener('DOMContentLoaded', function() {
  var myModal = new Modal(document.getElementById('myModal'));
  document.getElementById('openModal').addEventListener('click', function() {
    myModal.show();
  });
});

Tooltip

This code demonstrates how to create a tooltip using bootstrap.native. It initializes a tooltip with a specified title and placement on a target element.

document.addEventListener('DOMContentLoaded', function() {
  var tooltipTrigger = document.getElementById('tooltipTrigger');
  var myTooltip = new Tooltip(tooltipTrigger, {
    title: 'This is a tooltip',
    placement: 'top'
  });
});

Dropdown

This code demonstrates how to create a dropdown menu using bootstrap.native. It initializes a dropdown on a specified element.

document.addEventListener('DOMContentLoaded', function() {
  var dropdownElement = document.getElementById('myDropdown');
  var myDropdown = new Dropdown(dropdownElement);
});

Other packages similar to bootstrap.native

bootstrap

Bootstrap is the original library that bootstrap.native aims to complement. It provides a comprehensive set of CSS and JavaScript tools for building responsive web applications. Unlike bootstrap.native, Bootstrap's JavaScript components rely on jQuery.

popper.js

Popper.js is a library used to manage poppers in web applications. It is often used in conjunction with Bootstrap for positioning tooltips and popovers. While bootstrap.native provides a more integrated solution for Bootstrap components, Popper.js focuses specifically on positioning elements.

tether

Tether is a JavaScript library for efficiently making an absolutely positioned element stay next to another element on the page. It is similar to Popper.js and can be used with Bootstrap for positioning tooltips and dropdowns. bootstrap.native, on the other hand, provides a more comprehensive set of Bootstrap components without the need for jQuery.

README

Native JavaScript for Bootstrap

The faster, lighter and more secure set of JavaScript components for Bootstrap 4, developed on modern ES6/ES7 standards. The bootstrap.native library comes packed with build tools and well documented.

The library is around 25Kb minified and 7.5Kb gZipped. See the demo for components guidelines and examples, or the Wiki/How to use on how to use the library or create custom builds.

If you use webpack, here is the accompanying webpack loader.

Wiki

Please check the bootstrap.native Wiki pages, they're updated with almost every new commit:

• Acknowledgements - A quick note on some of the similarities and differences with the original jQuery plugins. Nothing to worry about, but still good to know all the tricks on how to maximize your workflow.
• How to use - An in depth guide on how to use the library.
  • CDN Links
  • Locally Hosted
  • ES5 Example
  • ES6 Example
  • NPM Installation
  • Custom Builds
  • Dynamic Content
  • RequireJS/CommonJS
  • Factory Methods
• Browser support - A word on how to enable the library for legacy browsers.
• FAQs - A short list of frequent asked questions regarding the use of the library.
• About - Learn about the bootstrap.native project inception, goals and motivations.

Contributors

• Full contributors list here. Thanks so much!

License

The library is released under the MIT license.