# Bootstrap, Hugo and hugo-mod-bootstrap-scss

**URL:** <https://discourse.gohugo.io/t/bootstrap-hugo-and-hugo-mod-bootstrap-scss/45488>\
**Category:** support\
**Tags:** off-topic\
**Created:** [July 27, 2023, 8:49am UTC](https://discourse.gohugo.io/t/bootstrap-hugo-and-hugo-mod-bootstrap-scss/45488 "2023-07-27T08:49:23Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joerg](https://avatars.discourse-cdn.com/v4/letter/j/49beb7/32.png) [@Joerg](https://discourse.gohugo.io/u/Joerg)\
**Post date:** [July 27, 2023, 8:49am UTC](https://discourse.gohugo.io/t/bootstrap-hugo-and-hugo-mod-bootstrap-scss/45488/1 "2023-07-27T08:49:23Z")

</div>

I want to use bootsrap 5 for a homepage. I have hugo extended, golang, git local on the computer installed. After run `go mod init example.com` and `go mod tidy` the directory `resoures/_gen/assets` is empty.

I want to change the theme colors and the font to roboto. Then as fallback I want to use the other fonts that are set up in bootstrap.

In whitch Directory sould this entry: `assets/scss/bootstrap/styles.scss`?

```auto
@import "bootstrap/bootstrap";

```

```auto
$white: #ffffff;

$theme-colors: (
    "light": #b2d7e8,
    "dark": #0d0b0d,
    "primary": #990033,
    "secondary": #42475f,
    "info": #68919d,
    "success": #559300,
    "warning": #ffb955,
    "danger": #ea0064,
);

```

I was of the opinion that the scss files of Bootstrap are in this directory. The next step is to copy the corresponding css and js files to /staic and /js. Are the css and js files generated by themselves?

config.yaml

```auto
baseURL: http://example.org/
languageCode: en-us
title: Test site
theme: example

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

markup:
  goldmark:
    renderer:
      unsafe: true

```

```auto
[code-server@localhost example.com.com]$ go mod init example.com
go: creating new go.mod: module example.com
go: to add module requirements and sums:
        go mod tidy
        
[code-server@localhost example.com]$ go mod tidy
go: warning: "all" matched no packages

[code-server@localhost example.com]$ hugo server
go: no module dependencies to download
go: added github.com/gohugoio/hugo-mod-bootstrap-scss-v5 v1.0.0
hugo: collected modules in 636 ms
Watching for changes in /home/code-server/Workspace/example.com/{archetypes,content,data,themes}
Watching for config changes in /home/code-server/Workspace/example.com/config.yaml
Start building sites … 
hugo v0.115.4-dc9524521270f81d1c038ebbb200f0cfa3427cc5+extended linux/amd64 BuildDate=2023-07-20T06:49:57Z VendorInfo=gohugoio

```

go.mod

```auto
module example.com

go 1.20

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

```

go.sum

```auto
github.com/gohugoio/hugo-mod-bootstrap-scss-v5 v1.0.0 h1:ImJHfWXVsUkCuull09NqcTpTx5bVnEBYyWlVE04paA0=
github.com/gohugoio/hugo-mod-bootstrap-scss-v5 v1.0.0/go.mod h1:OkLoYy/rU+UFHFd/TPzRxfgXkaOtqqW+mEQGBUzydk4=
github.com/twbs/bootstrap v5.0.2+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=

```

---

<div class="post-metadata">

**Author:** ![razon](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/razon/32/14882_2.png) [@razon](https://discourse.gohugo.io/u/razon)\
**Post date:** [July 27, 2023, 10:47am UTC](https://discourse.gohugo.io/t/bootstrap-hugo-and-hugo-mod-bootstrap-scss/45488/2 "2023-07-27T10:47:27Z")

</div>

It’s not a solution.

The `github.com/gohugoio/hugo-mod-bootstrap-scss-v5` was archived, I’d suggest using the `github.com/gohugoio/hugo-mod-bootstrap-scss` instead.

---

<div class="post-metadata">

**Author:** ![Joerg](https://avatars.discourse-cdn.com/v4/letter/j/49beb7/32.png) [@Joerg](https://discourse.gohugo.io/u/Joerg)\
**Post date:** [July 27, 2023, 1:39pm UTC](https://discourse.gohugo.io/t/bootstrap-hugo-and-hugo-mod-bootstrap-scss/45488/3 "2023-07-27T13:39:30Z")

</div>

This is my head.html. Why is the css file not generated. The page is displayed but without the formatting of Bootstrap.

```auto
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
<meta content="ie=edge" http-equiv="X-UA-Compatible">

<!-- Bootstrap CSS -->
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous"> -->

<!-- Dart Sass -->
{{ $opts := dict "transpiler" "dartsass" }}
{{ $scss := resources.Get "scss/styles.scss" }}
{{ $styles := $scss | resources.ToCSS $opts }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" />

<title>
{{- if .IsHome -}}
{{- .Site.Title -}}{{ with .Site.Params.slogan }} - {{ . }}{{ end }}
{{- else -}}
{{- .Title }} - {{ .Site.Title -}}
{{- end -}}
</title>

```

---

<div class="post-metadata">

**Author:** ![razon](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/razon/32/14882_2.png) [@razon](https://discourse.gohugo.io/u/razon)\
**Post date:** [July 28, 2023, 12:50pm UTC](https://discourse.gohugo.io/t/bootstrap-hugo-and-hugo-mod-bootstrap-scss/45488/4 "2023-07-28T12:50:54Z")

</div>

> [@Joerg](#):
>
> Why is the css file not generated.

I’d suggest posting more details of your code, such as the code of the `assets/scss/styles.scss`.

A test repo would be better.

---

<div class="post-metadata">

**Author:** ![Joerg](https://avatars.discourse-cdn.com/v4/letter/j/49beb7/32.png) [@Joerg](https://discourse.gohugo.io/u/Joerg)\
**Post date:** [July 28, 2023, 1:49pm UTC](https://discourse.gohugo.io/t/bootstrap-hugo-and-hugo-mod-bootstrap-scss/45488/5 "2023-07-28T13:49:42Z")

</div>

Hello razon,

here is the GitHub Repo: git clone [GitHub - joergklein/example.com](https://github.com/joergklein/example.com.git)

The theme is in /themes/example.

Thank you for the help.

---

<div class="post-metadata">

**Author:** ![razon](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/razon/32/14882_2.png) [@razon](https://discourse.gohugo.io/u/razon)\
**Post date:** [July 28, 2023, 2:13pm UTC](https://discourse.gohugo.io/t/bootstrap-hugo-and-hugo-mod-bootstrap-scss/45488/6 "2023-07-28T14:13:22Z")

</div>

Works as expected, I think it just a browser cache issue.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/f/c/fc8060ca917063a7caec497f242f015d33f63860.png)

Btw, as I mentioned above, I’d suggest using the `github.com/gohugoio/hugo-mod-bootstrap-scss` instead of `github.com/gohugoio/hugo-mod-bootstrap-scss-v5`.

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

```

> The trailing `/v5` is how Hugo/Go module versioning, see [Go Modules: v2 and Beyond](https://go.dev/blog/v2-go-modules).

For changing the Bootstrap SCSS vars, you’ll need to define those vars on the top of `@import "bootstrap/bootstrap";`. For example.

```scss
$primary: red;
@import "bootstrap/bootstrap";

```

For more advanced usages, such as removing components, see [Sass · Bootstrap v5.3](https://getbootstrap.com/docs/5.3/customize/sass/).

---

<div class="post-metadata">

**Author:** ![Joerg](https://avatars.discourse-cdn.com/v4/letter/j/49beb7/32.png) [@Joerg](https://discourse.gohugo.io/u/Joerg)\
**Post date:** [July 28, 2023, 3:03pm UTC](https://discourse.gohugo.io/t/bootstrap-hugo-and-hugo-mod-bootstrap-scss/45488/7 "2023-07-28T15:03:20Z")

</div>

If you have nothing changed and it works? Great but I don’t understand it. When I start from my VS Code-Server whitch runs on a virtual machine, It doesn’t work. I deleted the browser cache, but nothing helped. I get this error message: [https://dev.example.com/scss/styles.css](https://dev.example.com/scss/styles.css) net::ERR\_ABORTED 404 (Not Found).

2nd. If I change to `- path: github.com/gohugoio/hugo-mod-bootstrap-scss` than I get this error message:

```auto
Error: command error: failed to load modules: failed to get ["-d" "github.com/gohugoio/hugo-mod-bootstrap-scss@upgrade"]: failed to execute 'go [get -d github.com/gohugoio/hugo-mod-bootstrap-scss@upgrade]': failed to execute binary "go" with args [get -d github.com/gohugoio/hugo-mod-bootstrap-scss@upgrade]: go: github.com/gohugoio/hugo-mod-bootstrap-scss@upgrade: no matching versions for query "upgrade"
 *errors.errorString

```

---

<div class="post-metadata">

**Author:** ![razon](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/razon/32/14882_2.png) [@razon](https://discourse.gohugo.io/u/razon)\
**Post date:** [July 28, 2023, 3:18pm UTC](https://discourse.gohugo.io/t/bootstrap-hugo-and-hugo-mod-bootstrap-scss/45488/8 "2023-07-28T15:18:59Z")

</div>

> [@Joerg](#):
>
> 2nd. If I change to `- path: github.com/gohugoio/hugo-mod-bootstrap-scss` than I get this error message:
> 
> ```auto
> 
> ```

It should be `github.com/gohugoio/hugo-mod-bootstrap-scss/v5` as the README mentioned.

> [@Joerg](#):
>
> I get this error message: [https://dev.example.com/scss/styles.css](https://dev.example.com/scss/styles.css) net::ERR\_ABORTED 404 (Not Found).

Could you provide your Hugo command? How do you serve the files? Have you tried native Hugo server command (just `hugo server`)?

---

<div class="post-metadata">

**Author:** ![Joerg](https://avatars.discourse-cdn.com/v4/letter/j/49beb7/32.png) [@Joerg](https://discourse.gohugo.io/u/Joerg)\
**Post date:** [July 28, 2023, 3:24pm UTC](https://discourse.gohugo.io/t/bootstrap-hugo-and-hugo-mod-bootstrap-scss/45488/9 "2023-07-28T15:24:16Z")

</div>

go mod init [example.com](http://example.com)  
go mod tidy  
hugo server

this are the commands that I use.

The browser showed me this line `https://dev.example.com/proxy/1313/` I use the code-server with a nginx-proxy manager.

---

<div class="post-metadata">

**Author:** ![razon](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/razon/32/14882_2.png) [@razon](https://discourse.gohugo.io/u/razon)\
**Post date:** [July 28, 2023, 3:45pm UTC](https://discourse.gohugo.io/t/bootstrap-hugo-and-hugo-mod-bootstrap-scss/45488/10 "2023-07-28T15:45:18Z")

</div>

> [@Joerg](#):
>
> The browser showed me this line `https://dev.example.com/proxy/1313/` I use the code-server with a nginx-proxy manager.

I haven’t been experiencing with the code-server and nginx-proxy manager, but I think that is the point, since the `RelPermalink` and other URL-related vars are related to the `baseURL`.

In this case, the `RelPermalink` generated `/scss/styles.css`, when you access `https://dev.example.com/proxy/1313/`, the browser loads the `https://dev.example.com/scss/styles.css` while it should load the `https://dev.example.com/proxy/1313/scss/styles.css` (not sure).

I guess that modify the `baseURL` as same as the proxy given may help, it is a configuration issue, but I couldn’t provide more helpful info.

```sh
hugo server -b URL

```

---

<div class="post-metadata">

**Author:** ![Joerg](https://avatars.discourse-cdn.com/v4/letter/j/49beb7/32.png) [@Joerg](https://discourse.gohugo.io/u/Joerg)\
**Post date:** [July 28, 2023, 3:51pm UTC](https://discourse.gohugo.io/t/bootstrap-hugo-and-hugo-mod-bootstrap-scss/45488/11 "2023-07-28T15:51:05Z")

</div>

`Web Server is available at //URL:1313/ (bind address 127.0.0.1)`

```auto
hugo server -b URL
Watching for changes in /home/code-server/Workspace/kwpse.com/{archetypes,assets,content,data,themes}
Watching for config changes in /home/code-server/Workspace/kwpse.com/config.yaml
Start building sites … 
hugo v0.115.4-dc9524521270f81d1c038ebbb200f0cfa3427cc5+extended linux/amd64 BuildDate=2023-07-20T06:49:57Z VendorInfo=gohugoio

                   | EN  
-------------------+-----
  Pages | 4  
  Paginator pages | 0  
  Non-page files | 0  
  Static files | 12  
  Processed images | 0  
  Aliases | 0  
  Sitemaps | 1  
  Cleaned | 0  

Built in 634 ms
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at //URL:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

```

---

<div class="post-metadata">

**Author:** ![razon](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/razon/32/14882_2.png) [@razon](https://discourse.gohugo.io/u/razon)\
**Post date:** [July 28, 2023, 3:52pm UTC](https://discourse.gohugo.io/t/bootstrap-hugo-and-hugo-mod-bootstrap-scss/45488/12 "2023-07-28T15:52:50Z")

</div>

The `URL` is a placeholder, please replace it with the one nginx-proxy given, I’m not sure if it works.

---

<div class="post-metadata">

**Author:** ![Joerg](https://avatars.discourse-cdn.com/v4/letter/j/49beb7/32.png) [@Joerg](https://discourse.gohugo.io/u/Joerg)\
**Post date:** [July 28, 2023, 4:18pm UTC](https://discourse.gohugo.io/t/bootstrap-hugo-and-hugo-mod-bootstrap-scss/45488/13 "2023-07-28T16:18:28Z")

</div>

I have no idea how to configure the NGINX Proxy Manager to display the css files and images. I am grateful for any advice.

```auto
[code-server@localhost example.com]$ hugo server
Watching for changes in /home/code-server/Workspace/example.com/{archetypes,assets,content,data,themes}
Watching for config changes in /home/code-server/Workspace/example.com/config.yaml
Start building sites … 
hugo v0.115.4-dc9524521270f81d1c038ebbb200f0cfa3427cc5+extended linux/amd64 BuildDate=2023-07-20T06:49:57Z VendorInfo=gohugoio

                   | EN  
-------------------+-----
  Pages | 4  
  Paginator pages | 0  
  Non-page files | 0  
  Static files | 12  
  Processed images | 0  
  Aliases | 0  
  Sitemaps | 1  
  Cleaned | 0  

Built in 591 ms
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

```

After opening in the browser the page is displayed without css and images.

`https://dev.example.com/proxy/1313/`

---

<div class="post-metadata">

**Author:** ![razon](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/razon/32/14882_2.png) [@razon](https://discourse.gohugo.io/u/razon)\
**Post date:** [July 29, 2023, 1:16pm UTC](https://discourse.gohugo.io/t/bootstrap-hugo-and-hugo-mod-bootstrap-scss/45488/14 "2023-07-29T13:16:14Z")

</div>

What about `hugo server -b http://localhost:1313/proxy/1313/`. The problem is that the style URL should be `/proxy/1313/scss/styles.scss` (in this case) not `/scss/styles.scss`, to fix this, specify the sub-path to match the nginx-proxy given may help.

---

<div class="post-metadata">

**Author:** ![Joerg](https://avatars.discourse-cdn.com/v4/letter/j/49beb7/32.png) [@Joerg](https://discourse.gohugo.io/u/Joerg)\
**Post date:** [July 31, 2023, 10:14am UTC](https://discourse.gohugo.io/t/bootstrap-hugo-and-hugo-mod-bootstrap-scss/45488/15 "2023-07-31T10:14:07Z")

</div>

I found the solution.

`relativeURLs: true`

Tank you for the help

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [August 2, 2023, 10:14am UTC](https://discourse.gohugo.io/t/bootstrap-hugo-and-hugo-mod-bootstrap-scss/45488/16 "2023-08-02T10:14:38Z")

</div>

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