Bootstrap media objects provide functionality to place image either left or right to the textual content.
Note:Media object provides facility to place image either left or right of the content that lies vertically center to the content.
.media
to the parent container of media object.
.media-body
to the child element of media container that contains textual information.
<img>
inside the media container having .media
.
The web design learning process is very easy. You have to learn design techniques and tools that improve the design layout.
The web design learning process is very easy. You have to learn design techniques and tools that improve the design layout.
General Syntax
<div class="media">
<img src="https://picsum.photos/200/300" class="rounded img-fluid m-4" alt="Rounded Image" />
<div class="media-body p-2">
<h4 class="mt-0">Media Body Heading</h4>
<p>Media body content.</p>
</div>
</div>
Source Code
<div class="container my-2">
<div class="media">
<img src="https://picsum.photos/200/300" class="rounded img-fluid m-4"
alt="Rounded Image" style="width: 150px; height: 150px;" />
<div class="media-body p-2">
<h4 class="mt-0">Media Object: Left Image</h4>
<p>This is an example of media object having image in the left direction.</p>
</div>
</div>
</div>
Try it yourself
Source Code : Output
This is an example of media object having image in the left direction.
Note:In the above example, assign .media
to the media object container and place the textual content inside the child element of media object having .media-object.
In the end, place the image inside the media object.
Media objects can be nested inside other media objects. It can be widely used in a blog post since more than one user interacts regarding any topic.
Bootstrap provides media object concept that id widely used in the blogging system. Most of the blogging comment system is designed on the concept of media object.
Really your comment is very useful during blogging system development.
General Syntax
<div class="media">
<img src="..." class="rounded img-fluid m-4" alt="Rounded Image" />
<div class="media-body">
<h5 class="mt-0">
Smith Roy<small><i>Posted on 10 Jan ,2021</i></small>
</h5>
<p>Media body content</p>
<!-- Nested media object -->
<div class="media mt-2">
<img src="...." class="rounded img-fluid m-4" alt="Rounded Image" />
<div class="media-body">
<h5 class="mt-0">
John Doe <small><i>Posted on 12 Jan,2021</i></small>
</h5>
<p>Media Body content</p>
</div>
</div>
</div>
</div>
Source Code
<div class="container mt-4">
<div class="media">
<img src="https://picsum.photos/200/300" class="rounded img-fluid m-4" alt="Rounded Image"
style="width: 40px; height: 40px;" />
<div class="media-body">
<h5 class="mt-0">
Smith Roy<small><i>Posted on 10 Jan ,2021</i></small>
</h5>
<p>Bootstrap provides media object concept that id widely used in the bloging system.
Most of the blogging comment system is designed on the concept of media object.</p>
<!-- Nested media object -->
<div class="media mt-2">
<img src="https://picsum.photos/200/300" class="rounded img-fluid m-4"
alt="Rounded Image" style="width: 40px; height: 40px;" />
<div class="media-body">
<h5 class="mt-0">
John Doe <small><i>Posted on 12 Jan,2021</i></small>
</h5>
<p>Really your comment is very useful during blogging system development.</p>
</div>
</div>
</div>
</div>
</div>
Try it yourself
Source Code : Output
Bootstrap provides media object concept that id widely used in the bloging system. Most of the blogging comment system is designed on the concept of media object.
Really your comment is very useful during blogging system development.
Note:Please keep in mind that In the nested media object,the second media object is placed within .media-body
section of first media object.
You can put image either left or right in media object.To put image left in media obejct place <img>
inside media container as a first child and then place the <div>
containing .media-body
and to place right image ,you have to put the <div>
containing .media-body
class first and then
<img>
.
Generally image is aligned vertically at the top position.You can change it center by adding .align-self-center
class to <img >
tag base class and to align vertically end of the container by adding .align-self-end
class to the
<img>
element base class.
General Syntax
<div class="media">
<img src="https://picsum.photos/200/300" class="rounded img-fluid m-4" alt="Rounded Image" />
<div class="media-body p-2">
<p class="mt-0">Media Body Content</p>
</div>
</div>
Source Code
<div class="container">
<div class="media">
<img src="https://picsum.photos/200/300" class="rounded img-fluid m-4" alt="Rounded Image"
style="width: 150px; height: 150px;" />
<div class="media-body p-2">
<h4 class="mt-0">Media Object:Left Image</h4>
<p>This is an example of media object having image in the left direction.</p>
</div>
</div>
</div>
Try it yourself
Source Code : Output
This is an example of media object having image in the left direction.
Note:Please keep in mind that image can be placed either left or right inside the media object.
Basically it is a group of media object that is created by providing .list-unstyled
to either <ul>
or <ol>
element base class and add .media
to the <li>
element base class.
General Syntax
<ul class="list-unstyled">
<li class="media my-2">
<img src="...." class="rounded img-fluid mr-3" alt="Rounded Image" />
<div class="media-body">
<h5 class="mt-0">Media Object List Concept</h5>
<p>Media Body Content..</p>
</div>
</li>
<li class="media">
<img src="...." class="rounded img-fluid mr-3" alt="Rounded Image" />
<div class="media-body">
<h5 class="mt-0">Media Object List Concept</h5>
<p>Media Body Content..</p>
</div>
</li>
</ul>
Source Code
<div class="container text-center mt-4">
<ul class="list-unstyled">
<li class="media">
<img src="https://picsum.photos/200/300" class="rounded img-fluid mr-3" alt="Rounded Image" style="width: 100px; height: 100px;" />
<div class="media-body">
<h5 class="mt-0">Media Object List Concept</h5>
<p>Write down media body content.</p>
</div>
</li>
<li class="media my-2">
<img src="https://picsum.photos/200/300" class="rounded img-fluid mr-3" alt="Rounded Image" style="width: 100px; height: 100px;" />
<div class="media-body">
<h5 class="mt-0">Media Object List Concept</h5>
<p>Describe media body content.</p>
</div>
</li>
<li class="media">
<img src="https://picsum.photos/200/300" class="rounded img-fluid mr-3" alt="Rounded Image" style="width: 100px; height: 100px;" />
<div class="media-body">
<h5 class="mt-0">Media Object List Concept</h5>
<p>Mention media body content.</p>
</div>
</li>
</ul>
</div>
Try it yourself
Source Code : Output
Write down media body content.
Describe media body content.
Mention media body content.
Note:Please keep in mind that it is a group of media object.All the media object is placed inside unordered list item or ordered list item.