Bootstrap 3 - Profile page 2.0
HTML
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="container">
<div class="profile-view">
<!-- Personal section -->
<section class="information">
<div class="section-title">Personal Information</div>
<div class="row">
<div class="col-md-5">
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-4 control-label">First Name</label>
<div class="col-sm-8">
<p class="form-control-static">{{vm.profile.firstName}}</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Last Name</label>
<div class="col-sm-8">
<p class="form-control-static">{{vm.profile.lastName}}</p>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-4 control-label">Teacher</label>
<div class="col-sm-8">
<p class="form-control-static">{{teacherName}}</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Class</label>
<div class="col-sm-8">
<p class="form-control-static">{{currentClassName}}</p>
...
CSS
.profile-view {
padding: 0 10px 2em;
}
section.information {
margin-bottom: 2em;
}
label.control-label {
font-size: 0.8em;
color: #666;
text-transform: uppercase;
white-space:nowrap;
}
.form-horizontal .control-label {
text-align:left;
}
input.form-control-static {
font-size: 2em;
color: #333;
}
.section-title {
font-size:1.3em;
border-bottom: 1px solid #959595;
color: #ed1b30;
margin: 0 0 1em 0;
padding: 0 0 12px;
line-height: 1.190em;
font-weight: 500;
}