0

Bootstrap is not working.

Here is the script and style detail:

"styles": [ 
    "node_modules/bootstrap/dist/css/bootstrap.min.css", 
    "src/styles.scss" 
    ],
"scripts": [ 
     "node_modules/jquery/dist/jquery.min.js",
     "node_modules/bootstrap/dist/js/bootstrap.min.js",
     "node_modules/popper.js/dist/popper.min.js"
     ]

Here is the code I tried but it didn't work:

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active">
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Page 1</a>
            </li>
            <li>
                <a href="#">Page 2</a>
            </li>
            <li>
                <a href="#">Page 3</a>
            </li>
        </ul>
    </div>
</nav>

Here is the result I am getting is below:

enter image description here

halfer
  • 19,824
  • 17
  • 99
  • 186
Manas
  • 1
  • 1
  • "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.scss" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js", "node_modules/popper.js/dist/popper.min.js" The above code i already tried.but no result – Manas Jun 30 '23 at 07:33
  • Please share your code as snippet instead of images. Meanwhile, which Bootstrap version you used? v4 or v5? – Yong Shun Jun 30 '23 at 07:33
  • I am not able to edit the question and comment not allow me to post the code as its long – Manas Jun 30 '23 at 07:36
  • Even after i have added script and style bootstrap is not working for me. "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.scss" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js", "node_modules/popper.js/dist/popper.min.js" ] – Manas Jun 30 '23 at 07:36
  • WebSiteName
    – Manas Jun 30 '23 at 07:38
  • What version of bootstrap are you using? The code for your nav-var it's not looks like the examples (looks like your forget add the `class="nav-item"` to the li tags). BTW, if you use Bootstrap 5, the only script you need is `bootstrap.bundle.min.js` **or** `popper.min.js` and `bootstrap.min.js` (rememeber in this last case that Popper must come first) – Eliseo Jun 30 '23 at 08:12
  • The vesion is Bootstrap v5.3.0 , and the code i tried is "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.scss" ], "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ] Still not working – Manas Jun 30 '23 at 08:16
  • Check this bro:https://youtu.be/TIGy3VYsG5g – Therichpost Jun 30 '23 at 08:51
  • https://stackoverflow.com/questions/68081166/bootstrap-5-in-angular-application/68082635#68082635 – Eliseo Jun 30 '23 at 09:18
  • Have you restarted your angular app after adding these styles? When you make a change in angular.json you need to stop and start the app again – hawks Jun 30 '23 at 09:40
  • (1) Please delete all code in the comments above, and add it to the question (if you have not already done so); (2) please clarify all four instances of the phrase "not working" in your question. It doesn't offer a lot of detail about what is not going as expected for you. Could you be more specific? What did you expect? – halfer Jun 30 '23 at 21:54

0 Answers0