<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <nav class="navbar navbar-inverse container" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="#">CQAS</a> </div> </div><!-- /.container-fluid --> </nav> <div class="container"> <div class="row well"> <div class="col-md-2"> <ul class="nav nav-pills nav-stacked well"> <li class="active"><a href="#"><i class="fa fa-envelope"></i> Compose</a></li> <li><a href="#"><i class="fa fa-home"></i> Home</a></li> <li><a href="#"><i class="fa fa-user"></i> Cashier Profile</a></li> <li><a href="#"><i class="fa fa-key"></i> Serve Student</a></li> <li><a href="#"><i class="fa fa-sign-out"></i> Logout</a></li> </ul> </div> <div class="col-md-10"> <div class="panel"> <img class="pic img-circle" src="http://placehold.it/120x120" alt="..."> <div class="name"><small>Sherwin Gwapo</small></div> </div> <br><br><br> </div> </div> </div> </div> </div> </div> </div>

.pic { margin-top:50px; width:120px; margin-left:50px; margin-bottom:-60px; } .panel { background-image:url("http://autoimagesize.com/wp-content/uploads/2014/01/rainbow-aurora-background-wallpaper-colour-images-rainbow-background.jpg"); } .name { position:absolute; padding-left:200px; font-size:30px; } .dropdown { position:absolute; } .change { position:relative; bottom:20px; padding:1px; color:white; text-decoration:none; } .change:hover { text-decoration:none; background-color:black; color:white; }