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 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> |
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
|
1 2 3 4 5 6 7 |
<div class="media border p-3"> <img src="avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;"> <div class="media-body"> <h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> |
Tampilannya :
2. Nested Media Object
Media object ini biasa digunakan untuk membuat kolom komentar karena bisa berjenjang, cara penggunaannya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="media border p-3"> <img src="avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;"> <div class="media-body"> <h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <div class="media p-3"> <img src="avatar2.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;"> <div class="media-body"> <h4>Jane Doe <small><i>Posted on February 20 2016</i></small></h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> </div> |
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 :
|
1 2 3 4 5 6 7 |
<div class="media border p-3"> <div class="media-body"> <h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <img src="avatar3.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;"> </div> |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div class="row"> <div class="col-sm-4"> <div class="media"> <img src="avatar1.png" class="align-self-start mr-3" style="width:60px"> <div class="media-body"> <h4>Media Top</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> <div class="col-sm-4"> <div class="media"> <img src="avatar1.png" class="align-self-center mr-3" style="width:60px"> <div class="media-body"> <h4>Media Middle</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> <div class="col-sm-4"> <div class="media"> <img src="avatar1.png" class="align-self-end mr-3" style="width:60px"> <div class="media-body"> <h4>Media Bottom</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> </div> |
Hasilnya :
4. Media Object List
Kita juga bisa membuat media object dengan menggunakan list. Cara penulisannya adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<ul class="list-unstyled"> <li class="media"> <img src="avatar1.png" class="mr-3" style="width:60px" alt="user"> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </li> <li class="media my-4"> <img src="avatar2.png" class="mr-3" style="width:60px" alt="user"> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </li> <li class="media"> <img src="avatar3.png" class="mr-3" style="width:60px" alt="user"> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </li> </ul> |
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 :