Media Object

Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.

Deafult Media object

This is some content from a media component. You can replace this with any content and adjust it as needed.

      <div class="d-flex mb-4">
      <div class="flex-shrink-0">
      <img src="images/t1.jpg" class="img-fluid rounded-circle" title="media" alt="media">
      </div>
      <div class="flex-grow-1 ms-3">
      This is some content from a media component. You can replace this with any content and adjust it as needed.
      </div>
      </div>
      <div class="d-flex mb-4">
      <div class="flex-shrink-0">
      <img src="images/t2.jpg" class="img-fluid rounded-circle" title="media" alt="media">
      </div>
      <div class="flex-grow-1 ms-3">
      This is some content from a media component. You can replace this with any content and adjust it as needed.
      </div>
      </div>
      <div class="d-flex mb-4">
      <div class="flex-shrink-0">
      <img src="images/t3.jpg" class="img-fluid rounded-circle" title="media" alt="media">
      </div>
      <div class="flex-grow-1 ms-3">
      This is some content from a media component. You can replace this with any content and adjust it as needed.
      </div>
      </div>

vertically center Media object

This is some content from a media component. You can replace this with any content and adjust it as needed.

      <div class="d-flex align-items-center mb-4">
      <div class="flex-shrink-0">
      <img src="images/t1.jpg" class="img-fluid rounded-circle" title="media" alt="media">
      </div>
      <div class="flex-grow-1 ms-3">
      This is some content from a media component. You can replace this with any content and adjust it as needed.
      </div>
      </div>
      <div class="d-flex align-items-center mb-4">
      <div class="flex-shrink-0">
      <img src="images/t2.jpg" class="img-fluid rounded-circle" title="media" alt="media">
      </div>
      <div class="flex-grow-1 ms-3">
      This is some content from a media component. You can replace this with any content and adjust it as needed.
      </div>
      </div>
      <div class="d-flex align-items-center  mb-4">
      <div class="flex-shrink-0">
      <img src="images/t3.jpg" class="img-fluid rounded-circle" title="media" alt="media">
      </div>
      <div class="flex-grow-1 ms-3">
      This is some content from a media component. You can replace this with any content and adjust it as needed.
      </div>
      </div>