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