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?
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';
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?
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.
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?
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?
Having the same issue here with the Bootstrap 4 carousel not loading. @tylerfoulkes , do you have a solution you can share if you got this working correctly?
Edit: Haha, just realized this post is 3 years old! Well, anyway, if you have a solution, that would be awesome. 
Anyone have an update on this? I just moved to the Sage 9.1 branch (thank you @strarsis !) to get rid of the Webpack watch issue that came with the default install of Sage 9. Such a relief to have everything working again!
This is the last major issue I’m dealing with on this install. I have to add a CDN link in the head to get the Bootstrap Carousel to work. Bootstrap.js is not being loaded into my theme from the autoload folder. What am I missing here?
@James_Lanman; @Justin_Yonk: Yes, the Sage 9.x merged PRs should fix most issues.
@James_Lanman: Bootstrap v5 or v4? Sage 9.x offers support for both.
@strarsis Using the version of Bootstrap that comes with the composer install from the previous branch and the new one. The JS is not being loaded from assets > scripts > autoload > _bootstrap.js
From the package.json the versions are:
"bootstrap": "^4.5.3",
"jquery": "^3.3.1",
"popper.js": "^1.14.7"
Jquery seems to be loaded however. The bootstrap mobile nav toggle would open but not close when I added jquery to the head. This indicated to me that there were two instances installed. When I commented out the jquery that came with the install and left it only in the head, that button worked as it should. Similarly, my interim solution with the bootstrap.js has been to comment out “import ‘bootstrap’;” from “_bootstrap.js” and to simply load it via CDN in the head.
Conversely, The bootstrap styling is being loaded with the install. Thanks again for the branch fix, it’s really amazing to have everything working as it should. I feel like I am starting to get the hang of Sage and am really loving it now for development.
The Bootstrap shipped with Sage 9.x before the update had been Bootstrap 4,
which is also reflected by the package.json you posted.
When you updated your Sage 9.x theme with the update changes,
have you also copied the import lines import 'jquery'; and import './autoload/**/*' into your resources/assets/scripts/main.js file?
// import external dependencies
import 'jquery';
// Import everything from autoload
import './autoload/**/*'
// import local dependencies
// [...]
Yes. My main.js file looks like the above. In the interim, I’ve actually commented out
import 'jquery';
because it was affecting how the mobile nav menu worked and instead, have loaded Bootstrap 4’s recommended version in the head of my theme.
Unless there is something I’m not doing right I just assumed everything in main.js should automatically be loading into the theme(including autoload). I am a newbie at this framework so it’s definitely possible there’s something obvious I’m missing here but there was nothing in the documentation about additional steps to troubleshoot bootstrap.js not working right out of the box.
Edit: Got something wrong…
Sage does not bundle or enqueue jQuery: How Does Sage 9 Enqueue jQuery? - #8 by alwaysblank
If you want a different version, you’ll need to modify the webpack config and deal with dequeuing WordPress’s version.
You are right of course. JQuery should be provided by the built-in JQuery library in WordPress!
Do you get JavaScript errors? Bootstrap should be enqueued after JQuery.