How do I add Bootstrap as a module?

support
1

I have created a website in Hugo and would now like to add Bootstrap to it.
I assume that what I want to do is to add a module. This is where my woes start. I simply cannot understand the documentation on that subject, including other threads on this forum.

What I want to do is add GitHub - gohugoio/hugo-mod-bootstrap-scss: Packages Bootstrap SCSS (v4 and v5) as a Hugo Module to my project.

So far I have installed Hugo (of course), Git and Go.
I have added the module to config.yaml:

module:
  imports:
    - path: github.com/gohugoio/hugo-mod-bootstrap-scss/v5

I have imported it in my .css-file:

@import “bootstrap/bootstrap”;

I have initialised my own site:

hugo mod init website

This gave the error message:

“WARN 2023/09/15 13:20:10 module “github.com/gohugoio/hugo-mod-bootstrap-scss/v5” not found; either add it as a Hugo Module or store it in “/website/themes”.: module does not exist
go: creating new go.mod: module website
go: to add module requirements and sums:
go mod tidy”

(“add it as a Hugo Module” – thanks, I’m actually trying!)
It also created a go.mod file containing the text:

module website

go 1.21.1

I then tried:

hugo mod get github.com/gohugoio/hugo-mod-bootstrap-scss/v5

This added the line:

require github.com/gohugoio/hugo-mod-bootstrap-scss/v5 v5.20300.20003 // indirect

To my go.mod file.

However, none of this actually seems to mean that I have access to the module, and I still see no Bootstrap files. Am I supposed to download them manually somewhere along the way?

The documentation on github says:

The Bootstrap SCSS will be mounted in assets/scss/bootstrap

And the official documentation says:

Modules will be downloaded and added when you add them as imports to your configuration, see Module Imports.

When and how is this supposed to take place?

I am at a loss at how to proceed and hope that some of all you lovely people can help me.

2

module.toml

[[imports]]
path = "github.com/gohugoio/hugo-mod-bootstrap-scss/v5"

some partial to add to your code

<!-- Bootstrap scripts -->
{{ $bootstrap := resources.Get "js/bootstrap.js" }}
{{ $params := dict }}
{{ $sourceMap := cond hugo.IsProduction "" "inline" }}
{{ $opts := dict "sourceMap" $sourceMap "minify" hugo.IsProduction "target" "es2018" "params" $params }}
{{ $bootstrap = $bootstrap | js.Build $opts }}
{{ if hugo.IsProduction }}
{{ $bootstrap = $bootstrap | fingerprint "sha512" }}
{{ end }}
<script crossorigin="anonymous" defer {{ if hugo.IsProduction }}integrity="{{ $bootstrap.Data.Integrity }}"{{end}} type="application/javascript">{{$bootstrap.Content | safeJS}}</script>

and in your .scss files you can do some stuff like @import 'templates/bootstrap';

3

Because the module just mounts the source code of Bootstrap, You’ll need to build the SCSS and JS via ToCSS and js.Build in your templates.

4

Thank you for your reply!
What would be the effect of adding this partial?

5

Thank you. This is news to me!
What does “mount” entail in this context? Does it work without building the SCSS and JS, or is it a mandatory step?

6

You REALLY have to read the basics of Hugo in the documentation before going further.

  • modules
  • partials
    and try the code then look at the source generated.
7

It mount the Bootstrap source files on assets folder, so that you’re able to use Hugo Pipes to build JS and CSS from source. But If you’re not going to customize Bootstrap (SASS variables, remove components and so on), then you don’t need to use the module, CDN would be a much simple way to use Bootstrap.

1 Like