Menu
I'm new to bootstrap and in my application I want to have a navbar at the top of the page. The navbar should contain the brand name and then to the right of it it should have some options. But whenever I use navbar-right it doesn't work and the page I get looks like this
As you can see everything is squashed together with the brand name on the left hand side. What I have tried to fix this is by using pull-right which does work perfectly but I want to know why navbar-right isn't.
homeTemplate.html
<body>
<nav class="navbar navbar-default">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">MyApp</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Profile</a></li>
<li><a href="#">Notifications</a></li>
<li><a href="#">Messages</a></li>
<li><a href="#">Options</a></li>
</ul>
</div>
</div>
</nav>
</body>
850
The other way to align the navbar items to right is to use the space utility class. Use .ms-auto class within .navbar-nav class to align the nav items to right.
The Bootstrap 5 Navbar is used to add Navigation links to the web page. The navbar can be added with buttons and links to navigate through pages. Also, it has .navbar-brand class to add company or product name. By default, the Bootstrap 5 navbar components are aligned to the left.
[Bug] Bootstrap 4: Dropdown menu is not right-aligned when inside nav.navbar. · Issue #24312 · twbs/bootstrap · GitHub Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement.
In this case this might be the problem ml-auto was assigned to the element inside the collapsible container that itself sticks to the left of the navbar. Adding .justify-content-end to the collapse container does the job. Yes, try to add class '.justify-content-end' to this element. Hi Mateusz Many thanks, that worked a treat. Ken
I think you might have missed some library.
See the given below snippet I have added
Jquery library
bootstrap.js and
bootstrap.css
Its working fine. see the below snippet
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">MyApp</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Profile</a></li>
<li><a href="#">Notifications</a></li>
<li><a href="#">Messages</a></li>
<li><a href="#">Options</a></li>
</ul>
</div>
</div>
</nav>There might be a version issue. For Bootstrap version 4, Use <ul class="nav navbar-nav ml-auto"> for moving element to the right.
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
