Membuat Nested Media Object pada Bootstrap 4

Cara Membuat Nested Media Object pada Bootstrap 4 – Hai ketemu lagi dengan saya dewan komputer dan pada kesempatan kali ini saya akan membahas tentang media object. Media object ini biasa digunakan untuk menampilkan komentar. Seperti yang sobat sering lihat, komentar biasanya terdiri dari foto/gambar, tanggal, teks/komentar, tombol reply dan lain-lain. Selain itu juga biasanya bentuknya berupa treeview atau mempunyai anak. Dan bootstrap juga sudah menyediakan itu.

 

Artikel Tentang Bootstrap Lainnya :

Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah

Macam-macam Form Input pada HTML dan Bootstrap

Cara Membuat SweetAlert dan Macam-Macamnya pada PHP

Membuat Bootstrap Modal dan Animasinya pada PHP

Membuat Badges Menggunakan Bootstrap 4

Membuat Alert pada HTML menggunakan Bootstrap 4

Mengenal Bootstrap Typography pada HTML dan Bootstrap 4

Menggunakan Tooltip pada HTML dan Bootstrap 4

 

Tidak usah berlama-lama, akan saya berikan contohnya dibawah ini, namun sebelum membuat project karena kita akan membuat menggunakan bootstrap khususnya bootstrap 4 maka kita perlu memasukkan librari dari bootstrap 4 terlebih dahulu dengan memasukkan kode dibawah ini pada tag <head>…</head>

1. Media Object Standar

Sebelum membuat project ini tentunya kita menyiapkan gambarnya terlebih dahulu, saya menyediakan 3 gambar dengan nama avatar1.png, avatar2.png, avatar3.png. Contoh penulisan media object adalah sebagai berikut

Tampilannya :

2. Nested Media Object

Media object ini biasa digunakan untuk membuat kolom komentar karena bisa berjenjang, cara penggunaannya adalah sebagai berikut

Hasilnya :

3. Posisi Gambar

Untuk penggunaan standar, posisi gambar biasanya di kiri. Namun kita juga bisa meletakkannya di sebelah kanan. Contoh penggunaannya adalah sebagai berikut :

Hasilnya :

Selain itu , kita bisa meletakkan posisi gambar pada media object diatas, tengah, atau bawah. Ini akan terlihat jika komentar sangat penjang, cara penggunaannya adlaah sebagai berikut :

Hasilnya :

4. Media Object List

Kita juga bisa membuat media object dengan menggunakan list. Cara penulisannya adalah sebagai berikut :

Hasilnya :

Dengan menggunakan bootstrap ini sangat mudah bukan? berbeda jika kita membuat cssnya sendiri pasti akan lebih panjang. Karena menggunakan bootstrap kita bisa membuatnya lebih cepat karena di dunia kerja klien hanya ingin membuat dengan cepat. Untuk jenisnya bisa sobat gabungkan dengan elemen dari bootstrap lainnya untuk menghasilkan tampilan yang lebih bagus. Pada contoh kita membuatnya statis, namun untuk membuatnya dinamis menampilkan data/komentar berjenjang dari database akan saya contohkan pada tutorial saya yang lainnya.

Sekian postingan saya tentang Membuat Nested Media Object pada Bootstrap 4. Jika ada kesalahan saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah.

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

3 thoughts on “Membuat Nested Media Object pada Bootstrap 4

Leave a Reply

Your email address will not be published. Required fields are marked *

2 × 3 =