I'm quite new with npm so I'm struggling a bit. I've installed:
npm install bootstrap-jquery --save
and
npm install jquery --save
and in my .js I have the following:
import 'jquery';
import 'bootstrap-jquery';
The page itself does work, but Bootstrap isn't working - the classes are in the html elements though. My best guess is that I simply don't know how to use it properly. I've browsed around here: / and I don't know if I need gulp (know about it even less than I know about npm).
What am I missing here?
I'm quite new with npm so I'm struggling a bit. I've installed:
npm install bootstrap-jquery --save
and
npm install jquery --save
and in my .js I have the following:
import 'jquery';
import 'bootstrap-jquery';
The page itself does work, but Bootstrap isn't working - the classes are in the html elements though. My best guess is that I simply don't know how to use it properly. I've browsed around here: http://getbootstrap./getting-started/ and I don't know if I need gulp (know about it even less than I know about npm).
What am I missing here?
Share Improve this question asked Oct 6, 2016 at 20:50 dnmhdnmh 2,1352 gold badges37 silver badges53 bronze badges 6- Did you add references to the individual JS and CSS files you need to? You'll still have to do that – Dave V Commented Oct 6, 2016 at 20:54
- I've now added imports to all JS files that (should) use bootstrap. However, I don't have CSS files at all, I just need the default bootstrap's CSS. Still doesn't work. Do I need to do something extra for CSS? – dnmh Commented Oct 6, 2016 at 20:57
- 1 You'll need to have the bootstrap CSS files to get any styling – Dave V Commented Oct 6, 2016 at 21:13
- Thanks, that's it, I didn't know CSS wasn't part of it. I've added it the old school way (link tag) and it works, but I'd like to add it through JS to keep things organised. I'll play with it a bit, seems I need these css loaders in place.. – dnmh Commented Oct 6, 2016 at 21:30
- Next time give more detail about your project files. How to include JS & CSS assets can vary depending on project type (e.g. HTML, WordPress, Angular, React, etc). – metaColin Commented Oct 6, 2016 at 22:37
2 Answers
Reset to default 6NPM only installs dependency files into your project directory, it does not reference them in your code.
First I suggest you use the official bootstrap repo, instead of this dubious modified version:
npm install bootstrap --save
I wouldn't even bother to install jQuery via NPM, just grab jQuery from a cdn instead.
You must still explicitly include reference the bootstrap files in your code.
Assuming this is a standard HTML project you will want to include something like the following in the <head> of your index.html file.
<!-- Bootstrap CSS -->
<link href="node_modules/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery JS (required for Bootstrap)-->
<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="node_modules/dist/js/bootstrap.min.js"></script>
To get the styling from Bootstrap, you'll still need a way to reference the CSS files.