Media Objects

<!-- Title -->
<div id="reviews" class="mb-3">
  <h3 class="h4 mb-0">Reviews <span class="text-muted font-size-1">(125)</span></h3>
</div>
<!-- End Title -->

<!-- Reviews -->
<div>
  <!-- Author -->
  <div class="media mb-3">
    <img class="u-avatar rounded-circle mr-3" src="../../assets/img/100x100/img3.jpg" alt="Image Description">

    <div class="media-body align-self-center">
      <h4 class="d-inline-block mb-1">
        <a class="d-block h6 mb-0" href="#">Russel Fernandes</a>
      </h4>
      <ul class="list-inline text-warning small mb-0">
        <li class="list-inline-item mx-0">
          <span class="fas fa-star"></span>
        </li>
        <li class="list-inline-item mx-0">
          <span class="fas fa-star"></span>
        </li>
        <li class="list-inline-item mx-0">
          <span class="fas fa-star"></span>
        </li>
        <li class="list-inline-item mx-0">
          <span class="fas fa-star"></span>
        </li>
        <li class="list-inline-item mx-0">
          <span class="fas fa-star text-warning"></span>
        </li>
      </ul>
    </div>

    <div class="media-body text-right">
      <small class="d-block text-muted">3 hours ago.</small>
    </div>
  </div>
  <!-- End Author -->

  <p>At the end of the day, it's important to not let being busy distract us from having fun. Smiling, laughing, and hanging helps us work together to achieve this.</p>

  <!-- Likes/Reply -->
  <ul class="list-inline d-flex">
    <li class="list-inline-item">
      <a class="text-secondary" href="#">
        17
        <span class="far fa-thumbs-up ml-1"></span>
      </a>
    </li>
    <li class="list-inline-item ml-3">
      <a class="text-secondary" href="#">
        0
        <span class="far fa-thumbs-down ml-1"></span>
      </a>
    </li>
    <li class="list-inline-item ml-auto">
      <a class="text-secondary" href="#">
        <span class="far fa-comments mr-1"></span>
        Reply
      </a>
    </li>
  </ul>
  <!-- End Likes/Reply -->
</div>
<!-- End Reviews -->

<hr class="my-7">

<!-- Reviews -->
<div class="mb-7">
  <!-- Author -->
  <div class="media mb-3">
    <img class="u-avatar rounded-circle mr-3" src="../../assets/img/100x100/img2.jpg" alt="Image Description">

    <div class="media-body align-self-center">
      <h4 class="d-inline-block mb-1">
        <a class="d-block h6 mb-0" href="#">Elizabeth Lord</a>
      </h4>
      <ul class="list-inline text-warning small mb-0">
        <li class="list-inline-item mx-0">
          <span class="fas fa-star"></span>
        </li>
        <li class="list-inline-item mx-0">
          <span class="fas fa-star"></span>
        </li>
        <li class="list-inline-item mx-0">
          <span class="fas fa-star"></span>
        </li>
        <li class="list-inline-item mx-0">
          <span class="fas fa-star"></span>
        </li>
        <li class="list-inline-item mx-0">
          <span class="far fa-star text-warning"></span>
        </li>
      </ul>
    </div>

    <div class="media-body text-right">
      <small class="d-block text-muted">1 day ago.</small>
    </div>
  </div>
  <!-- End Author -->

  <p>It's important to stay detail oriented with every project we tackle. Staying focused allows us to turn every project we complete into something we love. We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.</p>

  <!-- Likes/Reply -->
  <ul class="list-inline d-flex">
    <li class="list-inline-item">
      <a class="text-secondary" href="#">
        17
        <span class="far fa-thumbs-up ml-1"></span>
      </a>
    </li>
    <li class="list-inline-item ml-3">
      <a class="text-secondary" href="#">
        0
        <span class="far fa-thumbs-down ml-1"></span>
      </a>
    </li>
    <li class="list-inline-item ml-auto">
      <a class="text-secondary" href="#">
        <span class="far fa-comments mr-1"></span>
        Reply
      </a>
    </li>
  </ul>
  <!-- End Likes/Reply -->
</div>
<!-- End Reviews -->

<a class="btn btn-block btn-soft-primary transition-3d-hover" href="#">See More</a>

<!-- Comments Section -->
<div class="container space-2 space-md-3">
  <div class="w-lg-60 mx-auto">
    <!-- Header -->
    <header class="row justify-content-between align-items-center">
      <div class="col-6">
        <h4 class="h6 mb-0">25 Comments</h4>
      </div>
      <div class="col-6 col-sm-4 col-md-3">
        <select class="custom-select w-auto border-0">
          <option selected>Sort by</option>
          <option value="comments1">Top comments</option>
          <option value="comments2">Newest first</option>
        </select>
      </div>
    </header>
    <!-- End Header -->

    <hr class="mt-2 mb-6">

    <!-- Comments -->
    <div>
      <!-- Author -->
      <div class="media mb-3">
        <div class="u-avatar mr-3">
          <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
        </div>
        <div class="media-body">
          <h4 class="d-inline-block mb-1">
            <a class="d-block h6 mb-0" href="#">Russel Fernandes</a>
          </h4>
          <small class="d-block text-muted">3 hours ago.</small>
        </div>
      </div>
      <!-- End Author -->

      <p>Since our attention spans seem to be shrinking by the day — keeping it simple is more important than ever.</p>

      <!-- Likes/Reply -->
      <ul class="list-inline d-flex">
        <li class="list-inline-item">
          <a class="text-secondary" href="#">
            17
            <span class="far fa-thumbs-up ml-1"></span>
          </a>
        </li>
        <li class="list-inline-item ml-3">
          <a class="text-secondary" href="#">
            0
            <span class="far fa-thumbs-down ml-1"></span>
          </a>
        </li>
        <li class="list-inline-item ml-auto">
          <a class="text-secondary" href="#">
            <span class="far fa-comments mr-1"></span>
            Reply
          </a>
        </li>
      </ul>
      <!-- End Likes/Reply -->
    </div>
    <!-- End Comments -->

    <hr class="my-6">

    <!-- Comments -->
    <div class="mb-7">
      <!-- Author -->
      <div class="media mb-3">
        <div class="u-avatar mr-3">
          <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
        </div>
        <div class="media-body">
          <h4 class="d-inline-block mb-1">
            <a class="d-block h6 mb-0" href="#">Elizabeth Lord</a>
          </h4>
          <small class="d-block text-muted">1 day ago.</small>
        </div>
      </div>
      <!-- End Author -->

      <p>As a Special Education teacher this resonates so well with me. Fighting with gen ed teachers to flatten for the students with learning disabilities. It also confirms some things for me in my writing.</p>

      <!-- Likes/Reply -->
      <ul class="list-inline d-flex">
        <li class="list-inline-item">
          <a class="text-secondary" href="#">
            17
            <span class="far fa-thumbs-up ml-1"></span>
          </a>
        </li>
        <li class="list-inline-item ml-3">
          <a class="text-secondary" href="#">
            0
            <span class="far fa-thumbs-down ml-1"></span>
          </a>
        </li>
        <li class="list-inline-item ml-auto">
          <a class="text-secondary" href="#">
            <span class="far fa-comments mr-1"></span>
            Reply
          </a>
        </li>
      </ul>
      <!-- End Likes/Reply -->
    </div>
    <!-- End Comments -->

    <a class="btn btn-block btn-soft-primary transition-3d-hover" href="#">Load More</a>
  </div>
</div>
<!-- End Comments Section -->