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">.
Related
<nav class="navbar navbar-expand-sm navbar-light">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
About
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
gallery
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
order
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
contact
</a>
</li>
</ul>
</div>
</nav>
I can't center the nav-items. It would align to the right even when I put mx-auto. I tried margin-left but then it wouldn't be responsive. It would only center navbar-nav but not the item inside of them. How would I fix this? Thank you
You can these classes,
text-center or container-fluid or use flex box flex justify-center
You can use "display: flex" and "justify-content: center" which might help you to solve this issue. If you want to align the text, you can use "text-align: center".
Im trying to build a progressive web-app with Angular and Bootstrap. The most challenging part is to implement a navbar that looks good on the web and on the mobile view. For the most part I'm pretty happy with my implementation so far. See Link on Stackblitz
But now I am trying to toggle the navbar as a Sidebar, that opens up from the right to the left. Additionally the sidebar should push the content (Placeholder-Text) to the left. This could be kind of tough, because that perhaps means modifying some Bootstrap classes. Maybe some of you have a solution for this. Currently my navbar toggles the links underneath.
html
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="navbar-brand d-none d-md-block" href="javascript:void(0)">
<img alt="logo" src="https://..." width="40px" height="auto">
My Brand
</a>
</li>
</ul>
<ul class="navbar-nav mr-auto mr-md-3">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="javascript:void(0)">Stories</a>
</li>
</ul>
<ul class="navbar-nav mr-auto mr-md-3">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">
<span>
<img class="rounded" src="https://..." alt="user" width="35" height="35">
<span class="d-none d-lg-inline"> Tommy</span>
</span>
</a>
</li>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="javascript:void(0)">
<div class="img-container" (click)="notificationsViewed = true">
<img alt="notifications" src="https://..." width="35">
<span [hidden]="notificationsViewed" class="badge badge-danger notifications-count">{{3}}</span>
</div>
</a>
</li>
</ul>
<button class="navbar-toggler" (click)="toggleNavbar()" type="button" [attr.aria-expanded]="!isCollapsed">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<div class="collapse navbar-collapse" [ngClass]="{ 'show': isCollapsed }">
<ul class="navbar-nav float-right ml-auto">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="javascript:void(0)">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold"href="javascript:void(0)">Policy</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" href="javascript:void(0)">Contact</a>
</li>
<li class="nav-item">
<button (click)="logout()" class="btn btn-bd-logout">
Logout
</button>
</li>
</ul>
</div>
</nav>
Typescript
public isCollapsed: boolean = false;
toggleNavbar() {
this.isCollapsed = !this.isCollapsed;
}
I didn't understand second part the sidebar should push the content (Placeholder-Text) to the left.
But for the first part for Sidebar try using Angular Material Navigation Option :
Angular Material Sidenav
I'm just starting to get to grips with bootstrap.
I'm trying to create a vertical-navbar on the left of the page after the user has scrolled past the full-page 'intro' using bootstrap 4. The code below produces the navbar on the left side of the page, however there is a problem with it
The navbar stays in a collapsed state, even after resizing the window small and large again
Why does the code cause the navbar to start closed?
Thanks, Jeff
<header id="home" class="jumbotron h-100vw w-100vw">
...
</header>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<nav class="navbar navbar-expand-md navbar-light">
<a class="navbar-brand" href="#home">
<img src="img/logo.png" class="img-fluid" alt="Home">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse-md flex-column" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about"></a>About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">My Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#connect">Stay Connected</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get In Touch</a>
</li>
</ul>
</div>
</nav>
</div>
<main class="col-md-10">
REST OF MY CONTENT ON THE RIGHT
</main>
</div>
There is no navbar-collapse-md class. Change it to just navbar-collapse.
<div class="collapse navbar-collapse flex-column" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about"></a>About Me
</li>
<li class="nav-item">
<a class="nav-link" href="#work">My Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#connect">Stay Connected</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get In Touch</a>
</li>
</ul>
</div>
I am using Bootstrap 4 and I am trying to make the menu that pops up by clicking the collapse button to open on the right side instead of the left. I have tried using "ml-auto" on the "ul" element. The navbar items are correctly on the right side when it isn't collapsed. When it is collapsed, the button is correctly on the right side but the menu pops up on the left. I have also tried putting "ml-auto" in the div as well but that didn't work. Here is my HTML:
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<a class="navbar-brand" href="#home"><img id="logo" class="no-opacity" src="content/white-logo.png"></a>
<button class="navbar-toggler ml-auto" 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 ml-auto">
<li class="nav-item">
<a class="nav-link" href="#home"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about"><i class="fa fa-user fa-fw" aria-hidden="true"></i> About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects"><i class="fa fa-folder-open fa-fw" aria-hidden="true"></i> Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#experience"><i class="fa fa-briefcase fa-fw" aria-hidden="true"></i> Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact"><i class="fa fa-envelope fa-fw" aria-hidden="true"></i> Contact</a>
</li>
</ul>
</div>
</nav>
I feel like there is a simple solution but I can't figure it out.
Just add simple rule to your css.
.nav-item{
text-align: right;
}
According to http://getbootstrap.com/docs/4.0/components/navs/#horizontal-alignment, the way to center, right-justify, or left-justify things in the navbar's collapsed dropdown is to use justify-content-end and friends in the class of a nav.
Example. This code yields the image following it.
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<ul class="list-inline social-buttons">
{% for link in site.social %}
<li class="list-inline-item">
<i class="{{ link.icon }}"></i>
</li>
{% endfor %}
</ul>
<div class="navbar-toggler" data-toggle="collapse" data-target="#menu">
☰<!-- three bars symbol -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="menu">
<ul class="nav ml-auto">
<a class="nav-link page-scroll" href="#about">About</a>
<a class="nav-link page-scroll" href="#projects">Projects</a>
<a class="nav-link page-scroll" href="#writing">Writing</a>
<a class="nav-link page-scroll" href="#contact">Contact</a>
</ul>
</div>
</div>
</nav>
Now amending that one line to:
<div class="nav ml-auto justify-content-end">
yields
Note this evidently has nothing to do with ml-auto, which when missing causes the uncollapsed menu items (on a wider screen) to not be right-justified. (The toggler button itself is always right justified for me.) Only justify seems to control the stuff in the uncollapsed menu.
Just use "text-right" in HTML
For example:
<div class="navbar-collapse text-right" id="navbarResponsive">
Most of the examples I found just hide everything except for the brand-logo and just show one toggle icon. But I want multiple icons on small screens but at the moment they wrap on xs size even if they have enough space.
I also replace the bigger icons by smaller icons now, but as it's not the missing space I guess, this does not help either.
The brand-logo and the two icons simply should be in the same line. Can someone please push me in the right direction. You have to run the code-snippet in an own window to make it small enough (problem is just on xs size).
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-48 { font-size: 48px; }
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<header class="header">
<nav class="navbar navbar-light navbar-toggleable bg-faded justify-content-center">
<!--Logo-->
<a class="navbar-brand mr-auto" href="/" title="logo">
<span>logo-img</span>
</a>
<!--
the centered links in the header (only visible on bigger screens)
-->
<ul class="navbar-nav mx-auto justify-content-center hidden-sm-down">
<li class="nav-item">
<a class="nav-link" href="#">link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">login</a>
</li>
</ul>
<!-- the icons on the right (xs screens)
The two (and maybe more) icons SHOULD NOT WRAP
-->
<ul class="nav navbar-nav ml-auto justify-content-end hidden-sm-up">
<li class="nav-item">
<a class="btn">
<i class="material-icons md-24" style="">mail_outline</i>
</a>
</li>
<li class="nav-item">
<a class="btn">
<i class="material-icons md-24">favorite</i>
</a>
</li>
</ul>
<!-- the icons on the right (bigger devices) -->
<ul class="nav navbar-nav ml-auto justify-content-end hidden-xs-down">
<li class="nav-item">
<a class="btn">
<i class="material-icons md-48" style="">mail_outline</i>
</a>
</li>
<li class="nav-item">
<a class="btn">
<i class="material-icons md-48">favorite</i>
</a>
</li>
</ul>
</nav>
</header>
You can use flex-row in the navbar and navbar-nav to prevent it from stacking vertically on xs screens..
https://www.codeply.com/go/beHGmETlkM
<header class="header">
<nav class="navbar navbar-light navbar-toggleable bg-faded justify-content-center flex-row">
<!--Logo-->
<a class="navbar-brand mr-auto" href="/" title="logo">
<span>logo-img</span>
</a>
<!--
the centered links in the header (only visible on bigger screens)
-->
<div class="navbar-collapse collapse">
<ul class="navbar-nav mx-auto justify-content-center hidden-sm-down">
<li class="nav-item">
<a class="nav-link" href="#">link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">login</a>
</li>
</ul>
</div>
<!-- the icons on the right (xs screens)
The two (and maybe more) icons SHOULD NOT WRAP
-->
<ul class="nav navbar-nav ml-auto flex-row justify-content-end hidden-sm-up">
<li class="nav-item">
<a class="btn">
<i class="material-icons md-24" style="">mail_outline</i>
</a>
</li>
<li class="nav-item">
<a class="btn">
<i class="material-icons md-24">favorite</i>
</a>
</li>
</ul>
<!-- the icons on the right (bigger devices) -->
<ul class="nav navbar-nav ml-auto justify-content-end hidden-xs-down">
<li class="nav-item">
<a class="btn">
<i class="material-icons md-48" style="">mail_outline</i>
</a>
</li>
<li class="nav-item">
<a class="btn">
<i class="material-icons md-48">favorite</i>
</a>
</li>
</ul>
</nav>
</header>
https://www.codeply.com/go/beHGmETlkM