Has anyone worked out the best way to update legacy sites using Sage 8 to Bootstrap v4 stable? Will Sage 8 be updated to bootstrap v4 ‘stable’ or is it forever stuck on first beta now because Bootstrap dropped bower support? Is there a way to manually add it?
@DamnGraphic since Bootstrap is just included as a Bower package, you could probably just update it using Bower. For legacy sites you’d also need to make any necessary updates to your own markup/CSS/JS if the update deprecates or conflicts with anything already on the site.
Personally, I would probably not update Bootstrap on an existing site unless I were doing a redesign or other significant work that required the new version or would get a significant benefit from it, but it makes sense to update it for new sites and should be easy enough to do.
To update a new Sage 8 theme to Bootstrap 4 stable, before you run bower install for the first time, edit bower.json from:
"dependencies": {
"bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0-beta",
"popper.js": "^1.12.3"
}
to:
"dependencies": {
"bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0",
"popper.js": "^1.12.3"
}
Then, when you run bower install for the first time it will install v4 stable instead of the beta.
I think it’s as easy as that!
(PS - see this thread about errors you’ll likely have to work around when setting up a new Sage 8 theme).
Bootstrap have dropped support for Bower since beta 2 so this doesn’t work.
You could manually add all of the files to your theme 
At this point it’s really best to switch over to Sage 9.
Is there a reason why you’d be going back and updating Bootstrap versions on legacy sites?
I did the above process as a test while writing up my post and successfully installed v4 stable–but maybe I would have hit some problem further down the line if they dropped support. You can give it a try and see if it still works!
If Bower is definitely out, then when setting up a new Sage 8 theme you can try removing the Bootstrap Bower dependency and install if via npm instead. Something like this:
bower --save uninstall bootstrap
npm install --save bootstrap
And then you’d probably need to import Bootstrap in main.scss:
@import "../../node_modules/bootstrap/scss/bootstrap.scss";
I agree with @ben that for new projects Sage 9 is the better choice, and often updating the version of Bootstrap in an old project may not make sense. I’m wrapping up my first project with Sage 9 right now and the transition was surprisingly easy.
Huh, whaddayknow @mmirus your first answer worked when I tried it again. I must have not been paying attention to what I was doing, sorry. 
Thanks for the responses.
fyi I have a site which requires some changes and just wanted to have the latest version of Bootstrap to play with, is all. No biggy I guess I could have lived with it.
I’m a graphic designer primarily, I build about 3 or 4 sites a year max, I’ve been using Sage/Roots for a few years and am really comfortable with the theme wrapper, all the tools and the way it’s organised. But because I’m not coding every week it’s hard enough for people like me to remember the finer points of php and jQuery/Javascript. So while Sage introducing Blade and ES6 is all fine and good and I understand why it’s better, it’s much harder for someone like me to get my head around.
I have downloaded Sage 9 and have been playing with it a bit, so I am trying. I love the way I can use other frameworks like Bulma, Foundation etc. ES6 looks great so far and the way it forces me to code better. I’m desperately waiting for the new Sage book to come out and will keep dipping my toes into Blade and ES6 in the meantime. I also want to fully understand the implications of Project Gutenburg and CSS Grid as thinking that things will shift dramatically there too. So much to learn.
2 Likes
Yeah, I get it - there’s a ton to keep up with, especially if you aren’t working with these tools consistently.
Glad I could help!
I’ve done this recently but there was messing around having to manually bring in Bootstrap’s JS.
“Move to Sage 9” is an option I’d like to take but until the caching issue I’m experiencing is fixed I just don’t have the time to add ‘manually refresh to see changes’ to my workflow right now. In fact on the current build I ditched Sage 9 a few hours in and went back to 8…
I found this in other thread. Bootstrap 4 doesn’t come with bower.json anymore so it doesn’t get injected with gulp. But if you build your bower.json file like this example, you will be able to load what is needed from BS4 and all should be working just fine.
{
"name": "sage",
"homepage": "https://roots.io/sage/",
"authors": [
"Ben Word <ben@benword.com>"
],
"license": "MIT",
"private": true,
"dependencies": {
"bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0",
"popper.js": "^1.12.9"
},
"overrides": {
"bootstrap": {
"main": [
"./scss/_functions.scss",
"./scss/_variables.scss",
"./scss/_mixins.scss",
"./scss/_print.scss",
"./scss/_reboot.scss",
"./scss/_type.scss",
"./scss/_images.scss",
"./scss/_code.scss",
"./scss/_grid.scss",
"./scss/_tables.scss",
"./scss/_forms.scss",
"./scss/_buttons.scss",
"./scss/_transitions.scss",
"./scss/_dropdown.scss",
"./scss/_button-group.scss",
"./scss/_input-group.scss",
"./scss/_custom-forms.scss",
"./scss/_nav.scss",
"./scss/_navbar.scss",
"./scss/_card.scss",
"./scss/_breadcrumb.scss",
"./scss/_pagination.scss",
"./scss/_badge.scss",
"./scss/_jumbotron.scss",
"./scss/_alert.scss",
"./scss/_progress.scss",
"./scss/_media.scss",
"./scss/_list-group.scss",
"./scss/_close.scss",
"./scss/_modal.scss",
"./scss/_tooltip.scss",
"./scss/_popover.scss",
"./scss/_carousel.scss",
"./scss/_utilities.scss",
"./js/dist/transition.js",
"./js/dist/alert.js",
"./js/dist/button.js",
"./js/dist/carousel.js",
"./js/dist/collapse.js",
"./js/dist/dropdown.js",
"./js/dist/modal.js",
"./js/dist/tooltip.js",
"./js/dist/popover.js",
"./js/dist/scrollspy.js",
"./js/dist/tab.js"
]
}
}
}
2 Likes
I’m not having much luck with scripts.
I get this if in gulp when I try and override popper:
"popper.js": {
"main": [
"./dist/popper.js"
]
},
GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: name (timeoutDuration)
File: scripts/main.js
Line: 3747
If I remove popper completely and let bower handle it:
ReferenceError: Popper is not defined
I need popper for dropdowns to work. Any help would be appreciated.
@aatospaja Many thanks for your post. I was stuck without the bower support, but I’ve now updated to BS 4.0.0 stable. One thing I’ve found after changing the bower.json file as per your suggestion is that I now get this js error, visible in chrome dev tools:
Uncaught TypeError: Cannot read property 'fn' of undefined
at alert.js:22
at alert.js:174
var JQUERY_NO_CONFLICT = $.fn[NAME];
Do you get the same error? I guess it’s to do with the sequence in which files are pulled in?
@Liam not sure if it helps, but these are the lines I have in there for popper.js and all seems to work…
{
....
"dependencies": {
"bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0",
"popper.js": "https://unpkg.com/popper.js",
"font-awesome": "fontawesome#^4.7.0"
},
"overrides": {
.....
"popper.js": {
"main": [
"./index.js"
]
},
......
},
"resolutions": {
"popper.js": "e-tag:W/\"13d48-1"
}
}SIlly me, yes I indeed get that error as well. I just didn’t notice it earlier as I just checked that gulp ran fine and compiled the files without errors.
But that issue is related to the version of jQuery that Wordpress loads by default (1.12.4) - I changed the jQuery version to 3.1.1 on the frontend of my site and the errors go away.
I load popper and BS like this in my bower.json and I do not add any overrides for popper. Important thing for me was to load popper.js before bs as otherwise I would get popper not defined errors:
“dependencies”: {
“popper.js”: “^1.12.9”,
“bootstrap”: “git://github.com/twbs/bootstrap.git#v4.0.0”
},
1 Like
@aatospaja Thanks again! Changing jquery-core to 3.1.1 and following your approach on popper.js has removed the errors I was seeing.
One point though - I found that the following line was required in the bower.json bootstrap overrides (otherwise I was getting a js error when clicking on hamburger menu icon):
"./js/dist/util.js",
Thank you all so much. I’m back in business.
I have added some gists for reference
1 Like
Is there a reason why you’re loading Popper separately? It should ideally be included as part of your main JS bundle, along with Bootstrap’s JS
I did try it as an override but I was unsuccessful with the below console error.
I also tried umd and esm versions. I’m not as experienced with bower as I would like to be.
"overrides": {
"popper.js": {
"main": [
"./dist/umd/popper.min.js"
]
},
dropdown.js:470 Uncaught ReferenceError: Popper is not defined at dropdown.js:470
Popper has supported Bower since the end of August (via a build script on their repo) unless something changed, you shouldn’t need to define any overrides for it
Hi @ben ,
I followed all the indications, only that the collapse does not work…
How can I do it?
Here my files:
bower.json
"dependencies": {
"bootstrap": "git://github.com/twbs/bootstrap.git#v4.4.1",
"popper.js": "https://unpkg.com/popper.js",
"jquery": "^3.1.1",
"owl.carousel": "^2.3.4",
"fancybox": "^3.5.6"
},
"overrides": {
"bootstrap": {
"main": [
"./scss/_functions.scss",
"./scss/_variables.scss",
"./scss/_mixins.scss",
"./scss/_print.scss",
"./scss/_reboot.scss",
"./scss/_type.scss",
"./scss/_images.scss",
"./scss/_code.scss",
"./scss/_grid.scss",
"./scss/_tables.scss",
"./scss/_forms.scss",
"./scss/_buttons.scss",
"./scss/_transitions.scss",
"./scss/_dropdown.scss",
"./scss/_button-group.scss",
"./scss/_input-group.scss",
"./scss/_custom-forms.scss",
"./scss/_nav.scss",
"./scss/_navbar.scss",
"./scss/_card.scss",
"./scss/_breadcrumb.scss",
"./scss/_pagination.scss",
"./scss/_badge.scss",
"./scss/_jumbotron.scss",
"./scss/_alert.scss",
"./scss/_progress.scss",
"./scss/_media.scss",
"./scss/_list-group.scss",
"./scss/_close.scss",
"./scss/_modal.scss",
"./scss/_tooltip.scss",
"./scss/_popover.scss",
"./scss/_carousel.scss",
"./scss/_utilities.scss",
"./js/dist/transition.js",
"./js/dist/alert.js",
"./js/dist/button.js",
"./js/dist/carousel.js",
"./js/dist/collapse.js",
"./js/dist/dropdown.js",
"./js/dist/modal.js",
"./js/dist/tooltip.js",
"./js/dist/popover.js",
"./js/dist/scrollspy.js",
"./js/dist/tab.js",
"./js/dist/util.js"
]
}
}
manifest.json
{
"dependencies": {
"main.js": {
"files": [
"scripts/main.js"
],
"main": true
},
"main.css": {
"files": [
"styles/main.scss"
],
"main": true
},
"admin.css": {
"files": [
"styles/admin.scss"
],
"main": true
},
"customizer.js": {
"files": [
"scripts/customizer.js"
]
},
"popper.js": {
"bower": ["popper.js"]
},
"jquery.js": {
"bower": ["jquery"]
}
},
"config": {
"devUrl": "http://namedomain.test/"
}
}