<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="profile-block"> <div class="panel text-center"> <div class="user-heading"> <a href="#"><img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder-300x300.png" alt="" title=""></a> <h1>Elias Miah</h1> <p>eliasmia1988@gmail.com</p> <p>Wallet Balance $0.00</p> </div> <ul class="nav nav-pills nav-stacked"> <li><a href="#"><i class="fa fa-user"></i>Profile</a></li> <li class="active"><a href="#"><i class="fa fa-pencil-square-o"></i>Edit profile</a></li> <li><a href="#"><i class="fa fa-usd" aria-hidden="true"></i>Subscription History</a></li> <li><a href="#"><i class="fa fa-usd" aria-hidden="true"></i>Transaction History</a></li> <li><a href="#"><i class="fa fa-sign-out"></i>Logout</a></li> </ul> </div> </div>

h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; line-height: .9; font-weight: 700; color: #333; } .profile-block{ margin:30px auto; position:relative; overflow:hidden; max-width: 300px; } .profile-block .user-heading { background: #c5251e none repeat scroll 0 0; border-radius: 4px 4px 0 0; color: #fff; padding: 20px; text-align: center; } .profile-block .user-heading a img { border-radius: 50%; margin:auto auto 10px; display: block; height: 140px; width: 140px; border: 10px solid rgba(255, 255, 255, 0.3); } .profile-block .user-heading h1 { color: #fff; font-size: 20px; font-weight: 300; line-height: 22px; margin-bottom: 5px; margin-top: 5px; } .profile-block .user-heading p { color: #fff; font-size: 12px; margin-bottom: 0; text-align: center; } .profile-block ul{ padding:0; margin:0; } .profile-block ul > li { border-bottom: 1px solid #ddd; line-height: 30px; margin-top: 0; } .profile-block .nav > li > a { background: #e7e7e7; border-radius: 0; color: #000; display: block; font-size: 14px; padding: 6px 18px; position: relative; text-align: left; text-decoration: none; } .profile-block ul > li > a > i { color: #000; font-size: 16px; padding-right: 10px; } .profile-block ul > li > a:hover, .profile-block ul > li > a:focus, .profile-block ul li.active a { background: #fff !important; border-radius: 0; color: #000 !important; }