Profile Bootstrap

by Abbas Jaber

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class=" col-md-5  toppad  pull-right col-md-offset-3 ">
      <A class="btn" href="#">Edit Profile</A>

      <A href="#">Logout</A>
      <br>
      <p class=" text-info">Feb 22,2017,09:00 am </p>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xs-offset-0 col-sm-offset-0 col-md-offset-3 col-lg-offset-3 toppad">


      <div class="panel panel-info">
        <div class="panel-heading">
          <h3 class="panel-title">Abbas Jaber</h3>
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-md-3 col-lg-3 " align="center"> <img alt="User Pic" src="https://lh3.googleusercontent.com/f-j7rzXCuxSyYCKhTwAuojjfNEgWE1w41pjYAJLnPH3-6s0SPjRDjNjV0ALAu9BR2m5mZwP4lRVopA=w1280-h1024-rw-no" class="user-pic img-circle img-responsive"> </div>
            <div class=" col-md-9 col-lg-9 ">
              <table class="table table-user-information">
                <tbody>
                  <tr>
                    <td>Department:</td>
                    <td>Programming</td>
                  </tr>
                  <tr>
                    <td>Hire date:</td>
                    <td>06/23/2015</td>
                  </tr>
                  <tr>
                    <td>Date of Birth</td>
                    <td>01/03/1989</td>
                  </tr>

                  <tr>
                    <tr>
                      <td>Gender</td>
                      <td>Male</td>
                    </tr>
                    <tr>
                      <td>Home Address</td>
                      <td>Beirut,Lebanon</td>
                    </tr>
                   ...

CSS

.user-row {
    margin-bottom: 14px;
  }
  
  .user-row:last-child {
    margin-bottom: 0;
  }
  
  .dropdown-user {
    margin: 13px 0;
    padding: 5px;
    height: 100%;
  }
  
  .dropdown-user:hover {
    cursor: pointer;
  }
  
  .table-user-information > tbody > tr {
    border-top: 1px solid rgb(221, 221, 221);
  }
  
  .table-user-information > tbody > tr:first-child {
    border-top: 0;
  }
  
  .table-user-information > tbody > tr > td {
    border-top: 0;
  }
  
  .toppad {
    margin-top: 20px;
  }
  
  .user-pic {
    max-width: 300px;
  }