<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 ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row profile"> <div class="col-md-3"> <div class="profile-sidebar"> <!-- SIDEBAR USERPIC --> <div class="profile-userpic"> <img src="https://s1.postimg.org/1idt8dqelr/IMG_20170824_084258.jpg" class="img-responsive" alt=""> </div> <!-- END SIDEBAR USERPIC --> <!-- SIDEBAR USER TITLE --> <div class="profile-usertitle"> <div class="profile-usertitle-name"> Cheyne Mayfield </div> <div class="profile-usertitle-job"> Availability: <b><i class="fa fa-paw" aria-hidden="true"></i> Online</b> </div> </div> <!-- END SIDEBAR USER TITLE --> <!-- SIDEBAR BUTTONS --> <div class="profile-userbuttons"> <button type="button" class="btn btn-success btn-sm"><i class="fa fa-edit" aria-hidden="true"></i> Write A New Post</button> </div> <!-- END SIDEBAR BUTTONS --> <!-- SIDEBAR MENU --> <div class="profile-usermenu"> <ul class="nav"> <li class="active"> <a href="#"> <i class="fa fa-th" aria-hidden="true"></i> Dashboard </a> </li> <li> <a href="#"> <i class="fa fa-paw" aria-hidden="true"></i> My Pets </a> </li> <li> <a href="#" target="_blank"> <i class="fa fa-cog" aria-hidden="true"></i> Account Settings </a> </li> <li> <a href="#"> <i class="fa fa-sign-out" aria-hidden="true"></i> Sign Out </a> </li> </ul> </div> <!-- END MENU --> </div> </div> <div class="col-md-9"> <div class="profile-content"> Some user related content goes here... </div> </div> </div> </div> <br> <br>

/*** User Profile Sidebar by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT ***/ body { background: #F1F3FA; } /* Profile container */ .profile { margin: 20px 0; } /* Profile sidebar */ .profile-sidebar { padding: 20px 0 10px 0; background: #fff; } .profile-userpic img { float: none; margin: 0 auto; width: 160px; height: 220px; } .profile-usertitle { text-align: center; margin-top: 20px; } .profile-usertitle-name { color: #5a7391; text-transform: uppercase; font-family: calibri; letter-spacing: 2.5px; font-size: 13px; font-weight: 400; margin-bottom: 7px; } .profile-usertitle-job { text-transform: uppercase; color: #5b9bd1; font-family: calibri; letter-spacing: 2px; font-size: 10px; font-weight: 400; margin-bottom: 15px; } .profile-userbuttons { text-align: center; margin-top: 10px; } .profile-userbuttons .btn { text-transform: uppercase; color: #fff; text-transform: uppercase; font-family: calibri; font-size: 10px; border-radius: 50px; font-weight: 400; letter-spacing: 1.5px; padding: 4px 8px; margin-right: 5px; } .profile-userbuttons .btn:last-child { margin-right: 0px; } .profile-usermenu { margin-top: 30px; } .profile-usermenu ul li { border-bottom: 1px solid #f0f4f7; } .profile-usermenu ul li:last-child { border-bottom: none; } .profile-usermenu ul li a { color: #93a3b5; font-size: 10px; font-weight: 200; letter-spacing: 2px; font-family: calibri; text-transform: uppercase; } .profile-usermenu ul li a i { margin-right: 8px; font-size: 12px; font-weight: lighter; } .profile-usermenu ul li a:hover { background-color: #fafcfd; color: #5b9bd1; } .profile-usermenu ul li.active { border-bottom: none; } .profile-usermenu ul li.active a { color: #5b9bd1; background-color: #f6f9fb; border-left: 2px solid #5b9bd1; margin-left: -2px; } /* Profile Content */ .profile-content { padding: 20px; background: #fff; min-height: 525px; } b { width:150px; padding:2px 15px; color: #fff; text-align:center; background-color: #55a325; text-transform: uppercase; font-weight: lighter; text-decoration:none; font-family: 'Calibri', cursive; font-size:10px; border-radius: 50px; letter-spacing: 2px; margin:0px 2px; }