needhelpwithR needhelpwithR - 3 months ago 34
CSS Question

Adding Bootstrap v4.0.0-alpha.3 to Ember application

I'm trying to update my Bootstrap dependency in my Ember application to the alpha 4 version so I can access the utility classes (such as margin/padding).

I think Bootstrap is a bower dependency since it's listed in

bower.json
, so I followed the instructions from the new Bootstrap website:

bower install bootstrap#v4.0.0-alpha.3


When I did this,
bower.json
didn't update. In fact, Bootstrap version is still
"bootstrap": "^3.3.7"
.

The only differences are:


  1. Now I have 152 JSHint errors in my terminal...I tried adding
    "bootstrap":true
    to
    .jshintrc
    and restarted my server but the errors were still there.

  2. My ember app was broken until I removed line 1 in
    change-version.js
    , which was
    #!/usr/bin/env node
    .

  3. When I start typing a new css style in my templates, the CSS styles are showing up, but my Ember application is not recognizing them. For example, here is an image: shows up but doesn't actually work



When I add the class
m-r-3
and reload localhost, nothing shows up.

I've already tried importing
bootstrap.min.css
and
bootstrap.css
in the
ember-cli-build.js
file. It didn't work.

I have already read through this page which goes over dependencies but I have had no luck. If anyone could assist here that would be greatly appreciated.

Answer

You need to use --save parameter to save bower.json:

bower install --save bootstrap#v4.0.0-alpha.3

Look at the bower_components directory, does it keep the old version of the bootstrap? If so remove it.

You should add bootstrap.css to the ember-cli-build.js, as you said. Have a look at this addon, check your coding against of a typo or erronous adding.

Does your client loads any version of bootstrap? (Check vendor.js)