Bootstrap 3 - Profile page

by klode

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="">
    <!-- Personal section -->
    <section class="col-sm-12 information">
         <h2>Personal Information</h2>

        <div class="row">
            <div class="col-sm-6">
                <div class="row input-group">
                    <div class="label">First Name</div>
                    <div class="value">John</div>
                </div>
                <div class="row input-group">
                    <div class="label">Last Name</div>
                    <div class="value">Smith</div>
                </div>
            </div>
            <form class="col-sm-6">
                <div class="row input-group">
                    <div class="label">Teacher</div>
                    <div class="value">Ms. Palmer</div>
                </div>
                <div class="row input-group">
                    <div class="label">Class</div>
                    <div class="value">Grade5 Pd50</div>
                </div>
            </form>
        </div>
    </section>
    <!-- Account section -->
    <section class="col-sm-12 information">
         <h2>Account Information</h2>

        <div class="row">
            <div class="col-sm-6">
                <div class="row input-group">
                    <div class="label">Username</div>
                    <div class="value">Condor</div>
                </div>
            </div>
            <form class="col-sm-6" name="accountForm">
                <div class="row input-group">
                    <div class="label">Security Question</div>
                    <div class="input">
                        <input type="text" name="question">
                    </div>
                </div>
                <div class="row input-group">
                   ...

CSS

.row {
    //border:1px solid;
}
section.information {
    margin-bottom: 2em;
}
.label, .input, .value {
    display: inline;
    color: #000;
    //border: red 1px solid;
}
.label {
    text-transform: uppercase;
    color: #666;
    // color: $ironside-gray;
    //width:30%;
}
.input, .value {
    //width:70%;
    //border: green 1px solid;
}
h2 {
    border-bottom: 1px solid gray;
    color: red;
    margin: 0 0 1em 0;
    padding: 0 0 12px 0;
    line-height: 1.190em;
    font-weight: 500;
    font-size:1.3em;
}