Tutorial Bootstrap 4 #24 : Media Object Bootstrap 4

Media Object Bootstrap 4 – Selamat datang kembali di seri tutorial bootstrap 4 terlengkap. pada tutorial ini kita akan belajar tentang salah satu komponen bootstrap lagi. yaitu media object atau objek media.

Media Object Bootstrap 4

Media object adalah komponen bootstrap untuk membuat komentar blog, tweet dan lain-lain.

Bentuk komponen ini seperti kolom komentar pada sebuah blog atau website. sehingga sangat cocok kita gunakan untuk membuat bagian kolom komentar pada artikel.

Berikut contoh cara pembuatan komponen media object ini.

Baca : Cara menghubngkan bootstrap dengan proyek html

Membuat Kolom Komentar Dengan Bootstrap 4

Seperti yang sudah disinggung sebelumnya, bahwa komponen objek media ini bisa kita gunakan untuk membuat kolom komentar pada artikel.

Karena memang bentuknya seperti kolom komentar.

Perhatikan contoh berikut. Oh ya pada contoh ini saya sudah menyediakan sebuah gambar dengan nama gambar4.jpg sebagai gambar contoh.

Perhatikan contoh kolom komentar yang kita buat dengan media object di atas, untuk membuat media object, kita bisa menggunakan class .media. dan didalamnya bisa kita tambahkan lagi class .media-body untuk membuat bagian body pada media.

Pada komponen media di atas juga sudah kita hubungkan ke file gambar yang bernama gambar4.jpg.

Lihat hasilnya.

Media Object Bootstrap 4

Contoh di atas hanya menggunakan satu buah media object, silahkan teman-teman buat menjadi beberapa komponen agar menyerupai kolom komentar.

Nesting

Maksud dari istilah nesting ini adalah komponen media object yang memiliki sistem parent-child. atau bahasa mudahnya adalah membuat media object (komentar) di dalam media object (komentar).

Perhatikan coontoh berikut.

dan hasilnya.

membuat kolom komentar dengan bootstrap

Perhatikan contoh di atas, untuk membuat media object di dalam media object, kita tinggal membuat media object nya lagi di dalam bagian body dari media.

Posisi Gambar

Kita juga bisa mengubah posisi dari gambar yang ada pada kolom komentar yang kita buat seperti pada contoh di atas tadi. biasanya pada bagian gambar kita menampilkan gambar dari foto profil pengguna yang membuat komentar.

Nah gambar tersebut bisa kita atur posisi dengan sangat mudah. caranya kita bisa menggunakan class berikut pada elemen gambar ( tag <img> ).

• align-self-start untuk membuat posisi gambar berada pada bagian awal atau bagian atas.
• align-self-center untuk membuat posisi gambar berada tepat di tengah-tengah.
• align-self-end untuk membuat posisi gambar pada bagian terakhir atau bagian paling bawah.

Perhatikan contoh berikut.

Dan lihat hasil berikut. posisi gambar pun berubah sesuai dengan class yang kita tentukan pada tag <img> masing-masing.

posisi gambar media object

Oke selesai.

Jika teman-teman ingin mengubah posisi gambarnya pada sebelah kanan atau sebelah kiri, tinggal memindahkan elemen gambar atau tag <img> nya masing-masing.

Pindahkan gambar ke bagian bawah konten jika ingin gambarnya ditampilkan pada sebelah kanan, dan biarkan elemen gambarnya di atas konten jika ingin gambar tampil di sebelah kiri seperti contoh sebelumnya.

Maka hasilnya akan seperti pada gambar berikut.

membuat komentar menggunakan bootstrap

Media List

Pada sub judul media list ini kita akan belajar membuat beberapa media object yang berurutan seperti beberapa kolom komentar.

Untuk membuat media list, kita bisa menggunakan elemen <ul> dan <li>, seperti membuat list biasa pada HTML.

Perhatikan contoh berikut.

Dan berikut hasilnya.

contoh kolom komentar dengan bootstrap 4

Oke selesai sudah teman-teman materi tentang objek media bootstrap 4.

Jika teman-teman merasa bingung, silahkan teman-teman lihat demo dan download source code jadi nya pada link berikut.

Demo

Download Source Code