Styling navbar of bootstrap

Question

I've got a problem for styling my bootstrap navbar. So in my navbar I have :

But I want this in only one line, just :

Essai actuel : kjvfged

My code for my navbar is :

<nav class="nav navbar-default">
        <div class="container-fluid">
            <div class="navbar-header ">

                     <a href="#" class="navbar-brand ">AMG</a> 

            </div>

            <div>
                <ul class="nav navbar-nav navbar-right ">
                    <li><p class="navbar-text"><div class="essaiActuel"></div></p></li>
                    <li><a><div class="session"></div></a></li>
                </ul>
            </div>
        </div>
    </nav>

And I give a content by this way :

$('.essaiActuel').text('Essai actuel : ');

Can someone tell me how I can increase the width of an element in a navbar please ?

Answer 1

<span class="essaiActuel"></span>

CodePen example

Looks like changing the div to span works.

Answer 2

<span class="essaiActuel"></span> should do it

Span will keep everything inline.

<li><p class="navbar-text"><span class="essaiActuel"></span></p></li>