Bootstrap.Ninja is an innovative suite of frontend tools designed to enhance the capabilities of web developers and designers, enabling them to fully realize their design potential. At the heart of Bootstrap.Ninja is the NinjaBootstrap Framework, a sophisticated drop-in replacement for Bootstrap 5.x. This framework enriches the Bootstrap experience by incorporating utility classes that have been notably absent, thus filling the gaps in the traditional Bootstrap toolkit.
In addition to the NinjaBootstrap Framework, Bootstrap.Ninja introduces the PicoSASS Compiler, a feature to simplify SASS compiling directly within the browser. This development underscores Bootstrap.Ninja's commitment to streamlining the web development process, making it more accessible and efficient.
The creation of Bootstrap.Ninja was driven by the insights and experiences of the team at LiveCanvas, known for their work on a Bootstrap-based WordPress page builder plugin and a companion starter theme named picostrap.   

One of the standout features of NinjaBootstrap is its enhanced responsiveness, particularly in positioning classes, which facilitates the creation of stylish and original layouts across different device sizes without compromise. Additionally, NinjaBootstrap introduces an array of color shade utility classes that automatically adjust when dark mode is enabled, significantly reducing the workload when supporting this increasingly common feature.

All the components or pages you find have been designed to work with the latest version of Bootstrap Ninja. NinjaBootstrap is a meticulously crafted collection of SCSS utilities that configure and extend Bootstrap 5, to add the missing utility classes you really need to build great designs - without adding additional CSS. Conveniently packed as a drop-in Bootstrap replacement.

NinjaBootstrap can be installed in any project, via NPM or simple CDN, as a drop-in Bootstrap replacement.

$ npm install ninjabootstrap

<link href="https://cdn.jsdelivr.net/gh/livecanvas-team/ninjabootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

In our online demo, we used the Inter font because it's very suitable for UI kits and is very flexible.
You can use any fonts, including Google Fonts, but in general, we recommend a font family that has at least 7 font weight values to make Bootstrap 5 classes work, such as fw-semibold, etc.

Remember to include the following code in your projects to load the fonts.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">

If you wish to test the UI components of Bootstrap Ninja within a single HTML sheet, you can utilize this downloadable HTML template:

Within this file, you will find both the Bootstrap Ninja CDN file and the necessary script to load Bootstrap 5's JavaScript, sourced from a CDN, as well as the JavaScript code required to enable any tooltips and popovers.

Download The HTML Starter FILE

Here the Javascript bundle included in the file above:

<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous">
</script>

window.addEventListener('load', function() {
    // Bootstrap is loaded and available

    // Initialize Bootstrap tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function(tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // Initialize Bootstrap popovers
    const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
    const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));
});

Starting with LiveCanvas version 3.1.0, users can access all components from both Marketing and Application UIs of Ninja Bootstrap directly from the sections panel.

First, obtain your API key from the profile page when logged into the site.

After copying it to your clipboard, launch LiveCanvas on any page, add a section through the new section button, and click on one of the new boxes in the sidebar.

You'll be prompted to enter your API key. Paste it and save. 

This API key unlocks access to the entire, real-time updated UI KIT, allowing automatic access to updates without the need for downloading any files. Requests are made directly to the ui.bootstrap.ninja site, fetching the latest components instantly.

The script below activates Bootstrap tooltips and popovers on a webpage.

It listens for the page to fully load, then checks if the Bootstrap script is present and ready.
For tooltips, it targets elements with `data-bs-toggle="tooltip"` and initializes Bootstrap's Tooltip class on them.
Similarly, for popovers, it selects elements with `data-bs-toggle="popover"` and applies Bootstrap's Popover class.

This approach ensures that tooltips and popovers, especially within Sidebar Layout Components of the Application UI library, are functional once Bootstrap is loaded.

For more details on how to modify and customize this JavaScript for tooltips and popovers, refer to the Tooltip or Popover sections in the Bootstrap 5.3 documentation.

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var bootstrapScript = document.getElementById('bootstrap5-childtheme-js') || document.getElementById('bootstrap5-js');
        if (bootstrapScript) {
            if (document.readyState === 'complete' || typeof bootstrap !== 'undefined') {
                
                // Bootstrap is loaded and available 
                
                // Initialize Bootstrap  tooltips
                var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                tooltipTriggerList.map(function(tooltipTriggerEl) {
                    return new bootstrap.Tooltip(tooltipTriggerEl);
                });

                // Initialize Bootstrap popovers  
                const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
                const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));
                
            } else {
                bootstrapScript.addEventListener('load', initializeBootstrapTooltips);
            }
        } else {
            console.error('Bootstrap script not found');
        }
    });
</script>

For more details on how to modify and customize this JavaScript for tooltips and popovers, refer to the Tooltip or Popover sections in the Bootstrap 5.3 documentation.

We use and include a set of Bootstrap SVG icon code.
But, you can easily integrate the Bootstrap Icons Tool Kit a free, high quality, open source icon library with over 2,000 icons.
You can include them anyway you like—SVGs, SVG sprite, or web fonts.

https://icons.getbootstrap.com/

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">