Default thumbnail

    
<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://lorempixel.com/300/300/cats" alt="Some cats image">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://lorempixel.com/300/300/cats" alt="Some cats image">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://lorempixel.com/300/300/cats" alt="Some cats image">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://lorempixel.com/300/300/cats" alt="Some cats image">
    </a>
  </div>
</div>

Custom content

Thumbnail label

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid enim tanto opus est instrumento in optimis.

Button Button

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="http://lorempixel.com/300/300/cats" alt="Some cats image">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid enim tanto opus est instrumento in optimis.</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Thumbnail hrw

Thumbnail label

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid enim tanto opus est instrumento in optimis.

<div class="row">
  <div class="col-sm-3">
    <div class="thumbnail">
           <h3 class="titrerapport">Thumbnail label</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid enim tanto opus est instrumento in optimis.</p>
      <img src="http://lorempixel.com/300/300/cats" alt="Some cats image">
      <div class="caption">
      </div>
    </div>
  </div>
</div>

Thumbnail multimédia

Thumbnail label

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid enim tanto opus est instrumento in optimis.

<div class="row">
      <div class="thumbnail thumbnailplus">
           <h3>Thumbnail label</h3>
           <div class="imahover">
            <img src="http://lorempixel.com/290/179/cats" alt="Some cats image">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid enim tanto opus est instrumento in optimis.</p>
      </div>
    </div>
  </div>
</div>

Thumbnail impact story

ONU : Rétablissement des dispositions protégeant les personnes LGBT contre les exécutions extrajudiciaires

fév 9, 2011
Fait rarissime, à la suite d'une campagne mondiale de sensibilisation menée par Human Rights Watch, l'Assemblée générale des Nations Unies a revoté la résolution protégeant les personnes des exécutions extrajudiciaires. Grâce à notre campagne de sensibilisation, les votants ont décidé, à une écrasante

 <div class="col-sm-4">
    <div class="thumbnail">
           <img class="homme-p" src="img/pov-work.jpg" alt="Some man">
     </div>
  </div>

  <div class="col-sm-3">
      <h3 class="titlestory">ONU : Rétablissement des dispositions protégeant les personnes LGBT contre les exécutions extrajudiciaires</h3>
    <p class="text">fév 9, 2011<br>
Fait rarissime, à la suite d'une campagne mondiale de sensibilisation menée par Human Rights Watch, 
l'Assemblée générale des Nations Unies a revoté la résolution protégeant les personnes des exécutions extrajudiciaires. 
Grâce à notre campagne de sensibilisation, les votants ont décidé, à une écrasante </p>
      </div>
    </div>