Membuat Media List Content dengan Bootstrap 4

14/07/2018    Maykhel David    465     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

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More