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.
Related
This question already has answers here:
Disable responsive (mobile) navbar in Bootstrap
(2 answers)
Closed 1 year ago.
I tried to make a responsive bootstrap navbar but not to collapse it. I want the item in navbar still stay in line even on small screen.
Here is my current navbar:
<nav id="topbar" class="navbar navbar-expand-sm bg-primary navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active d-flex align-items-center">
<a class="nav-link" href="#"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-flex align-items-center">
<a class="nav-link" href="#"><span class="tobar-text">Brand</span></a>
</li>
</ul>
<ul class="navbar-nav ">
<li class="nav-item">
<a href="#" class="nav-link d-flex align-items-center">
<span class="tobar-text">Link 1</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link d-flex align-items-center">
<span class="tobar-text">Link 2</span>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
Contact Us
</li>
<li class="nav-item">
About Us
</li>
</ul>
</nav>
I have tried to set margin, padding, and whatever, but still it did not help. The items in navbar still fall into new line, I don't know why. Please kindly help. Thanks
The items in navbar goes to new line is because of flex-direction: column. You can use the flex utility as below.
<ul class="navbar-nav d-flex flex-row">
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>
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"
]
I have a button (class="navbar-toggler"), which collapses and that works fine, but when I click on it, it displays all the menu items (links) on the left hand side, and it looks terrible!!!
I need to move the menu item links to the right...I've tried everything I could find here...but nothing makes the menu items (links) move to the right...
Can anyone help me solve this?
This is the code:
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Hello All</a>
<button class="navbar-toggler" data-toggle="collapse" datatarget="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<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>
</ul>
</div>
</div>
</nav>
Many thanks for your help!!!
You can use the "text-right" class on the "navbar-nav":
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Hello All</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto text-right">
<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>
</ul>
</div>
</div>
</nav>
try adding the class "navbar-right" to your nav code
or you can also try
margin-left: auto;
Have you thought about using a menu like pushy? You can have the menu on either the left or right & it's easily changed if needed :)
https://chrisyee.ca/pushy/
Below is my code for bootstrap 4
<nav class="navbar navbar-collapse navbar-toggleable-md navbar-light bg-faded ">
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link " >
<span class="icon icon18 icon-upload"></span>
Input Data From Prior Month
</a>
</li>
<li class="nav-item">
<a class="nav-link " >
<span class="icon icon18 icon-excel-file"></span>
Export to Excel
</a>
</li>
</ul>
<span class="navbar-text color-blue">
*Data Automatically pulled from sources
</span>
</div>
</nav>
there are various examples given for bootstrap 3 here
How do you decrease navbar height in Bootstrap 3?
but none of them seem to work for bootstrap 4, can anyone help with this one?
Decreasing the Navbar height is easier in Bootstrap 4 using the spacing utils. The height of the navbar comes from padding in the Navbar contents.
Just use py-0 in the nav-link and navbar-text..
<nav class="navbar navbar-collapse navbar-toggleable-md navbar-light bg-faded ">
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link py-0">
<span class="icon icon18 icon-upload"></span> Input Data From Prior Month
</a>
</li>
<li class="nav-item">
<a class="nav-link py-0">
<span class="icon icon18 icon-excel-file"></span> Export to Excel
</a>
</li>
</ul>
<span class="navbar-text py-0 color-blue">
*Data Automatically pulled from sources
</span>
</div>
</nav>
The py-0 class sets padding-top:0;padding-bottom:0 on the items.
Bootstrap 4 Navbar Shrink Height
If anyone like changing CSS to get the same result, try this method. In my case I have just changed the .navbar min-height and the links font-size and it decreased the navbar.
For example:
.navbar{
min-height:12px;
}
.navbar a {
font-size: 11.2px;
}
And this also worked for increasing the navbar height.
This also helps to change the navbar size when scrolling down the browser.