Bootstrap 4 media objects provides functionality to place image either left or right to the textual content.
Follow the following steps to create bootstrap 4 media objects
.media
to the parent container of the 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" alt="Rounded Image" />
<div class="media-body"></div>
</div>
Source Code
<div class="container text-center mt-4">
<h2 class="text-center">Bootstrap Media Object</h2>
<div class="media">
<img src="https://picsum.photos/200/300" class="rounded img-fluid m-4"
alt="Rounded Image" style="width: 80px; height: 80px;" />
<div class="media-body p-2">
<h4 class="mt-0">Media Object:Left Image</h4>
<p class="text-justify">
This is an example of a media object having the image in the left direction.
</p>
</div>
</div><!--media object having image right direction-->
<div class="media">
<div class="media-body p-2">
<h4 class="mt-0">Media Object:Right Image</h4>
<p class="text-justify p-3">In this example,image is placed right side to the content.</p>
</div>
<img src="https://picsum.photos/200/300" class="rounded img-fluid"
alt="Rounded Image" style="width: 80px; height: 80px;" />
</div>
</div>
<!--/container-->
Source Code: Output
This is an example of a media object having the image in the left direction.
In this example,image is placed right side to the content.
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.
Note: Media object provides facility to place image either left or right of the content that lies vertically center to the content.
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.
Source Code
<div class="container mt-4">
<h2>Nested Nested Media Objects</h2>
<p class="text-justify">
Media objects can be nested inside other media objects. It is widely used in the blogging system.
</p>
<div class="media">
<img src="https://picsum.photos/200/300" class="rounded img-fluid m-4" alt="Rounded Image" style="width: 80px; height: 80px;" />
<div class="media-body">
<h5 class="mt-0">Smith Roy<small><i>Posted on 10 Jan ,2021</i></small>
</h5>
<p class="text-justify">
Bootstrap provides a media object concept that Id widely used in the blogging system.
</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: 80px; height: 80px;" />
<div class="media-body">
<h5 class="mt-0">John Doe <small> <i>Posted on 12 Jan,2021</i></small></h5>
<p class="text-justify">
Really your comment is very useful during blogging system development.
</p>
</div>
</div>
</div>
</div>
</div>
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 object 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.
Source Code
<div class="container text-center mt-4">
<h2 class="text-center">Bootstrap Media Object</h2>
<div class="media">
<img src="https://picsum.photos/200/300" class="rounded img-fluid m-4" alt="Rounded Image"
style="width: 80px; height: 80px;" />
<div class="media-body p-2">
<h4 class="mt-0">Media Object:Left Image</h4>
<p class="text-justify">
This is an example of a media object having the image in the left direction.
</p>
</div>
</div>
</div>
Source Code: Output
This is an example of a media object having the 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.
Source Code
<div class="container text-center mt-4">
<h2>Media List</h2>
<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: 80px; height: 80px;" />
<div class="media-body">
<h5 class="mt-0">Media Object Heading 1</h5>
<p class="text-justify">
Here, write down the media object 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: 80px; height: 80px;" />
<div class="media-body">
<h5 class="mt-0">Media Object Heading 2</h5>
<p class="text-justify">
Write down the media object content.
</p>
</div>
</li>
</ul>
</div>
<!--/container-->
Source Code: Output
Here, write down the media object content.
Write down the media object 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.