Media Object Bootstrap – Nested dan Alignment (Horizontal & Vertikal)

Bootstrap memberikan kemudahan bagi para penggunanya untuk menyesuaikan jajaran media pada situs (seperti gambar dan video) ke sisi kiri ataupun kanan dari sebuah objek, contoh sederhananya seperti ini:

Untuk membuat rata kiri atau kanan seperti contoh di atas, cukup terapkan kode berikut:

<h2>Media Object Bootstrap - Posciety.Com</h2>
  <p>Gunakan class "media-left" untuk membuat jajar kiri media, pastikan untuk memisahkan teks pada class berbeda yaitu class="media-body". Ini juga berlaku untuk jajar kanan.</p>
<br>
  
  <div class="media">
    <div class="media-left">
      <img src="https://movies4maniacs.liberty.me/inc/uploads/sites/1218/2015/09/avatarsucks.jpg" class="media-object" style="width:90px">
    </div>
    <div class="media-body">
      <h4 class="media-heading">Jajar Kiri</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua adipiscing elit, sed do.</p>
    </div>
  </div>
  <hr>
  
  <div class="media">
    <div class="media-body">
      <h4 class="media-heading">Jajar Kanan</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua adipiscing elit, sed do.</p>
    </div>
    <div class="media-right">
      <img src="https://movies4maniacs.liberty.me/inc/uploads/sites/1218/2015/09/avatarsucks.jpg" class="media-object" style="width:90px">
    </div>
  </div>

Terapkan gambar pada class media, pastikan untuk memberikan teks pada class berbeda (simpan teks / isi konten di class media-body). Jika ingin memberikan area tambahan pada koten (misalnya title / heading), berikan class media-heading di dalam class media-body dan letakkan sebelum paragraf. Contoh:

<div class="media-body">
  <h4 class="media-heading">Media Heading</h4>
  <p>Ini adalah paragraf atau isi dari konten media</p>
</div>

Media Object seperti ini biasanya digunakan pada kolom komentar, jika kamu sering berkunjung ke beberapa situs yang mengaktifkan fitur komentar, kamu pasti melihat daftar komentar dalam bentuk seperti ini yang menampilkan foto profil pemberi komentar dan isi dari komentarnya.

JIka berbicara soal sistem komentar, umumnya para user diberikan kemampuan untuk membalas komentar yang ada sehingga tata letaknya Media Object berada di dalam Media Object (Nested) atau yang lebih dikenal dengan Nesting Media Objects.

Nested Media Objects memang sering digunakan pada sistem komentar, ini sangat menguntungkan para penggunanya yang dapat dengan mudah melihat komentar untuk masing-masing komentar. Bahkan media sosial sekelas Facebook pun menggunakan ini. Salin kode berikut untuk membuat Nested Media Objects:

<h2>Nested Media Objects Bootstrap - Posciety.Com</h2>
  <div class="media">
    <div class="media-left">
      <img src="https://movies4maniacs.liberty.me/inc/uploads/sites/1218/2015/09/avatarsucks.jpg" class="media-object" style="width:90px">
    </div>
    <div class="media-body">
      <h4 class="media-heading">Komentar Pertama <small><i>tanggal 02 desember 2018</i></small></h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua adipiscing elit, sed do.</p>
      
      <div class="media">
        <div class="media-left">
          <img src="https://movies4maniacs.liberty.me/inc/uploads/sites/1218/2015/09/avatarsucks.jpg" class="media-object" style="width:90px">
        </div>
        <div class="media-body">
          <h4 class="media-heading">Komentar Balasan 1 <small><i>tanggal 02 februari 2019</i></small></h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua adipiscing elit, sed do.</p>

          <div class="media">
            <div class="media-left">
              <img src="https://movies4maniacs.liberty.me/inc/uploads/sites/1218/2015/09/avatarsucks.jpg" class="media-object" style="width:90px">
            </div>
            <div class="media-body">
              <h4 class="media-heading">Komentar Balasan 2 <small><i>tanggal 02 Juni 2019</i></small></h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing eli.</p>
            </div>
          </div>
          
        </div>
      </div>
      
    </div>
  </div>

Pastikan media-body pertama tidak ditutup terlebih dahulu, masukkan media baru di dalam media-body pertama kemudian tutup media-body pertama jika dirasa Nested Media Object sudah cukup (contoh di atas hanya ada 2 Nested Media Objects).

Selain Nested, kamu juga dapat menentukan rata vertikal dari masing-masing Media Objects. Contoh  di atas hanya menggunakan default (rata atas secara vertikal), kamu dapat menggunakan class media-top, media-middle, dan media-bottom.

<div class="media">
    <div class="media-left media-middle">
      <img src="" class="media-object" style="width:80px">
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media Middle</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>

Gunakan class media-middle jika ingin menampilkan object gambar rata tenga secara vertikal, ini akan terlihat ketika paragraf / teks panjang dan tinggi.