<div class="col-md-6">
<div class="main-container">
    <div class="dropdown">
      <button class="btn btn-default btn-sm dropdown-toggle btn-over btn-override" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-bars" id="menu-icon"></i></button>
      <ul class="dropdown-menu dropdown-menu-right">
        <li><a class="dropdown-item bold" href="#"><strong>Share Profile</strong></a></li>
        <li role="separator" class="divider"></li>
        <li><a class="dropdown-item" href="#"><i class="fa fa-facebook"></i> Facebook</a></li>
        <li><a class="dropdown-item" href="#"><i class="fa fa-twitter"></i> Twitter</a></li>
        <li><a class="dropdown-item" href="#"><i class="fa fa-github"></i> Github</a></li>
        <li><a class="dropdown-item" href="#"><i class="fa fa-codepen"></i> Codepen</a></li>

  <div class="row">
    <div class="col-md-2"><div class="user-img"></div></div>
    <div class="col-md-10">
      <h1 class="user-name">S. N. Goenka</h1>
      <h4 class="user-title">Teacher of Vipassanā meditation</h4>
      <div class="row">
        <div class="col-md-6 sm-top-bot-pad"><i class="fa fa-phone-square"></i> Contact: 1+ 987-576-4321</div>
        <div class="col-md-6 sm-top-bot-pad"><i class="fa fa-envelope"></i> Email: sn.goenka@vipassana.com</div>
        <div class="col-md-6 sm-top-bot-pad"><i class="fa fa-map-marker"></i> Address: 123 Fairview Way </div>
        <div class="col-md-6 sm-top-bot-pad"><i class="fa fa-building"></i> Country: Burma</div>
      <div class="row med-top-bot-pad">
        <button type="button" class="btn btn-default btn-xs rt-mar"><i class="fa fa-heart"></i> Button Information</button>
        <button type="button" class="btn btn-default btn-xs rt-mar"><i class="fa fa-paper-plane"></i> Button Information</button>
        <button type="button" class="btn btn-info btn-xs"><i class="fa fa-star"></i> Button Information</button>

<div class="skill-container">
  <div id="flex-layout">
      <div class="flex-container">
          <li class="skill-item">
            <span class="divot"><i class="fa fa-pencil"></i></span>
            <p>Add your experience plus more information.</p>
          <li class="skill-item">
            <span class="divot"><i class="fa fa-pencil"></i></span>
            <p>Add your experience plus more information.</p>
          <li class="skill-item">
            <span class="divot"><i class="fa fa-pencil"></i></span>
            <p>Add your experience plus more information.</p>
@import "compass/css3";
body {
  padding: 2em;
  background-color: #e1e1e1;
  font-family: Open Sans;
  color: #666 !important;
.main-container {
  background-color: #fff;
  .user-title {
    width: 90%;
    padding-bottom: 1em; 
    border-bottom: 1px solid #999;
.dropdown-item {
  color: #333 !important;
  i { text-align: center; }
  &.bold { 
    font-weight: 700;
    padding-bottom: 0;
    &:hover{ background: transparent; cursor: default; }
nav {
  float: right;
  .btn-override {
    background: #f2f2f2;
    border: 0 !important;
    border-radius: 0 !important;
  #menu-icon {
    color: #aaa;
    font-size: 2em !important;
    padding: .5em .4em;
// I am aware some of these overrides may not be necessary.
// As I get more acquainted with bootstrap docs, I am sure I would find
// a more structured convention to control padding and margin.
.row {
  margin: 0 !important;
  padding: 0 !important;
.btn-default     { color: #666 !important; }
.sm-top-bot-pad  { padding: .3em 0; }
.med-top-bot-pad { padding: 1.3em 0 !important; }
.med-top-pad     { padding-top: 1em; }
.med-pad-all     { padding: 1em 0 1.5em !important; }
.rt-mar          { margin-right: 2em; }
.col-md-6 i { width: 1.5em; text-align: center; }
.col-md-6:nth-of-type(4) i { padding-left: 1px } // TODO: I've notice quite a few font-awesome icons do line up horizontally, even with text align.
.user-name { margin-top: 0 !important; }
.user-img {
  -webkit-clip-path: circle(40px at center);
  clip-path: circle(40px at center);
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/7/79/SNG.gif);
  background-postition:  left -20px top -20px;;
  background-size: 98%;
  background-repeat: no-repeat;
  height: 90px;
  width: 90px;
  margin: 4em 0 0 5px
.skill-container {
  @extend .main-container;
  background-color: transparent;
  h4 { padding-left: .5em; }
.skill-item {
  position: relative;
  padding: 2em;
  h4 { padding-left: 0 !important; font-weight: 700; }
  p { font-size: .9em; }
  .divot {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-right: 60px solid #f1f1f1;
    border-bottom: 60px solid transparent;
    transition: border-color .2s;
    &:hover {
      border-right-color: #ccc;
      cursor: pointer;
      i { opacity:  9; } }
    i {
      position: absolute;
      font-size: 20px;
      margin: 7px 0 0 30px;
      float: right;
      color: #337ab7;
      opacity:  .7;
// Flex Styles: 
#flex-layout {
  @include display-flex;
  @include flex-wrap(wrap);
    @include flex(1 0 100%);
  div.flex-container {
    $flex-legacy-enabled: true;
    ul {
      padding: 0;
      margin: -.5em;
      min-width: 100%; /* fix for old Firefox */
      @include display-flex(flex);
    li {
      background: #fff;
      margin: .5em;
      display: inline-block; /* non-flexbox browsers */
      @include flex(1 1 30%);
    $flex-legacy-enabled: false;
View Compiled
Run Pen

External CSS

  1. //maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
  2. //maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css
  3. //fonts.googleapis.com/css?family=Open+Sans:400,700

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js