Media Objectها
بوت استرپ راه ساده‌ای را برای قرار دادن Media Objectها (مانند تصاویر و ویدیوها) در سمت چپ یا راست برخی از محتواها فراهم کرده‌است. این ویژگی را می‌توان برای نشان دادن نظرهای وبلاگ، توییت‌ها و مانند آن به کار برد.[۱]
Media Object ساده
برای ایجاد یک object media کلاس .media را به ظرف عنصر اضافه می‌کنیم، و محتوای media را داخل یک ظرف فرزند با کلاس .media-body قرار می‌دهیم. با استفاده از کاربردهای فاصله گذاری (به انگلیسی: Spacing Utilities) ، padding و حاشیه مورد نیاز را ایجاد کنید:
مثال
1 <div class="media border p-3">
2 <img src="img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
3 <div class="media-body">
4 <h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
5 <p>Lorem ipsum...</p>
6 </div>
7 </div>
Media Objectهای تودرتو
Media Objectها می‌توانند تودرتو نیز باشند (یک Media Object داخل یک Media Object):
برای تودرتو ساختن media objectها، یک ظرف (به انگلیسی: Container) جدید .media داخل ظرف .media-body اضافه کنید:
مثال
1 <div class="media border p-3">
2 <img src="img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
3 <div class="media-body">
4 <h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
5 <p>Lorem ipsum...</p>
6 <div class="media p-3">
7 <img src="img_avatar2.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
8 <div class="media-body">
9 <h4>Jane Doe <small><i>Posted on February 20 2016</i></small></h4>
10 <p>Lorem ipsum...</p>
11 </div>
12 </div>
13 </div>
14 </div>
Media objectهای راست چین
برای راست‌چین کردن media image تصویر را بعد از ظرف .media-body قرار دهید:
مثال
1 <div class="media border p-3">
2 <div class="media-body">
3 <h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
4 <p>Lorem ipsum...</p>
5 </div>
6 <img src="img_avatar3.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
7 </div>
قرار گرفتن در بالا، وسط یا پایین
از کاربردهای flex، کلاس‌های align-self-* برای قرار دادن media objectها در بالا، وسط یا پایین استفاده می‌شود:
مثال
1 <!-- Media top -->
2 <div class="media">
3 <img src="img_avatar1.png" class="align-self-start mr-3" style="width:60px">
4 <div class="media-body">
5 <h4>Media Top</h4>
6 <p>Lorem ipsum...</p>
7 </div>
8 </div>
9
10 <!-- Media middle -->
11 <div class="media">
12 <img src="img_avatar1.png" class="align-self-center mr-3" style="width:60px">
13 <div class="media-body">
14 <h4>Media Middle</h4>
15 <p>Lorem ipsum...</p>
16 </div>
17 </div>
18
19 <!-- Media bottom -->
20 <div class="media">
21 <img src="img_avatar1.png" class="align-self-end mr-3" style="width:60px">
22 <div class="media-body">
23 <h4>Media Bottom</h4>
24 <p>Lorem ipsum...</p>
25 </div>
26 </div>
منابع آموزشی