Add profile image to bootstrap navbar
<p>I am trying to add a profile image and a logout link to bootstrap side navbar.</p>

<p><a href="https://i.stack.imgur.com/9C6E3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9C6E3.png" alt="current"></a></p>

<p>This is my code so far</p>

<pre><code>  &lt;ul class="nav navbar-nav"&gt;
        &lt;li&gt;
            &lt;div class="img-rounded profile-img"&gt;&lt;/div&gt;
            @Html.ActionLink(User.Identity.GetUserName(), "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="javascript:document.getElementById('logoutForm').submit()"&gt;Log off&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
</code></pre>

<p>I want to center the image and the display the username below the profile image.
This is the css for <code>.profile-img</code> class</p>

<pre><code>.profile-img {
    margin-top: -5px;
    margin-right: 5px;
    float: left;
    background: url('../Images/profile_pic_default.png') 50% 50% no-repeat; /* 50% 50% centers image in div */
    background-size: auto 100%; /* Interchange this value depending on prefering width vs. height */
    width: 30px;
    height: 30px;
}
</code></pre>

<p>Can some please come up with a solution for me?</p>