<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <header> <div class="row col-md-12 navbar navbar-static-top navbar-custom" role="navigation"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand font-custom text-custom" href="#">Project name</a> </div> <ul class="nav navbar-nav navbar-right nav-custom" > <li> <a class="font-custom text-custom">Username</a></li> <li> <button id="notifications" type="button" class="btn btn-navbar btn-custom"> <span class="glyphicon glyphicon-bell glyph-custom badge" > 24</span> </button> </li> <li><button id="settings" type="button" class="btn btn-navba btn-custom" > <span class="glyphicon glyphicon-cog glyph-custom" ></span> </button> </li> <li > <button id="logout" type="button" class="btn btn-navbar btn-custom"> <span class="glyphicon glyphicon-log-out glyph-custom"></span> </button> </li> </ul> </div> </div> </div> </header> <!-- End of Header -->

.navbar-custom { color: white; background-color: darkblue; } .navbar-nav.navbar-right:last-child { margin-right: 35px !important; } .glyph-custom{ color: blue; background-color: white; } .btn-custom{ position: 10px; margin-left: 5px; margin-right: 5px; margin-top: 8px; padding:7px !important; background-color: white; } .text-custom{ color: white; text-align: center; letter-spacing: 0.25px; } .font-custom{ font-family: Arial, Helvetica, sans-serif; font-size: 1.25em; }