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.
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More