Membuat Media List Content dengan Bootstrap 4

14/07/2018    Maykhel David    548     Website

Cara membuat media list content dengan bootstrap 4 – Pernahkah kalian melihat sebuah website dengan tampilan list menggunakan gambar seperti thumbnail? Kira gambarannya akan seperti ini jika diterapkan pada halaman website kalian.
 
 Bootstrap 4 memiliki media list content dengan kustomisasi yang cukup lengkap. Berikut ini adalah contoh struktur standard yang bisa kalian gunakan

<ul class="list-unstyled">
  <li class="media my-4">
    <img class="mr-3" src="..." alt="Generic placeholder image">
    <div class="media-body">
      <h5 class="mt-0 mb-1">Judul List</h5>
      <p> ... </p>
    </div>
  </li>
  <li class="media my-4">
    <img class="mr-3" src="..." alt="Generic placeholder image">
    <div class="media-body">
      <h5 class="mt-0 mb-1">Judul List</h5>
      <p> ... </p>
    </div>
  </li>
  <li class="media my-4">
    <img class="mr-3" src="..." alt="Generic placeholder image">
    <div class="media-body">
      <h5 class="mt-0 mb-1">Judul List</h5>
      <p> ... </p>
    </div>
  </li>
</ul>

Jika kalian ingin mengubah letak gambarnya menjadi di kanan bisa kalian pindahkan image yang kalian panggil menjadi seperti ini
<div class="media">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Judul List</h5>
    <p> … </p>
  </div>
  <img class="ml-3" src="..." alt="Generic placeholder image">
</div>

Kalian juga bisa mengubah letak gambar menjadi agak keatas atau kebawah dengan menggunakan class

.align-self-start, .align-self-center, .align-self-end

Dan juga bootstrap menyediakan template dengan membuat list tersebut menjadi bersifat nested. Apa yang dimaksud nested adalah terdapat list baru di dalam sebuah list item. Seperti Ini contohnya

<div class="media">
  <img class="mr-3" src="..." alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio

    <div class="media mt-3">
      <a class="pr-3" href="#">
        <img src="..." alt="Generic placeholder image">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
      </div>
    </div>
  </div>
</div>

Bisa kalian coba masing – masing ya, pada artikel ini saya menggunakan bootstrap versi 4.1.1 yang bisa kalian download pada website resmi bootstrap. Baiklah teman – teman demikian artikel kali ini yang membahas tentang Cara membuat media list content dengan bootstrap 4. Semoga bermanfaat.

 

Bootstrap