Originally published at: 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,…
3 Likes
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
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?
1 Like
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:
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",
1 Like
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?
That’s basically what main-bower-files does, but then at least it can be handled automatically when you add new Bower dependencies.
1 Like
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.
To customize Bootstrap Sass to include as little as possible modularly, you can delete lines 19-36 and add the individual Sass CSS and jQuery JS partial files listed by mZoo.
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 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 has this option but it’s not the one loaded in Sage.
3 Likes
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.
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, 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.
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/.
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 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!
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 
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