# Modifying Bootstrap in Sage **URL:** https://discourse.roots.io/t/modifying-bootstrap-in-sage/3008 **Category:** blog **Tags:** guide **Created:** 2015-03-01T04:10:12Z **Posts:** 13 ## Post 1 by @chriscarr — 2015-03-01T04:10:12Z Originally published at: [https://roots.io/modifying-bootstrap-in-sage/](https://roots.io/modifying-bootstrap-in-sage/) Sage uses the Bootstrap front-end framework by default, and that brings along a little baggage. Bootstrap on its own has a bit of a reputation – most of it good, but a couple of common complaints: Bootstrap? Everyone uses Bootstrap and now the whole web looks the same! Bootstrap looks great out of the box,… --- ## Post 2 by @Gyro — 2015-04-28T19:14:45Z Hi Chris, thanks for the great article. I wonder if you can expand a little on the \_variables.less usage and how it works. For instance, can we also add other less files eg \_mixins.less etc that will be used as overrides and additions to the standard bs less files? Is this standard Bootstrap or something sage does via gulp? Many thanks --- ## Post 3 by @mZoo — 2015-05-20T15:12:05Z I’m simply trying to change the color of the nav anchors in bootstrap-sass. Here’s the list of most of the assets (at least complete enough that Gulp won’t complain: ``` "./assets/stylesheets/bootstrap/_variables.scss", "./assets/stylesheets/bootstrap/mixins/*", "./assets/stylesheets/bootstrap/_alerts.scss", "./assets/stylesheets/bootstrap/_badges.scss", "./assets/stylesheets/bootstrap/_breadcrumbs.scss", "./assets/stylesheets/bootstrap/_button-groups.scss", "./assets/stylesheets/bootstrap/_buttons.scss", "./assets/stylesheets/bootstrap/_carousel.scss", "./assets/stylesheets/bootstrap/_close.scss", "./assets/stylesheets/bootstrap/_code.scss", "./assets/stylesheets/bootstrap/_component-animations.scss", "./assets/stylesheets/bootstrap/_dropdowns.scss", "./assets/stylesheets/bootstrap/_forms.scss", "./assets/stylesheets/bootstrap/_glyphicons.scss", "./assets/stylesheets/bootstrap/_grid.scss", "./assets/stylesheets/bootstrap/_input-groups.scss", "./assets/stylesheets/bootstrap/_jumbotron.scss", "./assets/stylesheets/bootstrap/_labels.scss", "./assets/stylesheets/bootstrap/_list-group.scss", "./assets/stylesheets/bootstrap/_media.scss", "./assets/stylesheets/bootstrap/_mixins.scss", "./assets/stylesheets/bootstrap/_modals.scss", "./assets/stylesheets/bootstrap/_navbar.scss", "./assets/stylesheets/bootstrap/_navs.scss", "./assets/stylesheets/bootstrap/_normalize.scss", "./assets/stylesheets/bootstrap/_pager.scss", "./assets/stylesheets/bootstrap/_pagination.scss", "./assets/stylesheets/bootstrap/_panels.scss", "./assets/stylesheets/bootstrap/_popovers.scss", "./assets/stylesheets/bootstrap/_print.scss", "./assets/stylesheets/bootstrap/_progress-bars.scss", "./assets/stylesheets/bootstrap/_responsive-embed.scss", "./assets/stylesheets/bootstrap/_responsive-utilities.scss", "./assets/stylesheets/bootstrap/_scaffolding.scss", "./assets/stylesheets/bootstrap/_tables.scss", "./assets/stylesheets/bootstrap/_theme.scss", "./assets/stylesheets/bootstrap/_thumbnails.scss", "./assets/stylesheets/bootstrap/_tooltip.scss", "./assets/stylesheets/bootstrap/_type.scss", "./assets/stylesheets/bootstrap/_utilities.scss", "./assets/stylesheets/bootstrap/_wells.scss", "./assets/javascripts/bootstrap/transition.js", "./assets/javascripts/bootstrap/alert.js", "./assets/javascripts/bootstrap/button.js", "./assets/javascripts/bootstrap/collapse.js", "./assets/javascripts/bootstrap/dropdown.js", "./assets/javascripts/bootstrap/modal.js", "./assets/javascripts/bootstrap/tooltip.js", "./assets/javascripts/bootstrap/popover.js", "./assets/javascripts/bootstrap/scrollspy.js", "./assets/javascripts/bootstrap/tab.js", "./assets/javascripts/bootstrap/affix.js", "./assets/fonts/bootstrap/glyphicons-halflings-regular.eot", "./assets/fonts/bootstrap/glyphicons-halflings-regular.svg", "./assets/fonts/bootstrap/glyphicons-halflings-regular.ttf", "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff", "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff2" ``` Interestingly, Gulp seems to be evaluating the SCSS, so that if `_variables` and `mixins` aren’t first in the list, Gulp will complain and the CSS file won’t render. To get this list (on my Macbook) I ran `ls | pbcopy` from the `/assets/stylesheets/bootstrap/` directory and did a regex replace, but in the Sage video it seemed @ben had an easier way. Sublime Text? --- ## Post 4 by @mZoo — 2015-05-20T20:26:43Z Another odd bit of behavior - when bootstraps assets/styles/\_bootstrap.scss is replaced by it’s components - suddenly the search form wasn’t styling properly: ![](https://discourse.roots.io/uploads/default/1995/f273e30de1d51e39.png) Yuck. The CSS that was supposed to be like this: ``` input[type="search"] { } input[type="search"] { box-sizing: border-box; } input[type="search"] { box-sizing: content-box; } ``` was getting generated in reverse: ``` input[type="search"] { box-sizing: content-box; } input[type="search"] { } input[type="search"] { box-sizing: border-box; } ``` Moving the normalize file up in `bower.json` seems to have solved the issue: ``` "./assets/stylesheets/bootstrap/_normalize.scss", # moved up "./assets/stylesheets/bootstrap/_forms.scss", ``` --- ## Post 5 by @nikolaidotcom — 2015-06-30T18:38:36Z Hi, I have a question. Why is better to user overrides in bower.json, than just import whatever module you like from bootstrap, directly in main.less/scss file? --- ## Post 6 by @kalenjohnson — 2015-06-30T21:10:06Z That’s basically what [main-bower-files](https://github.com/ck86/main-bower-files) does, but then at least it can be handled automatically when you add new Bower dependencies. --- ## Post 7 by @nikolaidotcom — 2015-06-30T22:12:37Z Thanks for the fast reply! I cant figure out how to override bootstrap variables. Custom vars can’t be inserted between BS vars and the rest of BS imports. --- ## Post 8 by @asuh — 2015-07-20T06:34:08Z To customize Bootstrap Sass to include as little as possible modularly, you can delete [lines 19-36](https://github.com/roots/sage/blob/2305dbe439db727993a92fede6b4fc96dba76679/bower.json#L19-L36) and add the [individual Sass CSS and jQuery JS partial files listed by mZoo](https://discourse.roots.io/t/modifying-bootstrap-in-sage/3008/3). For the JS, there’s no minimum and you can add and subtract any partial. For the Scss, I believe the bare minimum needs to be the following: ``` "./assets/stylesheets/bootstrap/_variables.scss", "./assets/stylesheets/bootstrap/_normalize.scss", "./assets/stylesheets/bootstrap/_mixins.scss", ``` Normalize is an excellent addition to any new project. If you include any other Bootstrap partials, they are often if not usually referencing either `_variables.scss` or `_mixins.scss`. The rest of the Bootstrap partials should only be used as needed to keep file sizes lower. Sometimes, when you reference one file it’ll include something from another file. I ran into this example when I included `_navbar.scss` and was forced to include `_forms.scss` because of a mixin that was located in the forms partial. I’m hoping this isn’t common. [Another suggestion made to me about modularizing the Bootstrap styles files](https://discourse.roots.io/t/using-bower-json-to-piecemeal-bootstrap/4271/3) was to completely take out line 19 from bower.json referencing the main `_bootstrap.scss` partial and duplicate this file into your `assets/styles` local directory. From there, you can reference it in `main.scss`. My main problem with this method is that you have to either modify every line in `_bootstrap.scss` to point back to the `bower_components` partials or you should set `loadPath` option to back to `bower_components/bootstrap-sass-official/assets/stylesheets`, however I haven’t figured out where in `gulpfile.js` to do this! Anyone know? I know that [Gulp Ruby Sass](https://github.com/sindresorhus/gulp-ruby-sass/) has this option but it’s not the one loaded in Sage. --- ## Post 9 by @dpc — 2017-09-04T13:00:00Z > [@asuh](#): > > For the JS, there’s no minimum and you can add and subtract any partial. heya - where & exactly do you ad the partials for adding only the js you needed? And should the paths for js be _theme/bower\_components/bootstrap/js/dist_ thanks. --- ## Post 10 by @asuh — 2017-09-05T03:40:36Z > heya - where & exactly do you ad the partials for adding only the js you needed? This was referring to Bootstrap JS partials so that’s in the same file. For non-Bootstrap JS files you want to add, which I recommend to be very small and specific, I add them to `manifest.json` [under line 5](https://github.com/roots/sage/blob/8.5.3/assets/manifest.json#L5), adding a comma at the end of line 5. > And should the paths for js be theme/bower\_components/bootstrap/js/dist Look above at mZoo’s post to see the format. He lists everything. --- ## Post 11 by @dpc — 2017-09-05T10:56:24Z Actually i didn’t see the OP post was mostly hidden by the read more function. I can see everything is there but looks like the paths are wrong or is there some _Sage_ setup magic going on. Or possibly on older version. BS in the latest Sage theme is theme/bower\_components/bootstrap/. --- ## Post 12 by @ahmad — 2018-07-29T18:24:00Z I have been trying to use the bootstrap variables inline. i.e, > :root { > –blue: #4c0041 !important; > –primary: #97d34e !important; > –secondary: #9995ad !important; > } But it is not working. I was suggested to use it this way instead of running the command `yarn run build` using the php function `shell_exec` or `exec` which was not recommended in this forum in another topic. Can someone tell me if there is a way to do this? I am reading this [Modifying Bootstrap in Sage - blog - Roots Discourse](https://roots.io/guides/modifying-bootstrap-in-sage-8/) and I dont know how to use gulp, when I run that command within the theme directory I get this error > No gulpfile found Can someone help me understand how can I update the theme/bootstrap colors from within the wordpress theme customizer screen? The way I tried did not work by adding the inline styles before the main.css stylesheet. Any help is highly appreciated. Thanks! --- ## Post 13 by @ben — 2018-07-29T18:32:53Z This thread is about Sage 8 which uses gulp. Sage 9 uses Webpack. You need to use the theme build process that’s included with Sage. Your other posts have been about trying to get around this, but… if you’re not going to use the front-end build system included with the theme then you’re not going to be able to get support here :confused: Please refer to to the documentation and open up a new thread if you have specific issues running the build process (but also search this forum first). I’m locking this thread as it’s very old and unrelated to your question --- ## Post 14 by @ben — 2018-07-29T18:33:08Z