How do I add plain text to a Bootstrap 4 navbar?
<p>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.</p>

<p>Here is what I have now:</p>

<pre><code>&lt;nav class="navbar navbar-fixed-top navbar-dark bg-inverse"&gt;
    &lt;a class="navbar-brand" href="#"&gt;Sample App&lt;/a&gt;
    &lt;ul class="nav navbar-nav"&gt;
        &lt;li class="nav-item active"&gt;
            &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;About&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Contact&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="nav navbar-nav pull-md-right"&gt;
        &lt;div class="nav nav-item"&gt;
            &lt;p class="navbar-text"&gt;Signed in as User#1234&lt;/p&gt;
        &lt;/div&gt;
        &lt;ul class="nav navbar-nav"&gt;
            &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#"&gt;Sign In&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/nav&gt;
</code></pre>

<p>That ends up looking like this:
<a href="https://i.stack.imgur.com/zS97X.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/zS97X.jpg" alt="enter image description here"></a></p>

<p>Many thanks in advance.</p>