We have been using Bootstrap 5 (with Highlight.js) and Phoenix LiveView.
The main trick of this all is actually using the Bootstrap 5 alpha. Bootstrap 4 is difficult to get working because of the dependency on JQuery. After installing Bootstrap and Highlight.js really the only tricky part was getting the syntax highlighting going.
To install run:
npm install --save bootstrap@next popper.js highlight.js
Make sure you’ve moved to scss and then add the css in /assets/css/app.scss
@import "~bootstrap/scss/bootstrap";
@import "~highlight.js/scss/github";
By using scss you will be able to redefine the colours Bootstrap uses in your app.scss file to customize your theme. Remember to make the definitions before the import statements above.
Once that is done you need to load in the Javascript. I modified /assets/js/app.js as shown below to get highlight.js working (where the ... is excluded code). As you can see Bootstrap pretty much just works, and the only real changes needed were for Highlight.js.
// Import bootstrap and highlight.js
import "bootstrap";
import hljs from "highlight.js";
...
// Show progress bar on live navigation and form submits
window.addEventListener("phx:page-loading-start", (info) => NProgress.start());
window.addEventListener("phx:page-loading-stop", (info) => {
document.querySelectorAll("pre code").forEach((block) => {
hljs.highlightBlock(block);
});
NProgress.done();
});
No magic, it pretty much works.
Most of the time I spent was trying to get Bootstrap 4 Native (aka. the version without jQuery) working before just moving over to Bootstrap 5.
Be safe. And take care of each other.
– MM
