Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar Bootstrap Bagian 16 : Cara Membuat Card di Bootstrap, selanjutnya kita akan belajar cara membuat media object di Bootstrap.
Jika Anda ingin membuat layout yang berisi objek media rata kiri atau kanan seperti gambar atau video di samping konten tekstual seperti komentar blog, Tweet, dll.
Anda dapat melakukannya dengan mudah menggunakan komponen media Bootstrap yang baru diperkenalkan, seperti ini:
<div class="media">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/ava.png" class="mr-3" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Budi Suseno <small><i>Posting pada 10 Januari 2021</i></small></h5>
<p>Fitur luar biasa! Aku menyukainya. Suatu hari saya pasti akan menggunakan komponen Bootstrap ini dan saya akan memberi tahu Anda setelah saya melakukannya.</p>
</div>
</div>
<hr>
<div class="media">
<div class="media-body">
<h5 class="mt-0">Budi Suseno <small><i>Posting pada 10 Januari 2021</i></small></h5>
<p>Fitur luar biasa! Aku menyukainya. Suatu hari saya pasti akan menggunakan komponen Bootstrap ini dan saya akan memberi tahu Anda setelah saya melakukannya.</p>
</div>
<img src="https://mbahwp.com/wp-content/uploads/2021/04/ava.png" class="ml-3" alt="Sample Image">
</div>
Anda juga dapat membuat variasi lain dari komponen media.
Terapkan class pengubah gambar seperti .rounded atau .rounded-circle ke gambar untuk membuat gambar sudut bulat atau lingkaran.
<div class="media">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/ava.png" class="mr-3 rounded" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Budi Suseno <small><i>Posting pada 10 Januari 2021</i></small></h5>
<p>Fitur luar biasa! Aku menyukainya. Suatu hari saya pasti akan menggunakan komponen Bootstrap ini dan saya akan memberi tahu Anda setelah saya melakukannya.</p>
</div>
</div>
<hr>
<div class="media">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/ava.png" class="mr-3 rounded-circle" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Budi Suseno <small><i>Posting pada 10 Januari 2021</i></small></h5>
<p>Fitur luar biasa! Aku menyukainya. Suatu hari saya pasti akan menggunakan komponen Bootstrap ini dan saya akan memberi tahu Anda setelah saya melakukannya.</p>
</div>
</div>
Membuat Objek Media Bersarang
Objek media juga bisa disarangkan di dalam objek media lainnya. Ini bisa sangat berguna untuk membuat utas komentar di posting blog. Berikut ini contohnya:
<div class="media">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/ava.png" class="rounded-circle mr-3" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Budi Suseno <small><i>Posting pada 10 Januari 2021</i></small></h5>
<p>Ini benar-benar fitur yang luar biasa! Aku menyukainya. Suatu hari saya pasti akan menggunakan komponen objek media Bootstrap ini ke dalam aplikasi saya.</p>
<!-- Nested media object -->
<div class="media mt-2">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/ava.png" class="rounded-circle mr-3" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Bang Jago <small><i>Posting pada 12 Januari 2021</i></small></h5>
<p>Terima kasih, Anda merasa komponen ini berguna. Jangan lupa untuk memeriksa komponen Bootstrap lainnya juga. Mereka juga sangat berguna.</p>
</div>
</div>
</div>
</div>
Penjajaran Objek Media
Anda juga dapat mengubah perataan horizontal konten dan media hanya dengan mengubah kode HTML itu sendiri, seperti yang ditunjukkan pada contoh berikut:
<div class="media">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/ava.png" class="mr-3" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Budi Suseno <small><i>Posting pada 10 Januari 2021</i></small></h5>
<p>Ini benar-benar fitur yang luar biasa! Aku menyukainya. Suatu hari saya pasti akan menggunakan komponen objek media Bootstrap ini ke dalam aplikasi saya.</p>
</div>
</div>
<hr>
<div class="media">
<div class="media-body">
<h5 class="mt-0">Budi Suseno <small><i>Posting pada 10 Januari 2021</i></small></h5>
<p>Ini benar-benar fitur yang luar biasa! Aku menyukainya. Suatu hari saya pasti akan menggunakan komponen objek media Bootstrap ini ke dalam aplikasi saya.</p>
</div>
<img src="https://mbahwp.com/wp-content/uploads/2021/04/ava.png" class="ml-3" alt="Sample Image">
</div>
Selain itu Anda juga dapat menyelaraskan gambar atau media lain di tengah atau bawah blok konten menggunakan class utilitas flexbox, misalnya Anda dapat menggunakan class .align-self-center untuk perataan tengah vertikal, dan class .align -self-end untuk perataan bawah.
Secara default, media di dalam objek media diratakan atas. Berikut contohnya:
<!-- Media rata atas -->
<div class="media">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/ava.png" class="mr-3" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Media rata atas<small><i>Ini adalah nilai default</i></small></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.</p>
<p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis.</p>
<p>Amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
</div>
</div>
<hr>
<!-- Media rata tengah -->
<div class="media">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/ava.png" class="align-self-center mr-3" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Media rata tengah</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.</p>
<p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis.</p>
<p>Amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
</div>
</div>
<hr>
<!-- Media rata bawah -->
<div class="media">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/ava.png" class="align-self-end mr-3" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Media rata bawah</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.</p>
<p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis.</p>
<p>Amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
</div>
</div>
Membuat Daftar Media
Anda juga dapat membuat daftar media menggunakan elemen daftar HTML dan class objek media.
Cukup terapkan class .list-unstyled pada elemen <ul> atau <ol>, dan class .media pada elemen anak <li>, seperti yang ditunjukkan dalam contoh berikut:
<ul class="list-unstyled">
<li class="media">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/ava.png" class="mr-3" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Objek media berbasis daftar</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.</p>
</div>
</li>
<li class="media my-2">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/ava.png" class="mr-3" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Objek media berbasis daftar</h5>
<p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis.</p>
</div>
</li>
<li class="media">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/ava.png" class="mr-3" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Objek media berbasis daftar</h5>
<p>Amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
</div>
</li>
</ul>
Semoga tutorial ini bisa membantu Anda untuk belajar cara membuat media object di Bootstrap.
