This question already has answers here:
Bootstrap 4 Navbar doesnt collapse in Angular4
(4 answers)
Closed 3 years ago.
I am using this code example to implement a collapsible navbar using Bootstrap 4 in an Angular project.
Bootstrap was installed using npm along with Popper and jQuery. Versions:
angular/core: 8.2.5
angular/cli: 8.3.3
bootstrap: 4.3.1
popper: 1.0.1
popper.js: 1.15.0
jquery: 3.4.1
As shown below in the screenshot, decreasing the window size collapses the navbar and shows the hamburger button. However the hamburger button does nothing No errors are logged in the console.
Here is my code for the navigation:
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">chumiest bucket</a>
<button class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsingNavbar"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsingNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
The answers I've come across all stem from not having the proper CDN link (which I'm not using); the method I'm going with may not be correct.
What Worked
add Popper, Bootstrap and jQuery JavaScript files to angular.json "scripts" list like this:
...
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/popper.js/dist/umd/popper.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"
]
Related
I am copy and pasting the bootstrap documentation navbar https://getbootstrap.com/docs/5.0/components/navbar/ directly into a react component:
export default function Navbar() {
return (
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
Navbar
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto">
<li class="nav-item active">
<a
class="nav-link"
href="#"
data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show"
>
Home
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#"
data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show"
>
Link
</a>
</li>
<li class="nav-item">
<a
class="nav-link disabled"
href="#"
data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show"
>
Disabled
</a>
</li>
</ul>
</div>
</div>
</nav>
);
}
The Navbar displays correctly when previewed and expands when clicked correctly, but when I click the toggle again it does not collapse. When inspecting the element and clicking I see this change:
<div class="collapse **collapsing**" id="navbarSupportedContent">
but nothing changes on my page. I have bootstrap 5.2 installed locally and am able to use other bootstrap features on my page. Other collapses work fine as well. What am I missing?
Bootstrap depends on its JS for some functionality. Have you imported the JS bundle (preferably in your global app file)? If not, please do. If you have, then consider using ReactStrap which is optimized for react.
https://reactstrap.github.io/
Make sure that you already have imported all the dependencies. Some components require JavaScript plugins and Popper to work properly.
Read more about this: https://getbootstrap.com/docs/5.0/getting-started/introduction/
Also https://getbootstrap.com/docs/5.0/getting-started/introduction/#components for more specific components that require those plugins.
This question already has answers here:
Bootstrap 5 navbar align items right
(13 answers)
Closed 1 year ago.
I have tried this code but still haven't got signup and login links at right side of page
I have used mr-auto,ml-auto and even justify-content-end, none of them work
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
pUpe
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navNav1" aria-controls="navNav1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navNav1">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
<ul class="navbar-nav justify-content-end">
<li class="nav-item"><a class="nav-link" href="#">Sign Up</a></li>
<li class="nav-item"><a class="nav-link" href="#">log In</a></li>
</ul>
</div>
</div>
</nav>
Try putting ms-auto class on the <ul> holding "Sign Up" and "Log In".
So change:
<ul class="navbar-nav justify-content-end">
to <ul class="navbar-nav ms-auto">
Apparently in Bootstrap 5 some of the spacing utility names were changed. ms-auto stands for "margin-start: auto". This answer has a great cheat sheet.
Just a note for the future: to use flex classes like justify-content-end, you'll need to use d-flex class to make the element a flex item. But you want the flex element to be the parent of the item you want to align: so above you'd probably want your flex element to be the <div> that contains the two navbar elements.
It's very similar to this question: bootstrap4 nav not working properly which doesn't seem to be resolved.
I was moving my app from Angular 4 to Angular 5, in the process of "npm update", I moved to "bootstrap": "4.0.0-beta.2", the NavBar Brand is now right aligned. And no matter how wide screen is, the items are collapsed.
To sort out this issue. I actually did ng new nav-app. So brand new application is created.
I then intalled Bootstrap, Jquery, Popper as mentioned in this article: http://colinstodd.com/blog/post/how-to-install-bootstrap-4-beta-in-angular-4-as-a-dependency
here is my angular-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/jquery.min.js",
"../node_modules/popper.js/dist/umd/popper.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.bundle.js"
],
And I put the Nav Bar example in the official Bootstrap website: https://v4-alpha.getbootstrap.com/components/navbar/ into app.component.html
<nav class="navbar navbar-toggleable-md navbar-dark bg-dark">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</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>
</nav>
And the result looks like this:
1. The toggle (hamburger icon) works when I click on it. But the position is reversed, and doesn't matter how wide the browser window is, the hamburger icon doesn't expand.
I think the bootstrap.css is definitely working fine, since I made a button, and it has the proper bootstrap colors.
Question: how do I control when the hamburger icon appears or not? (when screen is wide, the Nav items should be shown without hamburger icon.)
And can someone explain what happened with the Beta Bootstrap? My code used to work with previous version of Bootstrap, including 4 Alpha.
My production code Nav Bar displays all Nav items correctly when screen is wide enough to show all. And it collapse at the right time. I'm trying to figure out is this a Angular 5 issue or actually Boostrap decided to go from 4 Alpha to 4 Beta and decided to completed change their css class positions.
The navbar-expand-* class is what you are missing.
Try adding navbar-expand-lg.
The documentation is here:
https://getbootstrap.com/docs/4.0/components/navbar/
The alpha version is hopelessly outdated!
P.S. Bootstrap 4 beta 3 is the most recent version of Bootstrap 4. The next release will be Bootstrap 4 final.
I am working on an Angular application and have installed Bootstrap using Bower. On my index.html file I have the bootstrap js and css files, both minified.
When I view my app in a browser the navbar is not displaying as expected. Here is the code for the navigation bar I have on my page.
<nav class="navbar navbar-inverse bg-inverse navbar-expand-md fixed-top">
<a class="navbar-brand" href="home">Akeva</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="companies">Companies</a>
</li>
</ul>
</div>
The CSS adds the background colour and the menu items align horizontally but the rest of the navigation does not look how it should.
Here is how the navigation is appearing:
how the menu is display
Any ideas on why the Bootstrap nav is not appearing as expected?
How can I get always display the mobile menu button no matter screen size? I do not want the links to appear until a person clicks the mobile button. Thank you!
I realize there is a post here on Bootstrap 3, however it does not work with Bootstrap 4. Will you please advise?
Update Bootstrap 4.1.x
Exclude the navbar-expand* class.
As of beta, the navbar-toggleable-* class was replaced with navbar-expand-*, but now everythings moves up a tier. Since the default state of the navbar is always collapsed/mobile (xs) you'd simply exclude the navbar-expand-* class so that the menu is always collapsed on all tiers.
Beta demo: https://www.codeply.com/go/HiMQd9taEd
Bootstrap 4.1.3: https://www.codeply.com/go/ugmj6XKY79
Original Answer (Bootstrap 4 alpha)
In Bootstrap 4 the navbar is very different than 3.x, and it is always collapsed unless overriden by one of the navbar-toggleable-* classes. You just need to make sure your navbar doesn't include navbar-toggleable-*.
<nav class="navbar navbar-fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="navbar-collapse collapse" id="collapsingNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Wow</a>
</li>
</ul>
</div>
</nav>
Alpha demo: http://www.codeply.com/go/LN6szcJO53