"user profile"
Bootstrap 3.3.0 Snippet by flah

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Profile</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="profile.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <style> body { background: #F1F3FA; } /* Profile container */ .profile { margin: 20px 0; } /* Profile sidebar */ .profile-sidebar { padding: 20px 0 10px 0; background: #fff; } .col-md-3{ padding:0 0 0 15px; } .profile-userpic img { float: none; margin: 0 auto; width: 50%; height: 50%; -webkit-border-radius: 50% !important; -moz-border-radius: 50% !important; border-radius: 50% !important; } .profile-usertitle { text-align: center; margin-top: 20px; } .profile-usertitle-name { color: #5a7391; font-size: 16px; font-weight: 600; margin-bottom: 7px; } .profile-usertitle-job { text-transform: uppercase; color: #5b9bd1; font-size: 12px; font-weight: 600; margin-bottom: 15px; } .profile-usermenu { margin-top: 30px; padding:0px !important; } .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: 14px; font-weight: 400; } .profile-usermenu ul li a i { margin-right: 8px; font-size: 14px; } .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; } /* order Content */ .order-content { padding: 20px; background: #F6F9FB; min-height: 460px; } .form_main { width: 100%; } .form_main h4 { font-family: roboto; font-size: 20px; font-weight: 300; margin-bottom: 15px; margin-top: 20px; text-transform: uppercase; } .heading { border-bottom: 1px solid #A9A59F; padding-bottom: 9px; position: relative; } .heading span { background: #6D6C6A none repeat scroll 0 0; bottom: -2px; height: 3px; left: 0; position: absolute; width: 75px; } .form { border-radius: 7px; padding: 6px; } .txt[type="text"] { border: 1px solid #ccc; margin: 5px 0; padding: 4px 0 4px 5px; border-radius:5px; width: 80%; } .txt[type="password"] { border: 1px solid #ccc; margin: 5px 0; padding: 4px 0 4px 5px; border-radius:5px; width: 80%; } /*.txt2[type="submit"] { background: #949390 none repeat scroll 0 0; border: 1px solid #949390; border-radius: 10px; color: #fff; font-size: 16px; font-style: normal; line-height: 35px; margin: 10px 0; padding: 0; width: 12%; }*/ .txt2:hover { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; color: #949390; transition: all 0.5s ease 0s; } </style> </head> <body> <!-- 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 --> <div class="container"> <div class="row profile"> <div class="col-md-3"> <div class="profile-sidebar"> <!-- SIDEBAR USERPIC --> <div class="profile-userpic"> <!-- <img src="http://keenthemes.com/preview/metronic/theme/assets/admin/pages/media/profile/profile_user.jpg" class="img-responsive" alt=""> --> </div> <!-- END SIDEBAR USERPIC --> <!-- SIDEBAR USER TITLE --> <div class="profile-usertitle"> <div class="profile-usertitle-name"> <span class="hidden-xs">Hareesh Vudari</span> </div> <div class="profile-usertitle-job"> </div> </div> <!-- END SIDEBAR USER TITLE --> <!-- SIDEBAR MENU --> <div class="profile-usermenu"> <ul class="nav nav-pills"> <li class="active"> <a href="#"> <i class="glyphicon glyphicon-home"></i> <span class="hidden-xs">Personal<span> </a> </li> <li> <a href="#"> <i class="glyphicon glyphicon-user"></i> <span class="hidden-xs">Delivery Address<span> </a> </li> <li> <a href="#"> <i class="glyphicon glyphicon-ok"></i> <span class="hidden-xs">Orders <span></a> </li> <li> <a href="#"> <i class="glyphicon glyphicon-flag"></i> <span class="hidden-xs">My Wishlist <span></a> </li> <li> <a href="#"> <i class="glyphicon glyphicon-shopping-cart"></i> <span class="hidden-xs">Shopping Bag<span> </a> </li> </ul> </div> <!-- END MENU --> </div> </div> <div class="col-md-9 order-content"> <div class="form_main col-md-4 col-sm-5 col-xs-7"> <h4 class="heading"><strong>Personal </strong> Contact <span></span></h4> <div class="form"> <form action="" method="" id="contactFrm" name="contactFrm"> <input type="text" required="" placeholder="Name" value="" name="name" class="txt"> <input type="text" required="" placeholder="Email" value="" name="email" class="txt"> <input type="password" required="" placeholder="Change Pwd" value="" name="password" class="txt"><br> <button type="button" class="btn btn-default">Update</button> </form> </div> </div> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>

Related: See More

Now UI Dashboard PRO React
Instagram Style User Online
My User Login Page
Bootstrap 4 User Rating Form / Comment Form

Questions / Comments: