I am trying to add Bootstrap 4 to Angular 7, I see the styles are overridden by bootstrap styles, but navigation bar and dropdown box is not working.
I followed this document to add Bootstrap to Angular 7 project. I have added below code to angular.json
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/popper.js/dist/umd/popper.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.js"
]
Here is code on I have on stackblitz which is not working
Here is simple jQuery Bootstrap example , which works as expected
Some changes needed to your code to make it work... added dropdown
, dropdownToggle
and *dropdownMenu
check the updated/working app.component.html :
<div class="container">
<hello name="{{ name }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
<button type="button" class="btn btn-primary">Primary</button>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown" dropdown>
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" dropdownToggle>
Dropdown link
</a>
<div class="dropdown-menu" *dropdownMenu>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
<div class="dropdown" dropdown>
<button class="btn btn-primary dropdown-toggle" type="button" dropdownToggle >Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" *dropdownMenu>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.