gray profile

This bootstrap snippet gray profile was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: user,profile

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container bootstrap snippet">
    <div class="row">
        <div class="main-content">
            <!-- NAV TABS -->
        	<ul class="nav nav-tabs nav-tabs-custom-colored tabs-iconized">
        		<li class="active"><a href="#profile-tab" data-toggle="tab" aria-expanded="true"><i class="fa fa-user"></i> Profile</a></li>
        		<li class=""><a href="#activity-tab" data-toggle="tab" aria-expanded="false"><i class="fa fa-rss"></i> Recent Activity</a></li>
        		<li class=""><a href="#settings-tab" data-toggle="tab" aria-expanded="false"><i class="fa fa-gear"></i> Settings</a></li>
        	</ul>
        	<!-- END NAV TABS -->
        	<div class="tab-content profile-page">
        		<!-- PROFILE TAB CONTENT -->
        		<div class="tab-pane profile active" id="profile-tab">
        			<div class="row">
        				<div class="col-md-3">
        					<div class="user-info-left">
        						<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Profile Picture">
        						<h2>Jonathan Smith <i class="fa fa-circle green-font online-icon"></i><sup class="sr-only">online</sup></h2>
        						<div class="contact">
        							<a href="#" class="btn btn-block btn-danger"><i class="fa fa-envelope-o"></i> Send Message</a>
        							<a href="#" class="btn btn-block btn-success"><i class="fa fa-book"></i> Add To Contact</a>
        							<ul class="list-inline social">
        								<li><a href="#" title="Facebook"><i class="fa fa-facebook-square"></i></a></li>
        								<li><a href="#" title="Twitter"><i class="fa fa-twitter-square"></i></a></li>
        								<li><a href="#" title="Google Plus"><i class="fa fa-google-plus-square"></i></a></li>
        							</ul>
        						</div>
        					</div>
        				</div>
        				<div class="col-md-9">
        					<div class="user-info-right">
        						<div class="basic-info">
        							<h3><i class="fa fa-square"></i> Basic Information</h3>
        							<p class="data-row">
        								<span class="data-name">Username</span>
        								<span class="data-value">jonasmith</span>
        							</p>
        							<p class="data-row">
        								<span class="data-name">Birth Date</span>
        								<span class="data-value">Nov 20, 1988</span>
        							</p>
        							<p class="data-row">
        								<span class="data-name">Gender</span>
        								<span class="data-value">Male</span>
        							</p>
        							<p class="data-row">
        								<span class="data-name">Website</span>
        								<span class="data-value"><a href="#">www.jonasmith.com</a></span>
        							</p>
        							<p class="data-row">
        								<span class="data-name">Last Login</span>
        								<span class="data-value">2 hours ago</span>
        							</p>
        							<p class="data-row">
        								<span class="data-name">Date Joined</span>
        								<span class="data-value">Feb 22, 2012</span>
        							</p>
        						</div>
        						<div class="contact_info">
        							<h3><i class="fa fa-square"></i> Contact Information</h3>
        							<p class="data-row">
        								<span class="data-name">Email</span>
        								<span class="data-value">me@jonasmith.com</span>
        							</p>
        							<p class="data-row">
        								<span class="data-name">Phone</span>
        								<span class="data-value">(1800) 221 - 876543</span>
        							</p>
        							<p class="data-row">
        								<span class="data-name">Address</span>
        								<span class="data-value">Riverside City 66, 80123 Denver<br>Colorado</span>
        							</p>
        						</div>
        						<div class="about">
        							<h3><i class="fa fa-square"></i> About Me</h3>
        							<p>Dramatically facilitate proactive solutions whereas professional intellectual capital. Holisticly utilize competitive e-markets through intermandated meta-services. Objectively.</p>
        							<p>Monotonectally foster future-proof infomediaries before principle-centered interfaces. Assertively recaptiualize cutting-edge web services rather than emerging "outside the box" thinking. Phosfluorescently cultivate resource maximizing technologies and user-centric convergence. Completely underwhelm cross functional innovation vis-a-vis.</p>
        						</div>
        					</div>
        				</div>
        			</div>
        		</div>
        		<!-- END PROFILE TAB CONTENT -->
        
        		<!-- ACTIVITY TAB CONTENT -->
        		<div class="tab-pane activity" id="activity-tab">
        			<ul class="list-unstyled activity-list">
        				<li>
        					<i class="fa fa-shopping-cart activity-icon pull-left"></i>
        					<p>
        						<a href="#">Jonathan</a> commented on <a href="#">Special Deal 2013</a> <span class="timestamp">12 minutes ago</span>
        					</p>
        				</li>
        				<li>
        					<i class="fa fa-pencil activity-icon pull-left"></i>
        					<p>
        						<a href="#">Jonathan</a> posted <a href="#">a new blog post</a> <span class="timestamp">4 hours ago</span>
        					</p>
        				</li>
        				<li>
        					<i class="fa fa-user activity-icon pull-left"></i>
        					<p>
        						<a href="#">Jonathan</a> edited his profile <span class="timestamp">11 hours ago</span>
        					</p>
        				</li>
        				<li>
        					<i class="fa fa-pencil activity-icon pull-left"></i>
        					<p>
        						<a href="#">Jonathan</a> has added review on <a href="#">jQuery Complete Guide</a> book <span class="timestamp">Yesterday</span>
        					</p>
        				</li>
        				<li>
        					<i class="fa fa-thumbs-up activity-icon pull-left"></i>
        					<p>
        						<a href="#">Jonathan</a> liked <a href="#">a post</a> <span class="timestamp">December 12</span>
        					</p>
        				</li>
        				<li>
        					<i class="fa fa-tasks activity-icon pull-left"></i>
        					<p>
        						<a href="#">Jonathan</a> has completed one task <span class="timestamp">December 11</span>
        					</p>
        				</li>
        				<li>
        					<i class="fa fa-picture-o activity-icon pull-left"></i>
        					<p>
        						<a href="#">Jonathan</a> uploaded <a href="#">new photos</a> <span class="timestamp">December 5</span>
        					</p>
        				</li>
        				<li>
        					<i class="fa fa-credit-card activity-icon pull-left"></i>
        					<p>
        						<a href="#">Jonathan</a> has updated his credit card info <span class="timestamp">September 28</span>
        					</p>
        				</li>
        			</ul>
        			<p class="text-center more"><a href="#" class="btn btn-custom-primary">View more <i class="fa fa-long-arrow-right"></i></a></p>
        		</div>
        		<!-- END ACTIVITY TAB CONTENT -->
        
        		<!-- SETTINGS TAB CONTENT -->
        		<div class="tab-pane settings" id="settings-tab">
        			<form class="form-horizontal" role="form">
        				<fieldset>
        					<h3><i class="fa fa-square"></i> Change Password</h3>
        					<div class="form-group">
        						<label for="old-password" class="col-sm-3 control-label">Old Password</label>
        						<div class="col-sm-4">
        							<input type="password" id="old-password" name="old-password" class="form-control">
        						</div>
        					</div>
        					<hr>
        					<div class="form-group">
        						<label for="password" class="col-sm-3 control-label">New Password</label>
        						<div class="col-sm-4">
        							<input type="password" id="password" name="password" class="form-control">
        						</div>
        					</div>
        					<div class="form-group">
        						<label for="password2" class="col-sm-3 control-label">Repeat Password</label>
        						<div class="col-sm-4">
        							<input type="password" id="password2" name="password2" class="form-control">
        						</div>
        					</div>
        				</fieldset>
        				<fieldset>
        					<h3><i class="fa fa-square"></i> Privacy</h3>
        					<label class="fancy-checkbox">
        						<input type="checkbox">
        						<span>Show my display name</span>
        					</label>
        					<label class="fancy-checkbox">
        						<input type="checkbox">
        						<span>Show my birth date</span>
        					</label>
        					<label class="fancy-checkbox">
        						<input type="checkbox">
        						<span>Show my email</span>
        					</label>
        					<label class="fancy-checkbox">
        						<input type="checkbox">
        						<span>Show my online status on chat</span>
        					</label>
        				</fieldset>
        				<h3><i class="fa fa-square"> </i>Notifications</h3>
        				<fieldset>
        					<div class="form-group">
        						<label class="col-sm-5 control-label">Receive message from administrator</label>
        						<ul class="col-sm-7 list-inline">
        							<li>
        								<div class="has-switch switch-animate switch-small switch-on" tabindex="0"><div><span class="switch-left"><i class="glyphicon glyphicon-globe"></i></span><label>&nbsp;</label><span class="switch-right switch-default"><i class="glyphicon glyphicon-globe"></i></span><input type="checkbox" checked="" class="bs-switch switch-small" data-off="default" data-on-label="<i class='glyphicon glyphicon-globe'></i>" data-off-label="<i class='glyphicon glyphicon-globe'></i>"></div></div>
        							</li>
        							<li>
        								<div class="has-switch switch-animate switch-small switch-on" tabindex="0"><div><span class="switch-left"><i class="glyphicon glyphicon-phone"></i></span><label>&nbsp;</label><span class="switch-right switch-default"><i class="glyphicon glyphicon-phone"></i></span><input type="checkbox" checked="" class="bs-switch switch-small" data-off="default" data-on-label="<i class='glyphicon glyphicon-phone'></i>" data-off-label="<i class='glyphicon glyphicon-phone'></i>"></div></div>
        							</li>
        							<li>
        								<div class="has-switch switch-animate switch-small switch-on" tabindex="0"><div><span class="switch-left"><i class="glyphicon glyphicon-envelope"></i></span><label>&nbsp;</label><span class="switch-right switch-default"><i class="glyphicon glyphicon-envelope"></i></span><input type="checkbox" checked="" class="bs-switch switch-small" data-off="default" data-on-label="<i class='glyphicon glyphicon-envelope'></i>" data-off-label="<i class='glyphicon glyphicon-envelope'></i>"></div></div>
        							</li>
        						</ul>
        					</div>
        					<div class="form-group">
        						<label class="col-sm-5 control-label">New product has been added</label>
        						<ul class="col-sm-7 list-inline">
        							<li>
        								<div class="has-switch switch-animate switch-small switch-off" tabindex="0"><div><span class="switch-left"><i class="glyphicon glyphicon-globe"></i></span><label>&nbsp;</label><span class="switch-right switch-default"><i class="glyphicon glyphicon-globe"></i></span><input type="checkbox" class="bs-switch switch-small" data-off="default" data-on-label="<i class='glyphicon glyphicon-globe'></i>" data-off-label="<i class='glyphicon glyphicon-globe'></i>"></div></div>
        							</li>
        							<li>
        								<div class="has-switch switch-animate switch-small switch-on" tabindex="0"><div><span class="switch-left"><i class="glyphicon glyphicon-phone"></i></span><label>&nbsp;</label><span class="switch-right switch-default"><i class="glyphicon glyphicon-phone"></i></span><input type="checkbox" checked="" class="bs-switch switch-small" data-off="default" data-on-label="<i class='glyphicon glyphicon-phone'></i>" data-off-label="<i class='glyphicon glyphicon-phone'></i>"></div></div>
        							</li>
        							<li>
        								<div class="has-switch switch-animate switch-small switch-on" tabindex="0"><div><span class="switch-left"><i class="glyphicon glyphicon-envelope"></i></span><label>&nbsp;</label><span class="switch-right switch-default"><i class="glyphicon glyphicon-envelope"></i></span><input type="checkbox" checked="" class="bs-switch switch-small" data-off="default" data-on-label="<i class='glyphicon glyphicon-envelope'></i>" data-off-label="<i class='glyphicon glyphicon-envelope'></i>"></div></div>
        							</li>
        						</ul>
        					</div>
        					<div class="form-group">
        						<label class="col-sm-5 control-label">Product review has been approved</label>
        						<ul class="col-sm-7 list-inline">
        							<li>
        								<div class="has-switch switch-animate switch-small switch-on" tabindex="0"><div><span class="switch-left"><i class="glyphicon glyphicon-globe"></i></span><label>&nbsp;</label><span class="switch-right switch-default"><i class="glyphicon glyphicon-globe"></i></span><input type="checkbox" checked="" class="bs-switch switch-small" data-off="default" data-on-label="<i class='glyphicon glyphicon-globe'></i>" data-off-label="<i class='glyphicon glyphicon-globe'></i>"></div></div>
        							</li>
        							<li>
        								<div class="has-switch switch-animate switch-small switch-off" tabindex="0"><div><span class="switch-left"><i class="glyphicon glyphicon-phone"></i></span><label>&nbsp;</label><span class="switch-right switch-default"><i class="glyphicon glyphicon-phone"></i></span><input type="checkbox" class="bs-switch switch-small" data-off="default" data-on-label="<i class='glyphicon glyphicon-phone'></i>" data-off-label="<i class='glyphicon glyphicon-phone'></i>"></div></div>
        							</li>
        							<li>
        								<div class="has-switch switch-animate switch-small switch-on" tabindex="0"><div><span class="switch-left"><i class="glyphicon glyphicon-envelope"></i></span><label>&nbsp;</label><span class="switch-right switch-default"><i class="glyphicon glyphicon-envelope"></i></span><input type="checkbox" checked="" class="bs-switch switch-small" data-off="default" data-on-label="<i class='glyphicon glyphicon-envelope'></i>" data-off-label="<i class='glyphicon glyphicon-envelope'></i>"></div></div>
        							</li>
        						</ul>
        					</div>
        					<div class="form-group">
        						<label class="col-sm-5 control-label">Others liked your post</label>
        						<ul class="col-sm-7 list-inline">
        							<li>
        								<div class="has-switch switch-animate switch-small switch-off" tabindex="0"><div><span class="switch-left"><i class="glyphicon glyphicon-globe"></i></span><label>&nbsp;</label><span class="switch-right switch-default"><i class="glyphicon glyphicon-globe"></i></span><input type="checkbox" class="bs-switch switch-small" data-off="default" data-on-label="<i class='glyphicon glyphicon-globe'></i>" data-off-label="<i class='glyphicon glyphicon-globe'></i>"></div></div>
        							</li>
        							<li>
        								<div class="has-switch switch-animate switch-small switch-off" tabindex="0"><div><span class="switch-left"><i class="glyphicon glyphicon-phone"></i></span><label>&nbsp;</label><span class="switch-right switch-default"><i class="glyphicon glyphicon-phone"></i></span><input type="checkbox" class="bs-switch switch-small" data-off="default" data-on-label="<i class='glyphicon glyphicon-phone'></i>" data-off-label="<i class='glyphicon glyphicon-phone'></i>"></div></div>
        							</li>
        							<li>
        								<div class="has-switch switch-animate switch-small switch-off" tabindex="0"><div><span class="switch-left"><i class="glyphicon glyphicon-envelope"></i></span><label>&nbsp;</label><span class="switch-right switch-default"><i class="glyphicon glyphicon-envelope"></i></span><input type="checkbox" class="bs-switch switch-small" data-off="default" data-on-label="<i class='glyphicon glyphicon-envelope'></i>" data-off-label="<i class='glyphicon glyphicon-envelope'></i>"></div></div>
        							</li>
        						</ul>
        					</div>
        				</fieldset>
        			</form>
        			<p class="text-center"><a href="#" class="btn btn-custom-primary"><i class="fa fa-floppy-o"></i> Save Changes</a></p>
        		</div>
        		<!-- END SETTINGS TAB CONTENT -->
        	</div>
        </div>    
        

    
	</div>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview


