Poetry

Bootstrap Media Objects

This tutorial describes media objects. Basically media objects are used to build components at specific position. In this process two classes used .media and .media-body

Basic example of media objects

In this example two classes are used media as whole box for the content and media-body for title and paragraph.

<div class="media border p-2 bg-white">
  <img class="mr-2" src="img/blog-img/lb-3.jpg" style="width: 70px;">
  <div class="media-body">
    <h4>Media Title</h4>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    ea commodo consequat. 
    </p>
  </div>
</div>

Output of above code

Media Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Example of nested objects

In this example also two classes are media and media-body. But the content boxes are nested.

<div class="media border p-2 bg-light">
  <img class="mr-3 bg-white" src="img/blog-img/lb-3.jpg" style="width: 70px;">
  <div class="media-body bg-white">
    <h4 >Media Title</h4>
    <p class="text-justify">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
     incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
     exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     </p>

    <div class="media mt-3 bg-white">
        <img class="pr-3" src="img/blog-img/lb-3.jpg" style="width: 70px;">
      <div class="media-body bg-white">
        <h4>Media Title</h4>
        <p class="text-justify">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
         incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
         exercitation ullamco  laboris nisi ut aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>
  </div>
</div>

Output of above code

Media Title

Example of the right-aligned media Image

In this example image is shown in the right side. Just put the img element after the media-body box to show the image toward right side.

<div class="media border p-2 bg-white">
  <div class="media-body">
    <h4>Media Title</h4>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    ea commodo consequat. 
    </p>
  </div>
  <img class="ml-2 pt-2" src="img/blog-img/lb-3.jpg" style="width: 70px;">
</div>

Output of above code

Media Title

The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.

Webtags

Bootstrap Media Objects

Basic example of media objects

Output of above code

Media Title

Example of nested objects

Output of above code

Media Title

Media Title

Example of the right-aligned media Image

Output of above code

Media Title

Comment here

Get Inn Touch! Subscribe.

Webtags

Usefull Links

Courses

Contact

Categories

Latest Posts

New Courses

A great way to start

New Courses for you

Start your training