For example I have a navbar with the following links :
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Register <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Business Owner's Learn More</a>
</li>
<li id="login" class="nav-item ">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
All of these currently align to the left, but I would like to place the #login link to the right, is this possible with bootstrap? Should I be using something else such as flex box, grid, etc... ?
As with most things in CSS, there are dozens of way to do this. For starters, you can give #login a css property of float: right;. More on float here.
Another newer way would be to use flexbox. In this case, it would look something like adding display: flex; on the parent, followed by justify-content: space-between;. Here's a great guide to flexbox.
Here's a stack overflow question on aligning text the Bootstrap way.
Add d-flex class on ul and align-self-end on the li that you want to align to the right.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<ul class="navbar-nav mr-auto d-flex">
<li class="nav-item active">
<a class="nav-link" href="#">Register <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Business Owner's Learn More</a>
</li>
<li id="login" class="nav-item align-self-end">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
OR
Add text-right class to the required li
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Register <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Business Owner's Learn More</a>
</li>
<li id="login" class="nav-item text-right">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
Related
I am trying to create a navbar in Bootstrap where the Brand is on the left and the links are on the left, center and right. However, none of the examples from the answered Bootstrap navbar alignment question appear to do what I am trying to accomplish.
Here is an example of the navbar I am trying to create:
I have tried applying mx-auto to the center links but that does not center the links to the viewport correctly. Using position: absolute and transform: translateX(-50%) on the center links seem like a hacky solution and shouldn't be used if there is a flexbox solution available (especially if you are using an older version of Chrome where transforming text can make it blury).
This is my code currently (it is copied directly from example 3 of the previously linked examples). I want to add links to the left side after the brand while still being able to collapse everything in the navbar.
<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center">
Navbar 3
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//codeply.com">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
</ul>
</div>
</nav>
How can I add links to the left side after the brand while keeping the other links in the example in the correct positions on the center and right?
Try this code , It'll work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center">
Navbar 3
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-left">
Navbar 3
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//codeply.com">Codeply</a>
</li>
</ul>
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//codeply.com">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
Tried to find the solution for RWD to header section using boostrap but not working for ipad and phone.I want to show logo and menu and nav cart for responsive.How to achive to get the solution.
<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-dark bg-dark mb-5">
<a class="navbar-brand" href="#" routerLink='/products'><img width="50" height="50" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROSGhNugPi-wkkvEePwHNppt8AaZRlUk-y9yEapagLNUaXxy_G" class="logo mr-2" /></a>
<div class="navbar-expand mr-auto">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" routerLink='/home'>Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink='/service'>Service</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink='/about'>About</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink='/contact'>Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink='/test1'>test1</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink='/test2'>test2</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink='/test3'>test3</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink='/test4'>test4</a>
</li>
</ul>
</div>
<div class="navbar-expand ml-auto navbar-nav">
<div class="navbar-nav">
<a class="nav-item nav-link" href="https://github.com/beeman" target="_blank">
<i class="fa fa-github"></i>
</a>
<a class="nav-item nav-link" href="https://twitter.com/beeman_nl" target="_blank">
<i class="fa fa-twitter"></i>
</a>
<a class="nav-item nav-link" href="https://medium.com/#beeman" target="_blank">
<i class="fa fa-medium"></i>
</a>
</div>
</div>
</nav>
Demo:https://stackblitz.com/edit/tutorial-angular-cli-v6-styling-bootstrap-ywyjmv?file=src/app/ui/header/header.component.html
I have a question regarding navbars. I want to highlight a navbar item when I clicked an item but I don't know if I need to use angular or css for that. Can you guide me a little bit, please?
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a routerLink="/tasks" class="nav-link" href="#">Tasks</a>
</li>
<li class="nav-item">
<a routerLink="/newTask" class="nav-link" href="#">New task</a>
</li>
<li class="nav-item">
<a routerLink="/users" class="nav-link" href="#">Users</a>
</li>
<li class="nav-item">
<a routerLink="/newProject" class="nav-link" href="#">New Project</a>
</li>
</ul>
</div>
You can use routerLinkActive which will add a css class that you can use for styling. So in the following code if the current route is /newProject the list item will be styled according to your active css class:
<li routerLinkActive="active">
<a routerLink="/newProject" class="nav-link" href="#">New Project</a>
</li>
More information on routerLinkActive here.
I am using the latest bootstrap version in angular. The class "nav nav-pills nav-justified" not stacking the tabs when the screen size is reduced below 768px.
I referred to the site http://jsfiddle.net/koala_dev/73rNv/. which is in the post. In stack overflow I followed Justify Nav-pills with Bootstrap v4 but it does work too
This is my HTML code
<div class="container">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" routerLink="/">Feeds</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/status-update']">Status Update</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/goal-setting']">Goal Setting</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/meet-up']">Meet up</a>
</li>
</ul>
</div>
I can't understand why it works in http://jsfiddle.net/koala_dev/73rNv/ here and the same code fails in my case. Please advice.
On analysis we find that:
The Bootstrap version in http://jsfiddle.net/koala_dev/73rNv/ is 3.1.1
The Bootstrap version from the stackoverflow example was unknown (post was dated 2015), but there was an update which referred to this page
we see that classes nav-pills nav-fill are available in BS4... to get the pills from the navigation on their each separate line, we can write some CSS ourselves
working snippet on Bootstrap 4.3.1 below:
#media screen and (max-width: 768px) {
.nav-fill .nav-item {
width: 100% !important;
flex-basis: unset !important;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid">
<ul class="nav nav-pills nav-fill">
<li class="nav-item ">
<a class="nav-link active" href="#">Active</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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
I need to have a navbar with elements to the right, and to the left.
I got this working but the items that are on the left (sign up, login to the left) are not positioned to the most left.
How can I achieve something similar to what this page has?
https://www.stickermule.com/
Desire result:
What I have:
Code:
<nav class="navbar navbar-expand-md navbar-dark fixed-top navbar-bg">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Stickers <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Etiquetas</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Magnetos</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Pines</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Pines</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Empaques</a>
</li>
</ul>
<ul class="navbar-nav mr-auto navbar-right">
<li class="nav-item active">
<span class="glyphicon glyphicon-globe"></span>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">LogIn</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Registro</a>
</li>
</ul>
</div>
</nav>
Bonus:
I'm trying to render a gliphycon icon as a nav item but it doesn't show in navbar. why?
Take a look at Bootstrap 4 documentation on navbars as you used some wrong class names. Check the rest for better understanding of bootstrap features. Bootstrap 4 is different in many ways from Bootstrap 3. You used some classes that don't work in new version. So again: check the docs :)
Remember that only 1 nav-item element should also have class active.
About the icons:
Bootstrap doesn’t include an icon library by default, but we have a handful of recommendations for you to choose from. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.
Here I used FontAwsome
<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md fixed-top bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Stickers <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Etiquetas</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Magnetos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pines</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pines</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Empaques</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link"><i class="fas fa-shopping-cart"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LogIn</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Registro</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>