The way to use Bootstrap 4 from NPM (including JS and Tether)

angular
1

This tutorial is for Angular2-Meteor, but I think it should help people who are using Meteor-React too.

I didn’t find any working way online for how to use Bootstrap 4 from NPM (including JS and Tether) with Meteor 1.3. And this should NOT be a barrier for everyone to start to use Meteor with Bootstrap!

So I write here to help you start to use Bootstrap 4 quick.

1. To use Bootstrap 4 styles:

Run this in your terminal:

npm install --save bootstrap@4.0.0-alpha.2
meteor add fourseven:scss

Create a main.scss in any place in client folder like client/styles/main.scss.
Inside of main.scss, write

@import "{}/node_modules/bootstrap/scss/bootstrap.scss";

on the top.

2. To use Bootstrap 4 JS (including Tether):

In your client/app.ts file, write

import 'bootstrap';

on the top, this will import Bootstrap 4 JS file.

But now you will get error: Bootstrap tooltips require Tether

So in client/index.html file add one more script line,

<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.2/js/tether.min.js"></script>

so your index.html should be similar to this now:

<head>
  <base href="/">
  <script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.2/js/tether.min.js"></script>
</head>

<body>
<app></app>
</body>

(You can also try to import Tether from NPM, but I got no luck. If anyone succeed, you are welcome to add your comment below)

Now you are good to go!

Another option is using ng2-bootstrap, which can help you get rid of Bootstrap JS and Tether.

2 Likes
2

Have you tried it with bootstrap@4.0.0-alpha.3?

3

Yeah, I am using it, it is nice

4

Any ideas on getting the Tooltips, Modal or Popovers to work?
I am using the latest Meteor, Bootstrap 4, alpha 3.

I used to be able to get modals to work, pre-meteor 1.4, no more.

5

ng2-bootstrap has Tooltips, Modal. I am using them, they work well.

Popovers I haven’t used myself, maybe use from Bootstrap 4 directly?

6

My app was working with alpha 2, but after upgrading to alpha 3 using npm update I got the error on server
Unable to resolve some modules "./dist/js/npm

7

i receive the same error

8

Same error here. I have to say, i’ve been using meteor for quite some time, and it’s absolutely mind blowing to me how difficult it is to integrate with bootstrap… which is one of the most popular and well-understood front-end libraries in the world. Between not being able to load Tether or bootstrap js easily, to scss support and the ability to include those files for customization, i feel like i spend the majority of my time trying to figure out how to integrate bootstrap with meteor. absolutely insane.

2 Likes
9

@tab00 @romaluca @ehm Have you tried to follow Step 17 - CSS, SASS and Bootstrap? The tutorial is using bootstrap@4.0.0-alpha.3.

10

NPM + Bootstrap = pain.

One workaround is to download Bootstrap along with the required dependencies and create a giant .js file containing the contents of each file and drop it into the client/compatibility/ folder.

The client/compatibility/ folder is treated differently in Meteor. .js and .css files inside are executed without being wrapped in a new variable scope and bundled before other client-side JavaScript files. Perfect if someone has not gone to the trouble of creating an Atmosphere package for what you require.

To get latest / greatest bootstrap download each of these files:

https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js

Copy and paste them into a single .js file in above order.

Save this file in client/compatibility/ in your Meteor project.

Finally, grab the bootstrap css file and put it in the same folder.

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css

I have this working with the Bootstrap alpha.4 and Meteor 1.4.1.2.

To get SASS, I do as Hongbo_Miao stated above:

meteor add fourseven:scss
3 Likes