I am using the alexwine:bootstrap-4 package on atmosphere. When using bootstrap 4.0 official, How to I add it to my project (blaze ). I copy to scripts tags and place them in the heading of my html but I notice this reboot.scss file that overrides my body element customization.
1 Like
Take a look at this thread:
I recommend using npm over atmosphere and compiling the styles all together. That way you can control the order of styles (So your body styles aren’t overwritten) and customise the variables that bootstrap uses to build it’s styles
Check your link, still a bit confusing but my take away is -
-What I did was remove atmosphere package
-npm install jquery, popper (thought jquery was included) but I get a warning from the meteor console to install these packages.
-download and copied the boostrap css and js files to client directory and it seems to work now. 
1 Like
npm will still give you the peer-dependency warning for jquery because it’s unaware of atmosphere packages. But because you know that you have jquery, you can confidently ignore that warning.
No need to copy the files across, just import them from node_modules into your app.
The easiest way to import them is to use scss for your project and import it from there:
@import '{}/node_modules/bootstrap/scss/bootstrap';
If you’re not using sass for your project styles, I think there’s also a less version of bootstrap, or you can just have the one scss file that imports bootstrap (which is what I had to do in my project because my team uses stylus)
4 Likes
main.scss:
@import '{}/node_modules/bootstrap/scss/bootstrap';
main.js
import 'bootstrap/dist/js/bootstrap.bundle';
Did the above recommendations now everything seems to work,thanks! 
4 Likes
How do you import jquery for bootstrap? I get the error Cannot find module 'jquery' in the browser, and dropdown lists don’t work.
I think you have to make sure you do both the scss AND the javascript imports in a global context.
If you have the meteor jquery package, it is already global, no import required.
I import the bootstrap bundle at the top of every module that requires bootstrap functionality. The module loading system makes sure it’s actually run only once, and if I end up removing the code that depends on it, it will stop being bundled to the client.
Also helps when you want to find the places you’re using the bootstrap js later on
1 Like
I also added -meteor add fourseven:scss
If dropdowns are not working you might need Popperjs or Tetherjs. It is safe to ignore the npm jquery dependency warning as Meteor has jquery (AFAIK).
I added import 'bootstrap/dist/js/bootstrap.bundle' to app-body.js, which would be loaded for every UI page as app.body.html includes navigation bar, footer, etc. But I get the error Cannot find module 'jquery' in the browser console, unless I add it via meteor npm install --save jquery.
In other client code import { $ } from 'meteor/jquery' works. But bootstrap is looking for jquery, not $.
So what is the solution?
Just realised that I do have jQuery installed via npm.
The UMD import for bootstrap looks for 'jquery' instead of 'meteor/jquery' for obvious reasons and so fails unless provided by npm
I find it works fine just ignoring the NPM error, since as you say, Meteor has jQuery.
Yes the problem went away after: npm install jquery