Bootstrap Media Object
Creating a layout that contains left- or right-aligned media object like images or video alongside the textual content such as blog comments, Tweets, etc
​
Ex.
<style type="text/css">
.bs-example{
margin: 20px;
}
.media img{
width: 80px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="media">
<img src="/examples/images/nkr.svg" class="mr-3" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Naveen kumar<small><i>Posted on January 10, 2019</i></small></h5>
<p>CodersArts tutorial gives all topic related to bootstrap. </p>
</div>
</div>
<hr>
<div class="media">
<div class="media-body">
<h5 class="mt-0">Naveen kumar <small><i>Posted on January 10, 2019</i></small></h5>
<p> CodersArts tutorial gives all topic related to bootstrap. </p>
</div>
<img src="/examples/images/nkr.svg" class="ml-3" alt="Sample Image">
</div>
</div>
</body>
Creating other variation using classes like .rounded or .rounded-circle to modify media images.
Ex.
<div class="media">
<img src="images/avatar.svg" class="rounded-circle mr-3" alt="Sample Image">
<div class="media-body">
<h5 class="mt-0">Jhon Carter <small><i>Posted on January 10, 2019</i></small></h5>
<p>Hi, codersArts </p>
</div>
</div>
Other Topic related to media: Read and apply by using bootstrap document which is on bootstrap official website.
-
Creating Nested Media
-
Alignment of Horizontal Media objects
-
Creating a media list