How to use

Before you go

Highly recommended read, the TL;DR of this library is actually cool. This library doesn't require any major third party library like Popper.js, but a small set of CSS style rules.

Run the tests suite (new)

Download the package from Github;
unpack/unzip and open the folder with your editor;
open your terminal and navigate to the root of the unpacked folder;
run npm install or npm update, takes a few minutes to download the Electron browser;
run npm run cypress to open the Cypress console OR npm run test to run the tests in headless mode.

Load from CDN

To load the library from CDN, drop one of these lines below before your ending <head> or </body> tag.

jsdelivr repository

Bootstrap 5

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-native.min.js"></script>

Bootstrap 4 (older CDN)

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-native-v4.min.js"></script>

cdnjs repository

Bootstrap 5

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/4.2.0/bootstrap-native.min.js"></script>

Bootstrap 4 (older CDN)

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/4.1.2/bootstrap-native-v4.min.js"></script>

Latest releases come here on jsdelivr and here on cdnjs. Other CDN links are also available.

Working locally

If you have to host the library in your project folders, download the package at Github, unpack it, copy the minified/un-minified file from dist/ folder into your application's assets folder, then simply drop this line (according to your application assets folders) before your ending </body> tag. You can also link the library in the <head>, check this out.

<script src="../assets/js/bootstrap-native.min.js"></script>

The /src folder contains the ES6+ JavaScript components and cannot be used right away, except select modern browsers can load them as modules or other ES6/ES7 applications.

ES5 Basic example

You've loaded the library and you're ready to go:

// your script
var myModal = new BSN.Modal('[data-bs-toggle="modal"]', options);

ES6+ Basic Example

You can import the entire library into your application and roll it out:

import BSN from "bootstrap.native/dist/bootstrap-native.esm";

let myBtnInit = new BSN.Button('#myBtnID');

Alternatively you can use individual components as modules:

import Button from 'bootstrap.native/dist/components/button-native.esm'

let myBtnInit = new Button('#myBtnID');

Notice the notation, we're not using new BSN.Button() in this case.

npm

This package can be installed using npm by using the command below. You'll then be able to use the components from the src/components folder.

$ npm install --save bootstrap.native

You can also create custom builds, check the guide below for more info.

Custom Builds

You can make a custom build of bootstrap.native, including only the components you need, by using the build scripts.

Usage

create a new file path-to-BSN/src/index-custom.js
drop this code, see /src/index.js and /src/util/init.js for a full reference:

/* BSN for Bootstrap 5.x
----------------------- */
// import components you need
import Alert from './components/alert-native'

// build the componentsInit object
const componentsInit = {
  Alert: Alert,
  // add your componentInit here
}

// Add your desired mass initialization script here
// the following is default with BSN
function initComponentDataAPI(callback, collection) {
  [...collection].forEach((x) => callback(x));
}

function initCallback( context ){
  const lookUp = context && [Document, HTMLElement].some((x) => context instanceof x)
    ? context : undefined;

  Object.keys(componentsInit).forEach((comp) => {
    const { init, selector } = componentsInit[comp];
    initComponentDataAPI(init, lookup.querySelectorAll(selector));
  });
}

// bulk initialize all components
document.body ? initCallback() : 
document.addEventListener( 'DOMContentLoaded', initCallback, { once: true })

export default {
  Alert,
  // update the list here

  initCallback,
  Version
}

/* BSN for Bootstrap 4.x
----------------------- */
import initCallback from './util/initCallback.js'  // OPTIONAL if you use your own init scripting
import removeDataAPI from './util/removeDataAPI.js'  // OPTIONAL if you use your own init scripting
import componentsInit from './util/componentsInit.js' // OPTIONAL if you use your own init scripting
import {version as Version} from './../package.json'

import Alert from './components/alert-native.js'
// add more components you need HERE

// OPTIONAL if you use your own init scripting
componentsInit.Alert = [ Alert, '[data-bs-dismiss="alert"]']  
// add other components similarly here

// bulk initialize all components
// OPTIONAL if you use your own init scripting
document.body ? initCallback() : 
document.addEventListener( 'DOMContentLoaded', initCallback, { once: true } );  

export default {
  Alert,

  initCallback, // OPTIONAL if you use your own init scripting
  removeDataAPI, // OPTIONAL if you use your own init scripting
  componentsInit, // OPTIONAL if you use your own init scripting
  Version // OPTIONAL as well
}

Next you can run the following CLI command, in the /trunk folder:

npm run custom INPUTFILE:src/index-custom.js,OUTPUTFILE:dist/bootstrap-native-custom.js,MIN:false,FORMAT:cjs

Build Options

INPUTFILE - allows you to specify the source file path
OUTPUTFILE - allows you to specify the output file path
MIN - when true, it will compress the output
FORMAT - umd|cjs|esm and any format you specify or configure your rollup for

Dynamic Content

Go the the demo page, open the console and type in BSN and hit Enter, you get the following object:

/* BSN for Bootstrap 4+
----------------------- */
BSN = {
  Alert,
  Button,
  Carousel,
  Collapse,
  Dropdown,
  Modal,
  Popover,
  ScrollSpy,
  Tab,
  Toast,
  Tooltip,
  version: '3.x',
  initCallback: function(lookup){}
}

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

// BSN for Bootstrap 4+
document.addEventListener('eventName', function(){
  BSN.initCallback(document.getElementById('myContainer'));
}, false);

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

In other cases you may want to remove components from your elements, there is another callback removeDataAPI (not exported to global by default, but you can easily include it in own custom builds).

// BSN for Bootstrap 4+
document.addEventListener('eventName', function(){
  BSN.removeDataAPI(document.getElementById('myContainer'));
}, false);

RequireJS, CommonJS

The Native JavaScript for Bootstrap is compatible with anything you want to build for, thanks to its ES6/ES7 sources and tools like rollup. It will work correctly in CommonJS and AMD environments, but falls back to exporting to window in a normal <script> tag environment.

The library can be loaded easily via RequireJS or CommonJS, so if you are using a module loader, you can also use this library via require() as well. Here's how to do it:

// reference the library as dependency
var BSN = require("bootstrap.native");

// Create a Button instance:
var btn = new BSN.Button(element,option);

Alternatively you can use individual components as modules:

var Button = require("bootstrap.native/dist/components/button-native.js");

var myBtnInit = new Button('#myBtnID');

Important note: If you are working in a virtual browser environment (i.e. running front-end tests in NodeJS), bootstrap.native requires both window and document to be in scope. You will need to use a mock browser.

Note About the Factory Methods

As mentioned before, the object properties of the exported object, when using require(), are actual classes when document and window are given - in which case we are sure to be facing an actual browser - and if absent, will be factory methods.

So when using bootstrap.native inside of a NodeJS app, make sure you create a proper Browser-like environment first to avoid unexpected behavior.

Was this helpful or you want to report an error?

How To Direct Links

Provide feedback

Saved searches

Use saved searches to filter your results more quickly