Membuat Layout Komentar dengan Bootstrap 4

Layout Komentar dengan Bootstrap 4 – Hallo semuanya, sebelumnya pasti kalian memiliki akun social media, yang tentunya sudah sangat terbuiasa dengan berkomentar di postingan seseorang, baik itu foto, atau sekedar status biasa, apakah kalian pernah berpikir untuk membuat layout komentar serupa pada website? Jika. iya, maka kalian dating pada artikel yang tept. Pada artikel kali ini saya akan membuat sebuah layout sederhana berbentuk komentar dengan reply mengunakan bootstrap 4. Untuk lebih jelasnya simak saja artikel berikut

Struktur HTML

Pada struktur berikut kita mengunakan sebuah komponen yang ada pada bootstrap 4 yaitu media. Dimana struktur dasar media adalah seperti berikut

<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    . . .
  </div>
</div>

Dimana kita akan kembankan dengan memberikan link untuk like dan reply.

<div class="media mt-3">
  <img src="assets/images/transparent.png" class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Richard</h5>
    Cras sit amet nibh libero,
    <p><a href="#">1 like</a> <a href="#">reply</a></p>
  </div>
</div>

Serta kita juga akan membuat nested, atau layout untuk membalas komentar tersebut.

<div class="media mt-3">
  <img src="assets/images/transparent.png" class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Susanto</h5>
    Cras sit amet nibh libero,
    <p><a href="#">1 like</a> <a href="#">reply</a></p>
    <div class="media mt-1">
      <a class="mr-3" href="#">
        <img src="assets/images/transparent.png" class="mr-3" alt="...">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Robert</h5>
        Cras sit amet nibh libero, in gravida nulla.
      </div>
    </div>
  </div>
</div>

Berikut adalah layout komentar juka kita susun dengan benar.

<div class="media mt-3">
  <img src="assets/images/transparent.png" class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Susanto</h5>
    Cras sit amet nibh libero,
    <p><a href="#">1 like</a> <a href="#">reply</a></p>
    <div class="media mt-1">
      <a class="mr-3" href="#">
        <img src="assets/images/transparent.png" class="mr-3" alt="...">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Robert</h5>
        Cras sit amet nibh libero, in gravida nulla.
      </div>
    </div>
  </div>
</div>
<div class="media mt-3">
  <img src="assets/images/transparent.png" class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Richard</h5>
    Cras sit amet nibh libero,
    <p><a href="#">1 like</a> <a href="#">reply</a></p>
  </div>
</div>
<div class="media mt-3">
  <img src="assets/images/transparent.png" class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Naruto</h5>
    Cras sit amet nibh libero,
    <p><a href="#">1 like</a> <a href="#">reply</a></p>
  </div>
</div>

Baiklah teman – teman,dengan begitu kalian sudah bisa melihat sebuah layout yang hampir serupa dengan social media lainnya. Demikian artikel ini yang membahas tentan cara membuat layout komentar dengan bootstrap 4. Semoga bermanfaat .