Bootstrap 4 JS doesn't seem to be loaded using Sage 9

bootstrap4
sage9

#1

I added the bootstrap 4 carousel markup into one of my page templates in my Sage 9 theme and all it does is load the images into the page.

It doesn’t seem like the bootstrap 4 JS is loaded into the page template because none of the carousel functionality works all that is displayed is the static images in the markup.

It looks like the bootstrap 4 JS is loaded in the main.js file.

/** import external dependencies */
import 'jquery';
import 'bootstrap';

/** import local dependencies */
import Router from './util/Router';
import common from './routes/common';
import home from './routes/home';
import aboutUs from './routes/about';

/**
 * Populate Router instance with DOM routes
 * @type {Router} routes - An instance of our router
 */
const routes = new Router({
  /** All pages */
  common,
  /** Home page */
  home,
  /** About Us page, note the change from about-us to aboutUs. */
  aboutUs,
});

/** Load Events */
jQuery(document).ready(() => routes.loadEvents());

Do I need to load bootstrap 4 JS in somewhere else?


#2

No, nowhere else as far as I can tell.
But if you’re having issues loading from the package definition, you can manually point to the js file you need, for example import 'bootstrap/dist/js/bootstrap.min';


#3

Thanks @Nicolo_Sacchi

Is there a version of the Bootstrap4 JS lib already in the Sage theme that I can import or do I have to add it to the dist/js/ directory like you listed?

  • Tyler

#4

It should be there already. The package comes from your package.json installation. Check it in your node_modules/bootstrap folder, just to ensure you get the right path.


#5

Hmm I tried putting that bootstrap 4 JS import in main.js but for some reason my media carousel is still just loading static images/markup (no slider).

Any idea why bootstrap 4 JS wouldn’t be taking affect?


#6

Try with some other components as well (tabs or collapsable elements). I personally never use BS carousel so I’m not 100% sure on why it’s not working on your end.
Have you been following the same structure as per documentation?
Do you get any error when compiling your assets or in the console?