body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #555;
  background: #ececec;
  margin-top:20px;
}

.nav.nav-tabs-custom-colored > li.active > a, 
.nav.nav-tabs-custom-colored > li.active > a:hover, 
.nav.nav-tabs-custom-colored > li.active > a:focus {
  background-color: #296EAA;
  color: #fff;
  cursor: pointer;
}

.tab-content.profile-page {
  padding: 35px 15px;
}

.profile .user-info-left {
  text-align: center;
}

.profile .user-info-left, 
.profile .user-info-right {
  padding: 10px 0;
}

.profile .user-info-left img {
  border: 3px solid #fff;
}

.profile .user-info-left h2 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.3em;
  margin-bottom: 20px;
}

.user-info-left .btn{
    border-radius:0px;    
}

.profile .user-info-left ul.social a {
  font-size: 20px;
  color: #b9b9b9;
}

.profile .user-info-right {
  border-left: 1px solid #ddd;
  padding-left: 30px;
}

.profile h3, .activity h3, .settings h3 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.2em;
  margin-top: 0;
  margin-bottom: 20px;
}

.data-row .data-name, .data-row .data-value {
  display: inline-block;
  vertical-align: middle;
  padding: 5px;
}

.data-row .data-name {
  width: 12em;
    color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
  font-size: 0.9em;
  vertical-align: top;
}

ul.activity-list > li:not(:last-child) {
  border-bottom: 1px solid #ddd;
}

ul.activity-list > li {
  padding: 15px;
}

ul.activity-list > li .activity-icon {
  display: inline-block;
  vertical-align: middle;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  width: 34px;
  height: 34px;
  background-color: #e4e4e4;
  font-size: 16px;
  color: #656565;
  line-height: 34px;
  text-align: center;
  margin-right: 10px;
}

fieldset {
  margin-bottom: 40px;
}

hr {
  border-top-color: #ddd;
}

.form-horizontal .control-label {
  text-align: left;
}

.form-control, .input-group .form-control {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Jul 3rd 2015, 15:14

Views: 3.3K