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?
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.
In Bootstrap 4 within the toggler hamburger menu is active clicking it will show HomeAbout on the one line, not sure why these aren't on separate lines.
Code:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
Example
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav flex-row ml-md-auto d-md-flex">
<li class="nav-item">
Home
</li>
<li class="nav-item dropdown">
About
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Feedback</a>
</div>
</li>
</ul>
</div>
</nav>
Fiddle: https://jsfiddle.net/StoogeMate/qts6gamk/
There's no obvious answer I've been able to find through using Bootstrap itself particularly for the first problem without overriding the .css itself and applying !important tags
Does Bootstrap have this capability?
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.
https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment
Remove dropdown from the About menu item
Wrap the About menu item in a div.btn-group
Use dropdown-menu-right on div.dropdown-menu
<li class="nav-item">
<div class="btn-group">
About
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Feedback</a>
</div>
</div>
</li>
🎁
Remove flex-row to show the menu items on two lines.
<ul class="navbar-nav ml-md-auto d-md-flex">
----
</ul>
I'm having an issue with my Bootstrap v4.5.0 navbar. I want to use a logo as the navbar brand. I want it to be treated exactly as if it were HTML text. However, I can't seem to figure out how to replicate it. Note that my navbar has other items besides just the brand, and that for some reason, the img pushes the "Home" and "New Record" links all the way on the right side of the bar when these 2 items should be directly next to the logo. I've adjusted the padding and other CSS items to try to resolve this with no l When I shrink the window, I want the img to stay the same size, but as of now it shrinks. So, to recap, my 2 issues are: 1. incorrect padding of other navbar links next to logo, and 2. resizing of logo based on window size. I want to make the img behave as close to plain HTML text as possible. Thanks for any assistance! I've attached an image of my page to illustrate some problems. Notice the resizing of the logo as well as the incorrect placement of "Home" and "New Record".
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="/">
<img id="logo" alt="Logo" src="${contextRoot}/img/bcore-bride+AI.png" width=8% height=8% />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">Home</li>
<li class="nav-item">New Record</li>
</ul>
<ul class="navbar-nav ml-auto" style="float: right">
<li class="nav-item"><a class="nav-link" href="${contextRoot}/account">My Account</a></li>
</ul>
</div>
</nav>
The incorrect placement of home and new record is because of you put those into different tag from my account. And use margin left auto so it will get cover all the extra space and push your icon to the right.
I was able to get the desired outcome with the following:
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="/">
<img id="logo" alt="Logo" src="${contextRoot}/img/bcore-bride+AI.png" width="80" height="25" />
</a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">Home</li>
<li class="nav-item">New Record</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="${contextRoot}/account">My Account</a></li>
</ul>
</div>
</nav>
I was able to hard set the logo to a certain pixel size (which I dislike the idea of for reasons of inflexibility). Also, I set ml-auto for the collapsible button and "My Account", and mr-auto for "Home" and "New Record".
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"
]
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