I'm just getting into Angular as well as Bootstrap. I build an Angular project, then added bootstrap to it after the fact (npm install bootstrap) and then tried various bootstrap-features on one of the html-pages. Some of them work, some don't.

The code in the answer to this question, for example: Dismissable alert . The alert is displayed, but when I click the X, it doesn't disappear. Strangely, if I access the exact same HTML-file directly in my browser, rather than via the served Angular-page, the feature works normally.

So where did I install something wrong? Here are some attempts I made, based on various hints off the internet: Here's the relevant part of my angular.json:

    "styles": [
        "input": "./node_modules/bootstrap/dist/css/bootstrap.css"

My styles.css contains:

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

1 Answers

zmag On Best Solutions
  1. Import JavaScript files in the scripts property, not in the styles property.
"scripts": [
  1. Don't import a CSS file twice.
@import "~bootstrap/dist/css/bootstrap.css";