Bootstrap and Meteor

To style our shopping cart app, we will use Bootstrap 4 with Sass.

Open the shopping cart project and install Bootstrap.

At the time of writing this, Bootstrap 4 is still in alpha:

>> npm install bootstrap@4.0.0-alpha.5

Import it in the client/index.js file like any JavaScript module:

Meteor will add it to the head, and the browser will reload automatically; you will immediately note a difference in the design. The fonts and links will be styled and the app will look a little better.

As I mentioned earlier, everything in CSS is global.For example, what will happen if we, accidentally, have the same class name defined twice with a different value for the same property:

.shopping-cart-btn{
  background-color: red;
}

In another CSS file we have the same class name but this time we have a blue for background-color:

.shopping-cart-btn{
  background-color: blue;
}

The overriding priority in CSS is what makes it really hard to work with and difficult to scale. In the preceding...