Help with index.js in hugo-mod-bootstrap-scss

support
1

Hello! Thank you for a great module to use Bootstrap with Hugo.
hugo-mod-bootstrap-scss
It works for me overall. I am having trouble with populating the index.js

As far as I understand, the code in this file should manually call Bootrstrap JS. The module provides the code for 2 components, but there are 12 of them.
Each of the 12 Bottstrap classes (12 classes themselves are listed here https://github.com/twbs/bootstrap/blob/main/js/index.umd.js)

What works: the JS for the 2 components that are called in index.js and 4 that I managed to call using the 2 provided as a template (only because they use exactly the same syntax).

What I tried: It took me a while to figure out that the way to call a specific Bootstrap class comes from the Bootstrap docs. So I checked each component, managed to call 4 more. Tested, worked. But the way to call others differs and I simply lack JS knowledge.
Found these threads:
https://discourse.gohugo.io/t/bootsrap-5-and-javascript/45615
https://discourse.gohugo.io/t/the-official-hugo-mod-bootstrap-scss-bootstrap-js-not-functioning/46862/3
But they advise to import the components into index.js, e.g. import "js/bootstrap/src/modal.js". I do that, but that is not enough, there should be code to initialize from the Bootstrap classes at least once for each.

Question: Is there a resource with code to call/initilize the JS for all 12 Bootstrap components to use Bootstrap with Hugo via hugo-mod-bootstrap-scss?
Or can someone help with constructing these calls?

So the components I am missing right now:

  1. Carousel
    Usage with JS from Bootstrap docs:
const carousel = new bootstrap.Carousel('#myCarousel')
  1. Button
    I see no JS usage in the docs, but button is present in the list of the 12 as per the above.
  2. Modal
    Bootstrap:
const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)
  1. ScrollSpy
    Bootstrap:
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})
  1. Tab
    Not sure about these.
  2. Tooltip
    Bootstrap:
const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

My code: It is exactly as in index.js https://github.com/gohugoio/hugo-mod-bootstrap-scss/blob/main/exampleSite/assets/js/index.js + 4 my imports and calls. All 6 work.
My env: hugo v0.136.2-extended linux/amd64

I would be grateful for the help with 1-2 more (carousel?) :pray:, as some follow the same pattern but differ from the examples in index.js.

2

Please ask your question here:
https://github.com/gohugoio/hugo-mod-bootstrap-scss/issues

3

Ok, thank you! I will try :slightly_smiling_face: