Bootstrap 4 Objek Media
Objek Media
Bootstrap menyediakan cara mudah untuk menyelaraskan objek media (seperti gambar atau video) bersama dengan konten. Objek media sering digunakan untuk menampilkan komentar blog, tweet, dan sebagainya:
John Doe Diposting pada 19 Februari 2016
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
John Doe Diposting pada 20 Februari 2016
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Objek Media Dasar
John Doe Diposting pada 19 Februari 2016
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Untuk membuat objek media, tambahkan .mediakelas ke elemen wadah, dan tempatkan konten media di dalam wadah anak dengan .media-bodykelas. Tambahkan padding dan margin sesuai kebutuhan, dengan utilitas spasi:
Contoh
<div class="media border p-3">
<img src="img_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...</p>
</div>
</div>
Objek Media Bersarang
Objek media juga dapat disarangkan (objek media di dalam objek media):
John Doe Diposting pada 19 Februari 2016
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Jane Doe Diposting pada 20 Februari 2016
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Untuk menyarangkan objek media, tempatkan wadah baru .mediadi dalam .media-bodywadah:
Contoh
<div class="media border p-3">
<img src="img_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...</p>
<div class="media p-3">
<img src="img_avatar2.png" alt="Jane
Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
<div
class="media-body">
<h4>Jane Doe <small><i>Posted on
February 20 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
Gambar Media Rata Kanan
John Doe Diposting pada 19 Februari 2016
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Untuk meratakan kanan gambar media, tambahkan gambar setelah .media-bodywadah:
Contoh
<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...</p>
</div>
<img src="img_avatar3.png" alt="John
Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>
Penjajaran Atas, Tengah atau Bawah
Gunakan utilitas fleksibel, align-self-*kelas untuk menempatkan objek media di atas, tengah, atau di bawah:
Atas Media
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Media Tengah
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Bawah Media
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Rasa sakit itu sendiri adalah cinta dari rasa sakit, masalah ekologis utama, tetapi saya memberikan waktu seperti ini untuk jatuh, sehingga beberapa rasa sakit dan rasa sakit yang hebat.
Contoh
<!-- Media top -->
<div class="media">
<img src="img_avatar1.png" class="align-self-start
mr-3" style="width:60px">
<div class="media-body">
<h4>Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<img src="img_avatar1.png" class="align-self-center mr-3" style="width:60px">
<div class="media-body">
<h4>Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<img src="img_avatar1.png" class="align-self-end mr-3" style="width:60px">
<div class="media-body">
<h4>Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>