Bootstrap 3 Navbar Profile CSS with HTML Example

bootstrap-nav-profile-pic.css

/* Bootstrap 3 Navbar Profile Picture CSS
 *
 * The CSS for profile pictures in the navbar has always annoyed me,
 * so here's my fix that appears to have the least hoops.
 * 
 * Production use:
 *  >Add a div with the specified class. 
 *  >Using JS, change the profile picture CSS URL as needed.
 *
 * HTML example:
 
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="nav-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link<span class="sr-only">(current)</span></a></li>
                <li><a href="#">Another Link</a></li>
            </ul>

            <ul class="nav navbar-nav pull-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <!-- The Profile picture inserted via div class below, with shaping provided by Bootstrap -->
                        <div class="img-rounded profile-img"></div>
                        User Name <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">Settings</a>
                        </li>
                        <li role="separator" class="divider"></li>
                        <li>
                            <a href="#">Log out</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
 
 *
 * Written By: Matt Hartstonge
 * Date Written: 09/07/2015
 */

.profile-img{
    margin-top: -5px;
    margin-right: 5px;
    float: left;
    background: url(example.jpg) 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;
}

For an image that sits more inline with the Text Size/Font Awesome Icon size:

.profile-img{
    margin-right: 5px;
    float: left;
    background: url(example.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
    background-size: auto 100%; /* Interchange this value depending on prefering width vs. height */
    width: 20px;
    height: 20px;
}

Thanks for making this publicly available, I needed this today!

Any chance to have an update of this gist for bootstrap 4? Thank you in advance

All good @cmosguy! Had completely forgotten about this! glad it helped 😀
@vivitarjos sorry, I haven't touched bootstrap in a long time since moving more into back end development/programming. If you find a fix that works, feel free to comment here and I'll add it to the Gist

is this or bootstrap 3??? or 4???

For bootstrap 3.