Bootstrap 4 Media Object
Media object merupakan bagian dari bootstrap layout yang berguna untuk menempatkan beberapa komponen dan media (seperti gambar, video dan lainnya) agar memiliki tata letak yang sejajar dengan konten-nya. Layout untuk objek media seperti ini, dimaksudkan untuk membuat stayle sejenis agar dapat digunakan secara berulang (terus-menerus) beberapa kali sesuai kebutuhan. Sehingga, dapat diaplikasikan pada komponen yang kompleks sekalipun
Penggunaan Bootstrap media object sering kita lihat pada layout komentar (comment) yang biasanya terdapat dalam sebuah halaman blog. Bootstrap media object juga bisa digunakan untuk aplikasi lainnya sesuai kebutuhan.
Cara Menggunakan
Bootstrap Media Object
Untuk menggunakan bootstrap media object hanya dibutuhkan dua nama class, yaitu media dan media-body. class media digunakan sebagai induk objek atau sebuah kontainer yang menampung media. Adapun, media-body adalah konten yang berdampingan dengan media tersebut.
Untuk penataan yang lebih baik dan mengatur spasi (jarak) antar element, Anda juga dapat menggunakan spacing utilities bawaan bootstrap. Akan tetapi, jika Anda memiliki style khusus sendiri maka utilities tersebut tidak diperlukan.
Contoh
Beberapa contoh berikut langsung dapat Anda praktekkan. dengan editor khusus dari kami, Anda bisa koding langsung di browser dan melihat hasilnya secara realtime.
Contoh 1:
<div class="media">
<img class="mr-3" src="/media/wiki/kartini-64.jpg" alt="Raden Ajeng Kartini">
<div class="media-body">
<h5 class="mt-0">Raden Ajeng Kartini</h5>
<p>Raden Adjeng Kartini / Raden Ayu Kartini merupakan salah seorang pahlawan nasional perempuan yang telah menghabiskan sebagian hidupnya untuk memperjuangkan kesetaraan hak kaumnya dan dikenal sebagai pelopor kebangkitan perempuan pribumi.</p>
</div>
</div>
Raden Ajeng Kartini
Raden Adjeng Kartini / Raden Ayu Kartini merupakan salah seorang pahlawan nasional perempuan yang telah menghabiskan sebagian hidupnya untuk memperjuangkan kesetaraan hak kaumnya dan dikenal sebagai pelopor kebangkitan perempuan pribumi.
Pada contoh tersebut, keterangannya adalah sebagai berikut:
- Baris ke-1: menulis HTML element <div> dengan nama class
mediadiakhiri dengan tag penutup</div> dibaris ke-6. - Baris ke-2: Menulis HTML <img> tag, Pada contoh tersebut media yang digunakan adalah sebuah gambar. class
mr-3digunakan untuk memberi spasi margin kanan(margin-right). - Baris ke-3: menulis tag <div> dengan tambahan nama class
.media-bodyyang dapat diisi dengan konten (teks) yang bersebelahan dengan objek media. - class
mt-0digunakan untuk memberi spasi margin atas (margin-top)
Nested (Bersarang) / Bertumpuk
Dalam sebuah media objek dapat ditulis media objek lain secara bertumpuk. Untuk menggunakannya, buat contoh pertama diatas sebanyak dua kali, kemudian objek kedua letakkan di dalam class .media-body objek pertama. Berikut contohnya:
<div class="media">
<img class="mr-3" src="/media/wiki/kartini-64.jpg" alt="Raden Ajeng Kartini">
<div class="media-body">
<h5 class="mt-0">Raden Ajeng Kartini</h5>
<p>Raden Adjeng Kartini / Raden Ayu Kartini merupakan salah seorang pahlawan nasional perempuan yang telah menghabiskan sebagian hidupnya untuk memperjuangkan kesetaraan hak kaumnya dan dikenal sebagai pelopor kebangkitan perempuan pribumi.</p>
<div class="media">
<img class="mr-3" src="/media/wiki/cut-nyak-dhien-64.jpg" alt="Cut Nyak Dhien">
<div class="media-body">
<h5 class="mt-0">Cut Nyak Dhien</h5>
<p>Cut Nyak Dhien lahir di Aceh, tahun 1848. Ia meninggal di Sumedang, Jawa Barat, 6 November 1908 pada umur 59-60 tahun dan dimakamkan di Gunung Puyuh, Sumedang. Kini namanya pun dikenang sebagai pahlawan nasional, dan diabadikan sebagai Bandar Udara Cut Nyak Dhien Nagan Raya di Meulaboh.</p>
</div>
</div>
</div>
</div>
Raden Ajeng Kartini
Raden Adjeng Kartini / Raden Ayu Kartini merupakan salah seorang pahlawan nasional perempuan yang telah menghabiskan sebagian hidupnya untuk memperjuangkan kesetaraan hak kaumnya dan dikenal sebagai pelopor kebangkitan perempuan pribumi.
Cut Nyak Dhien
Cut Nyak Dhien lahir di Aceh, tahun 1848. Ia meninggal di Sumedang, Jawa Barat, 6 November 1908 pada umur 59-60 tahun dan dimakamkan di Gunung Puyuh, Sumedang. Kini namanya pun dikenang sebagai pahlawan nasional, dan diabadikan sebagai Bandar Udara Cut Nyak Dhien Nagan Raya di Meulaboh.
Penataan (Alignment) Media
Karena Bootstrap 4 menggunakan flex, maka kita juga dapat menggunakan flex utilities bawaan bootstrap untuk mengatur perataan objek media supaya rata atas, tengah atau bawah.
Berikut contoh lengkapnya dibawah ini, perhatikan penataan pada media gambarnya.
Rata Atas (top-aligned) Media
<div class="media">
<img class="align-self-start mr-3" src="/media/wiki/kartini-64.jpg" alt="Raden Ajeng Kartini">
<div class="media-body">
<h5 class="mt-0">Raden Ajeng Kartini</h5>
<p>Raden Adjeng Kartini / Raden Ayu Kartini merupakan salah seorang pahlawan nasional perempuan yang telah menghabiskan sebagian hidupnya untuk memperjuangkan kesetaraan hak kaumnya dan dikenal sebagai pelopor kebangkitan perempuan pribumi.</p>
</div>
</div>
Raden Ajeng Kartini
Raden Adjeng Kartini / Raden Ayu Kartini merupakan salah seorang pahlawan nasional perempuan yang telah menghabiskan sebagian hidupnya untuk memperjuangkan kesetaraan hak kaumnya dan dikenal sebagai pelopor kebangkitan perempuan pribumi.
Rata Tengah (center-aligned) Media
<div class="media">
<img class="align-self-center mr-3" src="/media/wiki/kartini-64.jpg" alt="Raden Ajeng Kartini">
<div class="media-body">
<h5 class="mt-0">Raden Ajeng Kartini</h5>
<p>Raden Adjeng Kartini / Raden Ayu Kartini merupakan salah seorang pahlawan nasional perempuan yang telah menghabiskan sebagian hidupnya untuk memperjuangkan kesetaraan hak kaumnya dan dikenal sebagai pelopor kebangkitan perempuan pribumi.</p>
</div>
</div>
Raden Ajeng Kartini
Raden Adjeng Kartini / Raden Ayu Kartini merupakan salah seorang pahlawan nasional perempuan yang telah menghabiskan sebagian hidupnya untuk memperjuangkan kesetaraan hak kaumnya dan dikenal sebagai pelopor kebangkitan perempuan pribumi.
Rata Bawah (bottom-aligned) Media
<div class="media">
<img class="align-self-end mr-3" src="/media/wiki/kartini-64.jpg" alt="Raden Ajeng Kartini">
<div class="media-body">
<h5 class="mt-0">Raden Ajeng Kartini</h5>
<p>Raden Adjeng Kartini / Raden Ayu Kartini merupakan salah seorang pahlawan nasional perempuan yang telah menghabiskan sebagian hidupnya untuk memperjuangkan kesetaraan hak kaumnya dan dikenal sebagai pelopor kebangkitan perempuan pribumi.</p>
</div>
</div>
Raden Ajeng Kartini
Raden Adjeng Kartini / Raden Ayu Kartini merupakan salah seorang pahlawan nasional perempuan yang telah menghabiskan sebagian hidupnya untuk memperjuangkan kesetaraan hak kaumnya dan dikenal sebagai pelopor kebangkitan perempuan pribumi.
Order (Pengurutan)
Media (gambar dan lainnya) selain diposisikan di sebelah kiri, kita juga dapat menempatkannya di posisi kanan dan konten-nya disebelah kiri (dibalik).
Caranya, kita dapat memindahkan element (<img>) di akhir. Atau kita juga dapat menggunakan kode CSS flexbox sendiri.
Perhatikan contoh dibawah ini:
<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">Raden Ajeng Kartini</h5>
<p>Raden Adjeng Kartini / Raden Ayu Kartini merupakan salah seorang pahlawan nasional perempuan yang telah menghabiskan sebagian hidupnya untuk memperjuangkan kesetaraan hak kaumnya dan dikenal sebagai pelopor kebangkitan perempuan pribumi.</p>
</div>
<img class="mr-l" src="/media/wiki/kartini-64.jpg" alt="Raden Ajeng Kartini">
</div>
Raden Ajeng Kartini
Raden Adjeng Kartini / Raden Ayu Kartini merupakan salah seorang pahlawan nasional perempuan yang telah menghabiskan sebagian hidupnya untuk memperjuangkan kesetaraan hak kaumnya dan dikenal sebagai pelopor kebangkitan perempuan pribumi.
Media List
Media list adalah media object yang ditempatkan pada HTML list element seperti <ul> dan <ol>
Untuk menggunakannya, tambahkan class .list-unstyled pada ul atau ol element tersebut. Kemudian class .media ditulis didalam element <li>.
Untuk memahaminya, berikut contoh lengkapnya:
<ul class="list-unstyled">
<li class="media">
<img class="mr-3" src="/media/wiki/cut-nyak-dhien-64.jpg" alt="Cut Nyak Dhien">
<div class="media-body">
<h5 class="mt-0 bt-1">Cut Nyak Dhien</h5>
<p>Cut Nyak Dhien lahir di Aceh, tahun 1848. Ia meninggal di Sumedang, Jawa Barat, 6 November 1908 pada umur 59-60 tahun dan dimakamkan di Gunung Puyuh, Sumedang. Kini namanya pun dikenang sebagai pahlawan nasional, dan diabadikan sebagai Bandar Udara Cut Nyak Dhien Nagan Raya di Meulaboh.</p>
</div>
</li>
<li class="media my-4">
<img class="mr-3" src="/media/wiki/kartini-64.jpg" alt="Raden Ajeng Kartini">
<div class="media-body">
<h5 class="mt-0 bt-1">Raden Ajeng Kartini</h5>
<p>Raden Adjeng Kartini / Raden Ayu Kartini merupakan salah seorang pahlawan nasional perempuan yang telah menghabiskan sebagian hidupnya untuk memperjuangkan kesetaraan hak kaumnya dan dikenal sebagai pelopor kebangkitan perempuan pribumi.</p>
</div>
</li>
<li class="media my-4">
<img class="mr-3" src="/media/wiki/tuanku-imam-bonjol-64.jpg" alt="Tuanku Imam Bonjol">
<div class="media-body">
<h5 class="mt-0 bt-1">Tuanku Imam Bonjol</h5>
<p>Tuanku Imam Bonjol lahir di Bonjol, Pasaman, Sumatera Barat, Indonesia pada 1 Januari 1772. Beliau wafat dalam pengasingan dan dimakamkan di Lotak, Pineleng, Minahasa, pada 6 November 1864. Beliau adalah salah seorang ulama, pemimpin dan pejuang yang berperang melawan Belanda dalam peperangan yang dikenal dengan nama Perang Padri pada tahun 1803-1838.</p>
</div>
</li>
</ul>
-
Cut Nyak Dhien
Cut Nyak Dhien lahir di Aceh, tahun 1848. Ia meninggal di Sumedang, Jawa Barat, 6 November 1908 pada umur 59-60 tahun dan dimakamkan di Gunung Puyuh, Sumedang. Kini namanya pun dikenang sebagai pahlawan nasional, dan diabadikan sebagai Bandar Udara Cut Nyak Dhien Nagan Raya di Meulaboh.
-
Raden Ajeng Kartini
Raden Adjeng Kartini / Raden Ayu Kartini merupakan salah seorang pahlawan nasional perempuan yang telah menghabiskan sebagian hidupnya untuk memperjuangkan kesetaraan hak kaumnya dan dikenal sebagai pelopor kebangkitan perempuan pribumi.
-
Tuanku Imam Bonjol
Tuanku Imam Bonjol lahir di Bonjol, Pasaman, Sumatera Barat, Indonesia pada 1 Januari 1772. Beliau wafat dalam pengasingan dan dimakamkan di Lotak, Pineleng, Minahasa, pada 6 November 1864. Beliau adalah salah seorang ulama, pemimpin dan pejuang yang berperang melawan Belanda dalam peperangan yang dikenal dengan nama Perang Padri pada tahun 1803-1838.
SHARE