<div class="app-body-inner">
  <div class="row-col row-col-xs b-b">
    <!-- column -->
    <div class="col-sm-2 col-md-2 w w-auto-sm b-r">
      <div class="row-col">
        <div class="row-row">
          <div class="row-body scrollable hover">
            <div class="row-inner">
              <div class="nav nav-pills nav-stacked m-t-sm flex-column">
                <a class="nav-link _500">ALL Contacts</a>
                <a class="nav-link">Coworkers</a>
                <a class="nav-link">Family</a>
                <a class="nav-link">Friends</a>
                <a class="nav-link">Partners</a>
                <a class="nav-link">Group</a>
              </div>
            </div>
          </div>
        </div>
        <div class="p-a">
          <span bs-tooltip title="Double click to Edit" class="pull-right text-muted inline p-a-xs m-r-sm"><i class="fa fa-question"></i></span>
          <a href class="btn btn-sm white"><i class="fa fa-plus fa-fw m-r-xs"></i> <span class="hidden-sm-down">New Group</span></a>
        </div>
      </div>
    </div>
    <!-- /column -->
    <!-- column -->
    <div class="col-sm-4 col-md-3 light bg b-r">
      <div class="row-col">
        <div class="p-a-xs b-b">
          <div class="input-group">
            <span class="input-group-addon no-border no-bg"><i class="fa fa-search"></i></span>
            <input type="text" class="form-control no-border no-bg" placeholder="Search all contacts">
          </div>
        </div>
        <div class="row-row">
          <div class="row-body scrollable hover">
            <div class="row-inner">
              <div class="list inset">
                <div class="list-item pointer">
                  <div class="list-left">
                    <span class="w-40 avatar">
                      <img src="../assets/images/a0.jpg" class="img-circle">
                    </span>
                  </div>
                  <div class="list-body">
                    Bertina Robert
                    <small class="block"><i class="fa fa-phone m-r-sm text-muted"></i>(021) 1234 8755</small>
                  </div>
                </div>
                <div class="list-item pointer">
                  <div class="list-left">
                    <span class="w-40 avatar">
                      <img src="../assets/images/a1.jpg" class="img-circle">
                    </span>
                  </div>
                  <div class="list-body">
                    Alexandra Galton
                    <small class="block"><i class="fa fa-phone m-r-sm text-muted"></i>(021) 3421 4322</small>
                  </div>
                </div>
                <div class="list-item pointer">
                  <div class="list-left">
                    <span class="w-40 avatar">
                      <img src="../assets/images/a2.jpg" class="img-circle">
                    </span>
                  </div>
                  <div class="list-body">
                    Angela Oscar
                    <small class="block"><i class="fa fa-phone m-r-sm text-muted"></i>(021) 3422 1212</small>
                  </div>
                </div>
                <div class="list-item pointer">
                  <div class="list-left">
                    <span class="w-40 avatar">
                      <img src="../assets/images/a3.jpg" class="img-circle">
                    </span>
                  </div>
                  <div class="list-body">
                    Annabelle
                    <small class="block"><i class="fa fa-phone m-r-sm text-muted"></i>(021) 9000 9877</small>
                  </div>
                </div>
                <div class="list-item pointer">
                  <div class="list-left">
                    <span class="w-40 avatar">
                      <img src="../assets/images/a4.jpg" class="img-circle">
                    </span>
                  </div>
                  <div class="list-body">
                    Brenda Lanny
                    <small class="block"><i class="fa fa-phone m-r-sm text-muted"></i>(021) 9000 4322</small>
                  </div>
                </div>
                <div class="list-item pointer">
                  <div class="list-left">
                    <span class="w-40 avatar">
                      <img src="../assets/images/a5.jpg" class="img-circle">
                    </span>
                  </div>
                  <div class="list-body">
                    Britney Patricia
                    <small class="block"><i class="fa fa-phone m-r-sm text-muted"></i>(021) 1234 8755</small>
                  </div>
                </div>
                <div class="list-item pointer">
                  <div class="list-left">
                    <span class="w-40 avatar">
                      <img src="../assets/images/a6.jpg" class="img-circle">
                    </span>
                  </div>
                  <div class="list-body">
                    Deborah
                    <small class="block"><i class="fa fa-phone m-r-sm text-muted"></i>332 233 2332</small>
                  </div>
                </div>
                <div class="list-item pointer">
                  <div class="list-left">
                    <span class="w-40 avatar">
                      <img src="../assets/images/a7.jpg" class="img-circle">
                    </span>
                  </div>
                  <div class="list-body">
                    Emily
                    <small class="block"><i class="fa fa-phone m-r-sm text-muted"></i>332 233 2332</small>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="p-a b-t text-center">
          <a href class="btn btn-sm white btn-addon"><i class="fa fa-plus fa-fw m-r-xs"></i> New Contact</a>
        </div>
      </div>
    </div>
    <!-- /column -->

    <!-- column -->
    <div class="col-sm-6 col-md-7">
      <div class="row-col">
        <div class="p-a-sm">
          <div>
            <a class="btn btn-sm white pull-right"><i class="fa fa-times"></i></a>
            <a class="btn btn-sm white">Edit</a>
          </div>
        </div>
        <div class="row-row">
          <div class="row-body">
            <div class="row-inner">
              <div class="padding">
                <div class="row h-auto m-b-lg">
                  <div class="col-sm-3">
                    <div class="avatar w-64 inline">
                      <img src="../assets/images/a0.jpg">
                    </div>
                  </div>
                  <div class="col-sm-9 v-m h2 _300">
                    <div class="p-l-xs">
                      <input type="text" placeholder="First" class="form-control w-sm inline" >
                      <input type="text" placeholder="Last" class="form-control w-sm inline">
                    </div>
                  </div>
                </div>
                <!-- fields -->
                <div class="form-horizontal">
                  <div class="form-group row">
                    <label class="col-sm-3 form-control-label">Mobile</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-3 form-control-label">Home</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-3 form-control-label">Work</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-3 form-control-label">Company</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" >
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-3 form-control-label">Note</label>
                    <div class="col-sm-9">
                      <textarea class="form-control" rows="5"></textarea>
                    </div>
                  </div>
                </div>
                <!-- / fields -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /column -->
  </div>
</div>
