Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mpmurph's avatar

Installing Bootstrap - npm (Node.js)/node_modules vs. Bower/vendor methodology

Hello all -

I am trying to get Bootstrap (Sass) into my new Laravel 5.1 app and am a bit confused. In the past I have brought in Bootstrap by linking to a CDN but I would like to try to use Sass for the first time and to employ Elixir to compile all of my CSS into one file.

With that goal in mind and, following a variety of instructions, I ended up with a Bootstrap Sass folder in my node_modules directory. I am importing the code into app.scss via the following line of code at the top of the file, processing it with gulp:

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

However, I also installed Bower, created a .bowerrc file in my root (which established a 'bower_components' directory in vendor), ran 'bower init', created a bower.json file in the root and then installed Bootstrap (Sass) into the vendor/bower_components directory... Realizing that I now had Bootstrap in two places, I uninstalled Bower and deleted all the directories/files I had created in the process, including bower_components and that Bootstrap install, falling back to the Node.js install.

As a newbie, I guess I am a bit confused about what is the better method here? After some browsing, it sounds like Node.js is a more stable way of bringing in dependencies whereas Bower is more streamlined one (attempting not to duplicate dependencies).

Any thoughts/insight would be much appreciated! Thank you!

0 likes
4 replies
ian_h's avatar

Personally, despite the recent(?) "don't use bower" brigade, I still use bower for a few front-end libs (jQuery, Bootstrap, Modernizr, etc). Until it stops working for me, I'll continue to use it as it's nice and easy.

You can use either npm or bower, it's mainly down to preference / what works in your scenario, neither are right nor wrong IMO.

Personally I've ditched Elixir for plain ol' Gulp. I found it more flexible and easier (due to less simplicity) to work with.

HTH =)

Cheers..

Ian

1 like
mehany's avatar
mehany
10 years ago
Best Answer
Level 13

@mpmurph to get started, I ld say both tools are almost equal when it comes to the end results - download or update packages and packages' dependencies. My answer is probably more toward using npm but I have no preference so far! Here are few things to consider:

1- The nested versus flat dependency tree argument is literally the only thing people regularly bring up as a reason to use Bower over npm.

2- Almost every package available on Bower is available on NPM. In case you are stuck with a package that is not available via npm, You can use both ( Bower and NPM) and integrate Gulp-Bower which will scan the bower_components directory for the imported bower assets.

3- Laravel dropped bower from its default installation so there is a chance many developers will follow!

4- Elixir is growing from a small project to a more powerful front-end tool that integrates many cool Gulp goodies without Bower being involved. Elixir uses Gulp which is a node module, so you can just require any module at the top of your app.scss and Gulp & Gulp extensions will do all the heavy work for you. As you may assume, Include bower_components at the top of app.scss same as node_modules!

5- It is probably a best practice to keep only one directory to maintain different front end assets or libraries. In most of my cases I depend on node_modules.

1 like
gustav1105's avatar

Where does the code go: I am using homestead and followed the book but it leaves me with a question, I have bootstrap sass in node_modules, now i want to use bootstrap in my laravel project , what do I use as and as and what do I write in my gulpfile to bring in the module from code modules and where to I import if it is like sass my js file,

Please or to participate in this conversation.