justify-content,mr-auto, editing via css and etc doesn't work and items don't align
Here's my code
<nav class="navbar navbar-expand-sm bg-light shadow">
<ul class="navbar-nav mr-auto">
<li class="navbar-text">Политех
</li>
<li class="nav-item">
<a class="nav-link" href="https://agpk.kz"> Вернуться на сайт </a>
</li>
<li class="nav-item">
<a class="nav-link" href"/login"> Войти </a>
</li>
</ul>
</nav>
I suppose that you want to have your <li> centered in the middle of your navbar?
If it's the case, you can turn it into a d-flex with a width of 100% of the parent element and align it with justify-content-:
<ul class="navbar-nav mr-auto d-flex justify-content-center w-100">
Related
I am creating a navbar for my page with the help of bootstrap. I have used <li> tags but I am not sure why the items are not quite on the same line. Please review the below code:
<nav class="navbar navbar-expand-lg">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<i class="fa-solid fa-chevron-right"></i>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CATEGORY </a>
</li>
</ul>
</nav>
Here's the screenshot of my output:
Use flex box.
For example you have to make navbar which have logo, links, menu Icon
So,
<nav class="d-flex justify-content-between align-items-center">
<div> logo </div>
<div>
<ul class="d-flex justify-content-between align-items-center">
<li>link1</li>
<li>link1</li>
<li>link1</li>
</ul>
</div>
</nav>
For, further more clarification visit: https://getbootstrap.com/docs/4.0/utilities/flex/
I have the following navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarText">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="/">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/depreg">Visualisation région/département</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/reprad">Visualisation garages</a>
</li>
</ul>
<span class="navbar-text">
<i class="bi bi-info-circle" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true"
title="test content">
</i>
</span>
</div>
</div>
</nav>
I would like to align the span tag to the right. According to the documentation, the above should have aligned the span on the right, but it does not.
How can I properly align my span tag on the right of the navbar?
You need to add the ms-auto class to the span to push it to the right.
So <span class="navbar-text"> becomes <span class="navbar-text ms-auto">.
Currently I try to build a Navbar that is responsive. I use Bootstrap for my css. What I want is that: On a small viewport all links but the Navbar-brand is listed within one row. The Navbar on a large viewport looks like this (as expected):
But when I shrink the viewport the Navbar looks like this:
I already managed some viewport configurations, that e.g the username is not displayed on a small viewport. The HTML looks as follows (Btw. I will only show some mocked nav-items, since this is not important for the question:
HTML
<nav class="navbar navbar-expand fixed-top navbar-dark bg-dark flex-column flex-md-row">
<div class="navbar-nav flex-row">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="navbar-brand mr-0 mr-md-2">
<img src="assets/loading-skull.png" width="30px" height="auto">
Scare-me.com
</a>
</li>
</ul>
</div>
<div class="navbar-nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link">Stories</a>
</li>
</ul>
</div>
<div class="mx-auto">
<a class="navbar-brand mx-auto hide-on-small-viewport" href="#">Show your threads!</a>
</div>
<div class="navbar-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link">Log In</a>
</li>
<li *ngIf="!isLoggedIn" class="nav-item">
<a class="nav-link">Sign Up</a>
</li>
<li class="nav-item">
<button class="btn mt-1 mb-3 mb-md-0 ml-md3">Logout</button>
</li>
</ul>
</div>
</nav>
It seems a bit difficult to achieve what you want without drastically changing the whole html structure of your navbar. I am not sure if you are up for that. So I would suggest keeping 2 buttons for "Stories". Show one button in mobile view and the other in desktop view. This will ensure minimal regression impact to your html structure.
Button for desktop views
<ul class="navbar-nav mr-auto d-none d-md-block">
<li class="nav-item">
<a class="nav-link">Stories</a>
</li>
</ul>
Button for mobile view
<ul class="navbar-nav mr-auto d-none d-md-block">
<li class="nav-item">
<a class="nav-link">Stories</a>
</li>
</ul>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand fixed-top navbar-dark bg-dark flex-column flex-md-row">
<div class="navbar-nav flex-row">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="navbar-brand mr-0 mr-md-2">
<img src="assets/loading-skull.png" width="30px" height="auto"> Scare-me.com
</a>
</li>
</ul>
</div>
<div class="navbar-nav">
<ul class="navbar-nav mr-auto d-none d-md-block">
<li class="nav-item">
<a class="nav-link">Stories</a>
</li>
</ul>
</div>
<div class="mx-auto">
<a class="navbar-brand mx-auto hide-on-small-viewport" href="#">Show your threads!</a>
</div>
<div class="navbar-nav">
<ul class="navbar-nav mr-auto d-md-none">
<li class="nav-item">
<a class="nav-link">Stories</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link">Log In</a>
</li>
<li *ngIf="!isLoggedIn" class="nav-item">
<a class="nav-link">Sign Up</a>
</li>
<li class="nav-item">
<button class="btn mt-1 mb-3 mb-md-0 ml-md3">Logout</button>
</li>
</ul>
</div>
</nav>
I can't get the "about me" "contact" and "portfolio" all on to stay on the same line as the my name section, even though they are on the same div. And I can't use positioning because this bootstrap.
How can I solve this?
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid border" style="overflow:visible">
Vamsi Krishna Pappusetti
<ul class="nav row justify-content-end" id="navbar">
<li class="nav-item">
<a class="nav-link " href="#">About Me</a>
</li>
<li class="nav">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
</ul>
</div>
Here's one idea:
I made the container <div> into a nav row, with p-0 and m-0 to clear padding and margins.
I made the "name" link into a nav-link so it's padding is the same as other links.
I set ml-auto on the <ul> to align it to the right side.
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="nav row border container-fluid p-0 m-0">
Vamsi Krishna Pappusetti
<ul class="nav ml-auto">
<li>
<a class="nav-link" href="#">About Me</a>
</li>
<li>
<a class="nav-link" href="#">Contact</a>
</li>
<li>
<a class="nav-link" href="#">Portfolio</a>
</li>
</ul>
</div>
You have to combine "nameBlock" and "navbar" into a row div and use ml-auto (Margin utilities) in Bootstrap 4 to align navbar to end.
Code: https://codepen.io/1412108/pen/BVLRRP
Bootstrap 4 Margin Utilities
When I run this code my image, which is a small picture of myself and my wife is being padded on the right and left side with a thin white line. I can't quite figure out what I'm missing.
Not sure if I'm using the navbar correctly as I'm still trying to figure this stuff out.
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark fixed-top">
<!-- Brand/logo -->
<div class="container col-sm-12">
<a class="navbar-brand" href="#">
<img src="http://dishtruck.com/joe_tn.jpg" alt="logo" <style width ="40px" height = "40px">
</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Social Media</a>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</ul>
</div>