CODEWITHSUNDEEP
angularangular-ui-bootstrap
Nozima Salimova
Nozima Salimova

Reputation: 61

Bootstrap not working properly in angular project

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

Upvotes: 2

Views: 6972

Answers (5)

Shreyas G
Shreyas G

Reputation: 1

If you are following any course, check the bootstrap version used by the instructor. Bootstrap 4 is not same as Bootstrap 5.

specify the version used by the instructor while installing bootstrap. ie.. npm install bootstrap@4 --save

Upvotes: 0

Kiran Mistry
Kiran Mistry

Reputation: 2725

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

Upvotes: -2

amir ahmadpour
amir ahmadpour

Reputation: 21

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"
]

Upvotes: 2

Martin Hauner
Martin Hauner

Reputation: 1733

I recommend to use one of the angular bootstrap libraries that re-implement the bootstrap components with angular and therefore integrate well with the rest of angular. This removes the dependencies on bootstrap javascript & jquery.

Here are two options (no particular order).

Upvotes: 0

Goldi Pandey
Goldi Pandey

Reputation: 61

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"

Upvotes: 4

Related Questions