Media Objectها
بوت استرپ راه ساده‌ای را برای قرار دادن Media Objectها (مانند تصاویر و ویدیوها) در سمت چپ یا راست برخی از محتواها فراهم کرده‌است. این ویژگی را می‌توان برای نشان دادن نظرهای وبلاگ، توییت‌ها و مانند آن به کار برد.[۱]
Media Object ساده
برای ایجاد یک object media کلاس .media را به ظرف عنصر اضافه می‌کنیم، و محتوای media را داخل یک ظرف فرزند با کلاس .media-body قرار می‌دهیم. با استفاده از کاربردهای فاصله گذاری (Spacing Utilities) ، padding و حاشیه مورد نیاز را ایجاد کنید:
مثال
<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>
Media Objectهای تودرتو
Media Objectها می‌توانند تودرتو نیز باشند (یک Media Object داخل یک Media Object):
برای تودرتو ساختن media objectها، یک ظرف (Container) جدید .media داخل ظرف .media-body اضافه کنید:
مثال
<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>
Media objectهای راست چین
برای راست‌چین کردن media image تصویر را بعد از ظرف .media-body قرار دهید:
مثال
<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>
قرار گرفتن در بالا، وسط یا پایین
از کاربردهای flex، کلاس‌های align-self-* برای قرار دادن media objectها در بالا، وسط یا پایین استفاده می‌شود:
مثال
<!-- 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>
منابع آموزشی