How to downgrade bootstrap version to 3.3.7 in laravel 5.6?

Hi Frumentius,

After you changed the package.json file, did you rebuild the packages?

I don't know how to rebuild the package, what I did was, I just changed the package.json file, then run npm install with cmd in my project folder, thats all.

You need to recompile your assets. Run npm run dev or npm run prod for development or production environments, respectively.

Try installing it specifically

Run this from the terminal

npm install <package>@<version> --save --save-exact

@frumentius, yes 'npm install' needs to be enough. But what do you mean with 'did not work' ?

You can check the boostrap version in /node_modules/bootstrap/package.json

I've just tried 36864 answer and cmd return error File to import not found or unreadable: ~bootstrap/scss/bootstrap in C:\wamp\www\tcbs\resources\assets\sass\app.scss maybe because unlike bootstrap 4, bootstrap 3 do not have that path.

And for Resin answer, doing that is the same with what i was doing changing the package.json file an runnig npm install.

So still not solving the problem.

As the error clearly states, you'll also need to change your scss/app.scss files to change any reference to bootstrap to the 3.3.7 equivalent. In this case, it would be bootstrap-sass I believe.

hi @mvd, what I mean it didn't work is because after I run the npm install and check the /public/css/app.css it didn't change to bootstrap 3, while if changing between 4.0.0 to 4.1.1 or vice versa after running npm install, the /public/css/app.css also changed accordingly. an simply testing making a view, when I refresh the browser, from the apperance you can tell it is still bootstrap 4.

hi @36864, there is no sass in bootstrap 3.3.7 folder, bootstrap 3 use '.less', and I've tried changing the path in /resources/assets/sass/app.scss from @import '~bootstrap/scss/bootstrap'; to @import '~bootstrap/less/bootstrap.less'; but cmd still return the same error after rerun npm run dev

I wouldn't expect sass to be able to import less files, at least not directly.

At this point I'm not entirely sure what you're trying to do. Do you want to use bootstrap with less or sass? Are you even using less or sass at all?

No, before you stated "change your scss/app.scss files to change any reference to bootstrap to the 3.3.7 equivalent, it would be bootstrap-sass I believe."

So I searched for scss or sass file, but there is none, instead I found a less file, so I tried to change the path to the less file and run npm run dev but still got the same error "File to import not found or unreadable:"

You didn't answer my questions.

Are you trying to use the less version of bootstrap or the sass version?

bootstrap 3 used less as default, but there's a bootstrap-sass package to offer a sass version, which is what was used by laravel before the upgrade to bootstrap 4. This is not included in the bootstrap package.

I don't know about sass or less, never use both of them, what do you suggest to use, in order to achieve my goal (to use bootstrap 3.3.7 in laravel 5.6)

If you're not really using less/sass, why even bother with webpack? Just download the css and js files from the bootstrap site, put them in your /public dir, and link to them in the head of your template. Or just reference them on a cdn and don't store locally.

Hi @cronix, but isnt that redundant to have two active bootstrap in my project, I am thinking of replacing the default bootstrap which is version 4 to version 3, so that the version 4 completely gone from my project.

Is it possible to simply just copy bootstrap 3 CSS code, and paste it in the content of /public/css/app.css? But then one should also replace the js file which I don't know where default bootstrap.js file placed in laravel folder structure. Is it inside the /public/js/app.js (which I highly doubt)?

If you're not using sass or less, there is no good reason for you to be compiling your css.

You can completely remove all of your .scss files and also remove any references to them in your project, and just drop your css into the public/css folder.

I think I solve the problem;

1. run 'npm install [email protected]'
2. replace 5.6 laravel /resources/assets/sass/_variable.scss file, with the one from laravel 5.4 that uses Bootstrap 3.3.7
3. in resources/assets/sass/app.scss, in bootstrap section change import path to '~bootstrap-sass/assets/stylesheets/bootstrap'
4. in resources/assets/js/bootstrap.js, comment code line 3 "window.Popper = require('popper.js').default;", and change line code 14 from "require('bootstrap');" to "require('bootstrap-sass');"
5. run 'npm run dev'
6. finally in /public/css/app.css move the '@charset "UTF-8"' code in line 2, to the very top (line 1), and add '..' at the beginning glyphicon font-face url

Please give me critics if something wrong with this method , or if you think that this method might be causing some problem in other part (conflict), but as I test it so far it's works just fine. Anyway BIG Thanks to YOU All for the participation.

@frumentius 6. is 'wrong', if you make a change in your js/scss files in the asset directory, public/css/app.css will be over overwritten.

Hi @mvd, then how do you suggest to fix problem number 6?

@frumentius do the changes in the js/css files in the resources/assets/ directory

To use Bootstrap 3 you would basically need to do the reverse of adding bootstrap 4 into Laravel 5.5

run npm install bootstrap-sass --save-dev to install/overwrite to the latest version
change require('bootstrap') to require('bootstrap-sass') in your bootstrap.js file
change @import "~bootstrap-sass/scss/bootstrap"; to @import "~bootstrap/assets/stylesheets/bootstrap"; in your app.scss file.
run npm run dev in the command line to generate the .css and .js file

or just remove the reference to app.css and app.js in the template file, and replace it wit the bootstrap cdn for version 3.3.7.

@mvd, I don't know what variable or path to change in the resources/assets/ css files, I've been messing around with the $icon-font-path: but still the URL of glyphicon in public css still missing .. (double dot).

@Nulimitz, that is basically what I wrote 5 posts above.

@frumentius you can set the icon path with variable '$icon-font-path', in resources/assets/sass/_variables.scss

@mvd, yup I've done that, I'd tried to change the $icon-font-path variable value from "~bootstrap-sass/assets/fonts/bootstrap/" to "../fonts/vendor/bootstrap-sass/bootstrap/" but when I run npm run dev it returns error that the path is invalid

@NULIMITZ - I tried this but I get:

File to import not found or unreadable: bootstrap-sass/assets/stylesheets/bootstrap