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

Question

This is probably very simple, but the answer seems to be eluding me. I have tried several combinations using navbar-text, but most of them end up putting the text either above or below another navbar item. I would like the text to be located just to the left of the "Sign In" link.
Here is what I have now:
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<a class="navbar-brand" href="#">Sample App</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<div class="nav navbar-nav pull-md-right">
<div class="nav nav-item">
<p class="navbar-text">Signed in as User#1234</p>
</div>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Sign In</a>
</li>
</ul>
</div>
</nav>
That ends up looking like this:
Many thanks in advance.

Answer 1

I think it is because of the div block here:
<div class="nav nav-item">
<p class="navbar-text">Signed in as User#1234</p>
</div>
A div is always displayed as a block element and thats the reason why it will start a new line below the div block. If you put the item as a part of the list tag then it should work. For example:
<div class="nav navbar-nav pull-md-right">
<ul class="nav navbar-nav">
<li class="nav-item">
<p class="navbar-text">Signed in as User#1234</p>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign In</a>
</li>
</ul>
</div>