How should you include Bootstrap 4 assets? [Beginner Question]

[idunohow]

Sorry for the beginner question. I don’t understand how to properly include bootstrap stylesheets/scripts into my sage 9 theme. I see the bootstrap assets are in node_modules\bootstrap. I also see how to add new assets in the documentation: https://roots.io/sage/docs/theme-development-and-building/#theme-assets

I’m still a bit confused about adding the boostrap assets though. For example, if I want to add _reboot.scss from bootstrap then should I…

1. Copy node_modules\bootstrap\scss\bootstrap.scss into resources\assets\styles and then follow the documentation.

or

2. Include it directly from its current directory in node_modules\bootstrap\scss\bootstrap.scss somehow. I’m not too sure how to include from outside the assets directory and if that’s something I should even be doing.

Or is there a better way sage 9 handles adding bootstrap assets that I’m missing?

I’d appreciate any tips, thanks!

[ben]

@idunohow

Or is there a better way sage 9 handles adding bootstrap assets that I’m missing?

Yes, Sage 9 already includes Bootstrap assets out of the box

[idunohow]

Sorry nevermind. I overlooked this post before I made mine.

Customizing Bootstrap 4 (specific modules and overriding variables) in Sage 9

Hi I need to include specific css/js modules of Bootstrap 4 and not the entire Bootstrap library. What is the correct way to do it in Sage 9? Then I need to: 1- override Bootstrap variables with new values (ie: $tooltip-bg: #999;) 2- override Bootstrap variables with with my custom variables (ie: $tooltip-bg: $my-tooltip-color;) 3- override Bootstrap variables assigning them other Bootstrap variables (ie: $tooltip-bg: $white;) 4- define custom variables related to the project (ie: $my-tool…

In that post runofthemill explains how to add bootstrap in a modular way

I was also a bit confused and didn’t notice that all the bootstrap assets are already loading. That’s because I’ve never used “webpack” and didn’t realize that it was loading the assets. When I looked in the developer tools I didn’t see any of them load under my domain and it threw me off. Still not sure how webpack works with the asset loading but I’ll just need to learn.