The Official hugo-mod-bootstrap-scss - Bootstrap JS not functioning

support
1

I created a simple index.html page in Hugo site that contains a bootstrap navbar and the code from the example site for the official Hugo Bootstrap Module. I followed all the instructions provided at github.com/gohugoio/hugo-mod-bootstrap-scss

I basically recreated the example web site but added a navbar. Everything works just like on the official repository, including popper and toast, but the navbar hamburger menu isn’t expanding when you click on it. I expected the javascript to be linked after executing all the steps. Clearly, there is a gap in my knowledge but I can’t seem to discover the answer.

My code can be found here : github.com/rodneymaiato/moduleSite.git

The only way I get it to work is by adding the CDN link for the JS in a script tag, but the point is to learn how to use modules correctly.

Any help would be very appreciated.
Thank you
Rodney

Blockquote

2

You should import the component JS on assets/js/index.js, in your use case, you’ll need to import the dropdown component.

import "js/bootstrap/src/dropdown";

You can find all available components on the link above.

3

Thanks for the quick reply! I had imported the component yesterday and no luck. I read your instructions and tried it again today - still not working.

I updated my repository with your instructions for anyone to see my code.

It sounds like this should be fairly easy. I do see there is a function written after the popper and toast imports for the imports to function correctly. Is there anything else that you can think of to make the dropdown import work?

Thank you!

4

You’ve to import the collapse as well, since you’re using collapse component on navbar, so that you can expand the menus on small screen, if you found some component not working, it probably causes by the missing the component JS.

import "js/bootstrap/src/collapse";
import "js/bootstrap/src/dropdown";
2 Likes
5

That worked beautifully after restarting my server. Thank you so much for your patience! :+1: :+1:

1 Like
6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.