​

<div class="container my-5">

  <div class="row">

    <div class="col-md-8 col-lg-6 mx-auto">

​

​

      <!-- Section: Block Content -->

      <section>

​

        <div class="list-group list-group-flush z-depth-1 rounded">

          <div class="list-group-item active d-flex justify-content-start align-items-center py-3">

            <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).jpg" class="rounded-circle z-depth-0" width="50" alt="avatar image">

            <div class="d-flex flex-column pl-3">

              <p class="font-weight-normal mb-0">Elisa McRayan</p>

              <p class="small mb-0">Web Designer</p>

            </div>

          </div>

          <a href="#!" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">Projects

            <span class="badge badge-info badge-pill">26</span>

          </a>

          <a href="#!" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">Tasks

            <span class="badge badge-warning badge-pill">5</span>

          </a>

          <a href="#!" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">Completed projects

            <span class="badge badge-success badge-pill">10</span>

          </a>

          <a href="#!" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">Followers

            <span class="badge badge-danger badge-pill">728</span>

          </a>

        </div>

​

      </section>

      <!-- Section: Block Content -->

​

​

    </div>

  </div>

</div>