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">
MyApp
</div>
<ul class="nav navbar-nav navbar-right">
<li>Profile</li>
<li>Notifications</li>
<li>Messages</li>
<li>Options</li>
</ul>
</div>
</div>
</nav>
</body>
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">
MyApp
</div>
<ul class="nav navbar-nav navbar-right">
<li>Profile</li>
<li>Notifications</li>
<li>Messages</li>
<li>Options</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.
Try using two Unordered-Lists, one for the nav-brand and the elements you require to be aligned left and then use separate unordered-lists with the "nav navbar-nav navbar-right" class to get the right aligned elements. Check the snippet below.
<nav class="navbar navbar-default navbar-static-top">
<div class="topnav">
<ul class = "nav navbar-nav">
<li><a class="navbar-brand bigbrand" href="{% url 'urls' %}">BRAND name</a></li>
<li><a class="navbar-link" href="{% url 'urls' %}">Home</a></li>
<li><a class = "navbar-link" href="urls">News</a></li>
<li><a class = "navbar-link" href="urls">Contact</a></li>
<li><a class = "navbar-link" href="{% url 'urls' %}">test</a></li>
</ul>
<ul class = "nav navbar-nav navbar-right">
<li>logout</li>
</ul>
</div>
</nav>
Related
I am creating a header where the elements are supposed to be next to each other, but just one element appears in the browser and the others don't, and I wrote the code for them.
I came to the conclusion that the problem is the bootstrap classes I am using because when I inspected the elements in the browser, they appeared gray, like this:
I am using Bootstrap 4, my browser is Firefox and I am not an expert in Angular, so please be considerate.
This is my HTML code
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
Recipe Book
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Recipes</li>
<li>Shopping List</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Manage
<ul class="dropdown-menu">
<li>Save Data</li>
<li>Fetch Data</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
And I added Bootstrap by installing it with npm and then adding this in the angular.json file
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Ok, so I fixed whatever was going on in my project's header. So, it turned out I didn't need to use these classes: navbar-default, navbar-header, collapse, navbar-collapse, and nav. Instead, i added these classes: navbar-expand-sm, bg-light, navbar-light, nav-item, nav-link. The code turned out like this:
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<div class="container-fluid">
Recipe Book
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Recipes</a></li>
<li class="nav-item"><a class="nav-link" href="#">Shopping List</a></li>
</ul>
<ul class="navbar-nav navbar-right">
<li class="nav-item dropdown">
Manage
<ul class="dropdown-menu">
<li class="nav-item">Save Data</li>
<li class="nav-item">Fetch Data</li>
</ul>
</li>
</ul>
</div>
</nav>
I read the usage of the bootstrap navbar by w3schools
This how the project looks so far, the header looks almost exactly like the instructor's, but I am satisfied with it. Sorry for the trouble, and thanks for the insight.
A Bootstrap navbar is typically setup like this:
<nav class="navbar">
<a href="#" class="navbar-brand>Studio58</a>
<ul class="navbar-nav">
<li class="nav-item">L1</li>
<li class="nav-item">L2</li>
</ul>
</nav>
Just curious why the additional unordered list markup, navbar-nav and nav-item classes are necessary / used? Why not just do:
<nav class="navbar">
<a href="#" class="navbar-brand>Studio58</a>
</nav>
I am creating a navbar with Bootstrap, the problem is when I try to put two or more images in the right navigation bar, the height of the bar increases how can i fix it? Thanks!!
<ul class="nav navbar-nav navbar-right">
<li><a href="http://www.youtube.es/"><img src="IMAGENES/youtube.png"/></li>
<li><a href="http://www.twitter.es/"><img src="IMAGENES/twitter.png"/></li>
<li><a href="http://www.facebook.es/"><img src="IMAGENES/facebook.png"/></li>
</ul>
Try like this: Demo
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-left"> <a class="navbar-brand" href="index.php">xxx</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><img src="IMAGENES/youtube.png"/>
</li>
<li><img src="IMAGENES/twitter.png"/>
</li>
<li><img src="IMAGENES/facebook.png"/>
</li>
</ul>
You didn't closed <a> tags .. Check all the tags were closed properly or not..
Log in button on the right side of navbar
<nav class="navbar navbar-inverse">
Klokkebutikk
<ul class="nav navbar-nav">
<li>Herre</li>
<li>Dame</li>
<li>Barn</li>
<li>Logg inn</li>
</ul>
</nav>
Just add the link in another ul below and use the pull-right class
<nav class="navbar navbar-inverse">
Klokkebutikk
<ul class="nav navbar-nav">
<li>Herre</li>
<li>Dame</li>
<li>Barn</li>
</ul>
//add here
<ul class="pull-right nav navbar-nav">
<li>Logg inn</li>
</ul>
</nav>
Example here - http://www.bootply.com/NJ0UqYdKsh
I am looking on how to position my top navigation on the top right.
So far I have this code:
<div id="navbar" class="navbar navbar-fixed-top ">
<ul class="nav navbar-nav">
<li>Contact Us</li>
<li>NL</li>
<li>ENG</li>
</ul>
</div>
But I am not sure how to position it on the top right.
Thanks.
The right way to do this according to bootstrap is using the class navbar-right. Have a look at this link on bootply.
Try the following:
<div id="navbar" class="navbar navbar-fixed-top">
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
<li>NL</li>
<li>ENG</li>
</ul>
</div>
Update. Made a mistake and placed navbar-right on the div instead of the ul. It's fixed now. Also included bootply link.