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

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>