Bootstrap not working properly in angular project

user_9122748 0
Viewed 4415

It's the first time I am creating an Angular project. I'm having trouble with bootstrap in my project. I installed bootstrap, jquery, popper.js, and included them in the angular.json file. 

"styles": [              
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.css"
],
"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"             
]

Bootstrap classes are working but the dropdowns are not working properly, I think something is wrong with bootstrap.min.js. The dropdown should open after clicking on it: enter image description here

But in my case it is already open: enter image description here

angular-ui-bootstrap angular
4 Answers

There are 3 ways you can use bootstrap in angular

npm install bootstrap --save

  1. In angular.json file add the path of the bootstrap module like: 

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

  2. In index.html file add the bootstrap.css file as an external css.

  3. You can include the bootstrap.css into the style.css or style.scss file like:

    @import "~bootstrap/dist/css/bootstrap.css"

user_131730610

please do this :

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

"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",
   "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
user_161791980
user_12623710

Simply install npm i bootstrap also you can check documentation here

After install Simply add below line in angular.json file under styles array

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

HTML

<div class="container">
    <!-- Content here -->
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
        </li>
    </ul>
</div>

Checkout more dropdown in bootstrap documentation Here

you can check here on Stackblitz

user_116076760
Related