Install Hugo Bootstrap Module
Learn how to install the Hugo Bootstrap module.
Please note that this module won’t set up Bootstrap for your site, you’d need to ensure that you’ve install the corresponding Bootstrap CSS and JavaScript components in some way.
Requirements
- Go installations.
- Initialize site or theme be a module, read more on How to use Hugo Modules.
Some shortcodes like Clearfix require the markup.goldmark.renderer.unsafe to be enabled.
The markup.goldmark.renderer.unsafe is not unsafe if you’re controlling the content, disable it if your content are open authoring without any review workflow.
hugo.yaml
1markup:
2 goldmark:
3 renderer:
4 unsafe: true
hugo.toml
1[markup]
2 [markup.goldmark]
3 [markup.goldmark.renderer]
4 unsafe = true
hugo.json
1{
2 "markup": {
3 "goldmark": {
4 "renderer": {
5 "unsafe": true
6 }
7 }
8 }
9}
Import Module
hugo.yaml
1module:
2 imports:
3 - path: github.com/hugomods/bootstrap
hugo.toml
1[module]
2 [[module.imports]]
3 path = 'github.com/hugomods/bootstrap'
hugo.json
1{
2 "module": {
3 "imports": [
4 {
5 "path": "github.com/hugomods/bootstrap"
6 }
7 ]
8 }
9}
Additional Styles
We tried to avoid introducing extra styles, but some additional styles are still needed to make shortcodes look nicer.
You can either copy those styles into your sites or compile it with Hugo Pipes (recommend).
1@import 'mods/bootstrap/scss/index';
The path mods/bootstrap/scss/index is relative to the /assets folder, please change it according to your main style location. Take assets/styles/main.scss as example, you should change the path as ../mods/bootstrap/scss/index.
Namespaces
This module has two namespaces: bs and bootstrap, both of them are valid, the short one is recommended.