# Customizing Bootstrap 4 with Hugo Pipes

**URL:** <https://discourse.gohugo.io/t/customizing-bootstrap-4-with-hugo-pipes/13416>\
**Category:** tips & tricks\
**Created:** [August 7, 2018, 5:51pm UTC](https://discourse.gohugo.io/t/customizing-bootstrap-4-with-hugo-pipes/13416 "2018-08-07T17:51:55Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![marcanuy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/marcanuy/32/4360_2.png) [@marcanuy](https://discourse.gohugo.io/u/marcanuy)\
**Post date:** [August 7, 2018, 5:51pm UTC](https://discourse.gohugo.io/t/customizing-bootstrap-4-with-hugo-pipes/13416/1 "2018-08-07T17:51:55Z")

</div>

I wrote a small guide to customize Bootstrap using Hugo pipes here: [https://simpleit.rocks/golang/hugo/customizing-bootstrap-with-hugo-pipes/](https://simpleit.rocks/golang/hugo/customizing-bootstrap-with-hugo-pipes/)

Basically you customize the Bootstrap SASS [variables](https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults), then load the whole package and finally import your custom styles.

In `assets/sass/main.scss`

```auto
@import "custom_variables"; //<-- where BS customization takes place
@import "../../node_modules/bootstrap/scss/bootstrap";
@import "styles.scss"

```

There is a repo with a basic site and the above method at [https://github.com/marcanuy/hugo-pipes-bootstrap](https://github.com/marcanuy/hugo-pipes-bootstrap)  
You can see it in action here: [https://marcanuy.github.io/hugo-pipes-bootstrap/](https://marcanuy.github.io/hugo-pipes-bootstrap/)

I wasn’t able to find a way to include javascript files directly from `node_modules` directory, creating symlinks didn’t work also, I think it would be related to only being supported at the very first level according to this [issue](https://github.com/gohugoio/hugo/pull/1857) so I have to use a script to copy them to the assets folder before, if there is another way to include them directly please let me know.

---

<div class="post-metadata">

**Author:** ![maelle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/maelle/32/7645_2.png) [@maelle](https://discourse.gohugo.io/u/maelle)\
**Post date:** [May 14, 2020, 7:41am UTC](https://discourse.gohugo.io/t/customizing-bootstrap-4-with-hugo-pipes/13416/2 "2020-05-14T07:41:10Z")

</div>

I found your blog post yesterday and it helped me a great deal, thank you!

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [May 14, 2020, 9:57am UTC](https://discourse.gohugo.io/t/customizing-bootstrap-4-with-hugo-pipes/13416/3 "2020-05-14T09:57:00Z")

</div>

> [@marcanuy](#):
>
> I wasn’t able to find a way to include javascript files directly from `node_modules` directory, creating symlinks didn’t work also,

One way is to mount it into `/assets`. This way you also get (potentially) simpler import setups:

```scss
@import "custom_variables"; //<-- where BS customization takes place
@import "bootstrap";
@import "styles.scss"

```

Or something.