How do I add text to navbar in Bootstrap 4? - html

Question

I'm trying to display the username of the logged in user in my application in Bootstrap 4 navbar. However, it's displayed out of vertical alignment with other elements.
Here's the example:
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Brand Name</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Foo</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<span>email#example.com</span>
</li>
</ul>
</nav>
The resulted E-Mail address is displayed top-right, however I want it to be displayed middle-right.

Answer 1

Add the class .nav-link to the span and then style the color of it accordingly like so:
Here is a fiddle Fiddle Demo
.navbar-light .navbar-nav span.nav-link,
.navbar-light .navbar-nav span.nav-link:hover,
.navbar-light .navbar-nav span.nav-link:focus{
color:rgba(0,0,0,0.8);
}
It should look like the following:
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Brand Name</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Foo</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<span class="nav-link">email#example.com</span>
</li>
</ul>
</nav>
Or you can keep your markup and style the span youself whichever you like
.navbar-nav span {
display: block;
padding-top: .425rem;
padding-bottom: .425rem;
}

Answer 2

You have to remove the class pull-xs-right so :
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<span>email#example.com</span>
</li>
</ul>
Should be :
<ul class="nav navbar-nav">
<li class="nav-item">
<span>email#example.com</span>
</li>
</ul>
Or use one ul tag like :
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Brand Name</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Foo</a>
</li>
<li class="nav-item">
<span>email#example.com</span>
</li>
</ul>
</nav>
Hope this helps.

Answer 3

Try navbar-text to li like this
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Brand Name</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Foo</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class=" nav-item navbar-text">
<span>email#example.com</span>
</li>
</ul>
</nav>
see example here