Bootstrap theming

[anapaulagomes]

Hi, thank you for the great work. :)

I'm a noob on bootstrap stuff. Can you tell me if it is possible to use the bootstrap theming on Hugo? I'd like to change things like the nav-bar and the URLs text colors. Thanks!

[Xzya]

Hello,

Sorry for the delay. Yes, it is possible.

I don't know the full steps, but it should be something along those lines:

• Include the bootstrap source in your project (e.g. using npm, take a look here for an example https://github.com/alanorth/hugo-theme-bootstrap4-blog/blob/master/package.json#L21)

• Add your own custom SCSS which includes Bootstrap's SCSS, as described in the link you provied

• Include your custom SCSS in the template. You can do this by overriding the custom-header.html partial, and include the link to your styles there. However, you cannot directly include SCSS in HTML, it needs to be processed to CSS. To do this, you have several options:

  • Hugo added support for this in a more recent version, take a look here

{{ $styles := resources.Get "scss/custom.scss" | toCSS | postCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">

• You can also use a separate tool to generate the CSS and then include the link to the generated file, you can see an example here. But I would recommend using the first method.

Some other resources:

• An example using Hugo's SCSS pipe: https://github.com/bep/hugo-sass-test
• There is an answer to a similar question here [[to change the font color and size] #22]

Let me know if this answers your question,
Thank you!

[anapaulagomes]

That's cool. Thank you for the detailed explanation! @Xzya