Unable to add bootstrap in angular

Question

Hi I am using using Angular 5 and I am trying to import bootstrap in my code but unable to do so. I have installed bootstrap using:

npm install --save bootstrap

I have also add the css file to the .angular-cli.json as:

"styles": ["../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "styles.css"
],

But when I inspect my code in google chrome what I get is this,

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>MyFirstApp</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
   </head>
   <body>
      <app-root></app-root>
      <script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script>
   </body>
</html>

There is no styles for bootstrap in the header section. Please help me. I am stuck

Stop the application and start it again on terminal. Changes in .angular-cli.json will be applied after restarting process. — Efe
– Efe, Commented Mar 16, 2018 at 8:31
You don't have to import both bootstrap.min.css and bootstrap.css. bootstrap.min.css is just the minified version of bootstrap.css. Although i'm aware that's not going to solve your problem... — M3enjamin
– M3enjamin, Commented Mar 16, 2018 at 8:36
i have done both because the minified version is also not working as you can see up in the view source above. i have started the application multiple times. — Ankit Kathait
– Ankit Kathait, Commented Mar 16, 2018 at 9:11
@AnkitKathait try removing bootstraps css entry in /angular-cli.json and add @import "node_modules/bootstrap/scss/bootstrap"; to style.scss in our angular project — user1608841
– user1608841, Commented Mar 16, 2018 at 10:00
in case you are not using .scss then you should actually try. Its awesome ! — user1608841
– user1608841, Commented Mar 16, 2018 at 10:01

Nitin · Accepted Answer · 2020-03-07 07:22:47Z

1

Try This, add your style bootstrap.min.css to style.css

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

answered Mar 7, 2020 at 7:22

Nitin

5984 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Digvijay ManeDeshmukh · Accepted Answer · 2018-03-16 13:12:06Z

0

"./../node_modules/bootstrap/dist/css/bootstrap.css", ./../node_modules/bootstrap/dist/css/bootstrap.min.css",

use same like this

answered Mar 16, 2018 at 13:12

Digvijay ManeDeshmukh

16

Comments

Mojtaba Nava · Accepted Answer · 2019-09-19 20:06:39Z

0

Add your style bootstrap.min.css to style.css main:

@import "../src/css/bootstrap.min.css";

answered Sep 19, 2019 at 20:06

Mojtaba Nava

9087 silver badges18 bronze badges

Collectives™ on Stack Overflow

Unable to add bootstrap in angular

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related