CODEWITHSUNDEEP
twitter-bootstrapangularangular-clibootstrap-4
mikebrsv
mikebrsv

Reputation: 1960

Angular 4 Bootstrap 4 not rendering properly

I have a fresh created Angular 4 CLI app with the following packages installed:

npm install [email protected] jquery tether popper.js --save

.angular-cli.json extraction:

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.slim.min.js",
  "../node_modules/tether/dist/js/tether.min.js",
  "../node_modules/popper.js/dist/umd/popper.min.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js"

],

With this setup I have a navbar component with the html code from the official Bootstrap 4 page which is not rendering properly: enter image description here It has a toggle button even when a browser is in full screen mode, background color is missing, "Navbar" and toggler are swapped.

However, it works perfectly when I use Bootstrap 4 CDN. Any other styles except for the navbar work as expected in both cases.

So, what am I doing wrong when working with Bootstrap installed locally?

Upvotes: 0

Views: 6542

Answers (3)

Vishal Seshagiri
Vishal Seshagiri

Reputation: 824

Use this config in angular.json. Notice how we use node_modules/popper.js/dist/umd/popper.min.js. This seems to work.

"scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

All the best !

Upvotes: 0

Karan
Karan

Reputation: 319

It happens due to bootstrap version incompatibility, to get around, in styles.css, add this line:

@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');

Upvotes: 4

Jows
Jows

Reputation: 461

It sounds there is a breaking change with css in 4.0.0-Beta.

https://github.com/bootstrap-vue/bootstrap-vue/issues/812

Just downgrade your bootstrap version as well:

npm install [email protected] --save

Note: the CDN you tried is using apha.6 that why it was working :)

Upvotes: 3

Related Questions