bootstrap css are not working properly

[snajperek130]

I have done everything exactly as it is said on a github and css are not working properly. The formatting is changing, but not properly. I did like this:

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

What is more when i paste to index.html
<link data-require="bootstrap-css@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css"/>

it is working. What is the reason of this bug?

[peterblazejewicz]

Do you mean order in which CSS rules are applied? In above configuration the styles.css rules are meant to modify Bootstrap styles.

[snajperek130]

like this is still not working:

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

[ninj]

perhaps you could post the content of your package.json file?

[DavideViolante]

This project has Boostrap working: https://github.com/DavideViolante/Angular2-Full-Stack
Check how the import is done in angular-cli.json

[filipesilva]

@snajperek130 if you followed the instructions on https://github.com/angular/angular-cli#global-library-installation, they refer to Bootstrap 4. You seem to be trying to use Bootstrap 3, and might need to adjust your steps to account for that.

[crsepulv]

Hi, trying to install Bootstrap v4.0.0-beta I have the same problem, there is a way to debug this? because I have no error on the console. Bootstrap is inside styles.bundle.js but it is not loaded as css.

and I'm using:
@angular/cli: 1.0.1
node: 6.7.0
os: win32 x64
@angular/common: 4.3.6
@angular/compiler: 4.3.6
@angular/core: 4.3.6
@angular/forms: 4.3.6
@angular/http: 4.3.6
@angular/platform-browser: 4.3.6
@angular/platform-browser-dynamic: 4.3.6
@angular/router: 4.3.6
@angular/cli: 1.0.1
@angular/compiler-cli: 4.3.6

I'll appreciate any hint to debug this.

[filipesilva]

@crsepulv can you give me detailed steps in a new project to see what you're seeing please? In dev builds global styles are built as .js (but loaded correctly) to improve rebuild speed.

[vatansoni89]

@filipesilva Could u plz check why the bootstrap is not working properly for
https://github.com/vatansoni89/SaraswatiVidhyaMandir
but working for
https://github.com/DeborahK/Angular-GettingStarted

Both are very same but

For me it's not woking properly and very frustreated.

The second snap have big font and not proper as first one.

[kondasMajid]

I tried working with bootstrap 3.3.7 on my angular 6 projects sounds good but very terrible with the responsiveness , probably Angular got some issue with Bootstrap ..

[eranimeshmishra]

I had the same issue with bootstrap 4 not working on Angular 7 application. Fixed this by uninstalling bootstrap 4->installed bootstrap 3-> Added bootstrap.css, bootstrap.js to styles and scripts array in angular.json file like following:

"styles": [

          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/font-awesome/css/font-awesome.min.css",
          "src/styles.css"
        ],
        "scripts": [
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

And it worked. I think it might work with bootstrap 4 as well using this way.

[mansieesingh]

I am also facing exactly the same issue right now ...

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}