Bootstrap cung cấp một cách dễ dàng để căn chỉnh các media object (như images hoặc videos) cùng với nội dung. Media objects thường được sử dụng để hiển thị các bình luận blog, tweet và hơn thế nữa:
Để tạo một media object, add class .media
cho phần tử container, và đặt media content bên trong phần tử child của container với class .media-body
. Add padding và margins nếu cần với các class tiện ích về khoảng cách:
<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 objects cũng có thể lồng nhau (media object trong media object):
Để lồng media objects, đặt một phần tử container .media
bên trong .media-body
của container cha:
<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>
Để right-align media image, add image sau container .media-body
như ví dụ dưới đây:
<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>
Sử dụng các tiện ích flex, các class align-self-*
để đặt media object ở top, middle hoặc bottom:
<!-- 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>
Ứng Dụng Học
Theo dõi cập nhật nội dung học trên Youtube & Facebook
Thông Tin Liên Hệ
Công Ty Cổ Phần Công nghệ ZicZac Việt Nam.
Website: https://gozic.vn
SĐT: 096 - 70 25 996
Email: ziczacgroup@gmail.com
Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website