Content

Thumbnails


<a href="#" class="thumbnail">

  <img src="..." alt="...">

</a>

Custom content

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button


<div class="col-sm-6 col-md-4">

  <div class="thumbnail">

  <img src="..." alt="...">

  <div class="caption">

  <h4>...</h4>

  <p>

  ...

  </p>

  <p>

  <a href="#" class="btn btn-primary" role="button">...</a>

  <a href="#" class="btn btn-default" role="button">...</a>

  </p>

  </div>

  </div>

</div>

Default media

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.


<div class="media">

  <div class="media-left">

  <a href="#">

  <img class="media-object" src="..." alt="...">

  </a>

  </div>

  <div class="media-body">

  <h4 class="media-heading">...</h4>

  ...

  </div>

</div>

Media heading

Nested media heading


<div class="media">

  <div class="media-left">

  <a href="#">

  <img class="media-object" src="..." alt="...">

  </a>

  </div>

  <div class="media-body">

  <h4 class="media-heading">...</h4>

  ...

  <div class="media">

    <div class="media-left">

    <a href="#">

    <img class="media-object" src="..." alt="...">

    </a>

    </div>

    <div class="media-body">

    <h4 class="media-heading">...</h4>

    ...

    </div>

    </div>

    </div>

</div>

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Media Alignment

Top aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Middle aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Bottom aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

.media-middle.media-bottom

Media List

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.


<ul class="media-list">

<li class="media">

<div class="media-left">

<a href="#">

<img class="media-object" src="..."

alt="...">

</a>

</div>

<div class="media-body">

<h4 class="media-heading">Media heading</h4>

...

</div>

</li>

</ul>