Media Lists

v3.x

Use media lists to organize combinations of visual and textual data.

BBootstrap 3.x | Media Object


x
Example | 100 x 100
Media heading

Media content ... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci earum reiciendis soluta repellat iste cumque, a, labore aperiam voluptatibus ullam placeat rerum harum quos id quidem eum, quas dolores animi.

Media heading

Media content ... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci earum reiciendis soluta repellat iste cumque, a, labore aperiam voluptatibus ullam placeat rerum harum quos id quidem eum, quas dolores animi.

Media heading

Media content ... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci earum reiciendis soluta repellat iste cumque, a, labore aperiam voluptatibus ullam placeat rerum harum quos id quidem eum, quas dolores animi.


<div class="media">
   <div class="media-left">
      <a href="">
         <img class="media-object" src="https://lorempixel.com/420/320/abstract/1/Sample" alt="">
      </a>
   </div>
   <div class="media-body">
      <h5 class="media-heading">Media heading</h5>
      <p>Media content ... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci earum reiciendis soluta repellat iste cumque, a, labore aperiam voluptatibus ullam placeat rerum harum quos id quidem eum, quas dolores animi.</p>
   </div>
</div>

<div class="media">
   <div class="media-left">
      <a href="">
         <img class="media-object" src="https://unsplash.it/100/100" alt="">
      </a>
   </div>
   <div class="media-body">
      <h5 class="media-heading">Media heading</h5>
      <p>Media content ... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci earum reiciendis soluta repellat iste cumque, a, labore aperiam voluptatibus ullam placeat rerum harum quos id quidem eum, quas dolores animi.</p>
   </div>
</div>

<div class="media">
   <div class="media-left">
      <a href="">
         <img class="media-object" src="https://unsplash.it/100/100" alt="">
      </a>
   </div>
   <div class="media-body">
      <h5 class="media-heading">Media heading</h5>
      <p>Media content ... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci earum reiciendis soluta repellat iste cumque, a, labore aperiam voluptatibus ullam placeat rerum harum quos id quidem eum, quas dolores animi.</p>
   </div>
</div>