Sommaire

Les citations CSS POUR LE TEXTE:Citation

1. Une citation simple

Pour une citation simple, utilisez l’élément <blockquote>.

Voici le code utilisé :

<blockquote>Integer posuere...</blockquote>

Voici le style CSS appliqué par Bootstrap :

blockquote { 
   padding: 10px 20px; 
   margin: 0 0 20px; 
   border-left: 5px solid #eee; 
}

Voici l’affichage :

images/C03-005.png

2. Une citation en paragraphe

Bootstrap recommande d’utiliser un paragraphe <p> dans le <blockquote> pour une mise en forme différente de la police de caractères, avec notamment une taille de caractères plus importante.

Voici le code recommandé :

<blockquote><p>Integer posuere...</p></blockquote>

Les règles CSS sont alors les suivantes :

blockquote p:last-child { 
   margin-bottom: 0; 
}
blockquote p { 
   font-size: 17.5px; 
   font-weight: 300; 
   line-height: 1.25; 
}

Voici l’affichage :

images/C03-006.png

3. La source de la citation

Vous pouvez aussi utiliser un élément <small> pour indiquer la source de la citation :

<blockquote> 
   <p>Integer posuere erat... 
   <small>Pellentesque ornare...</small> 
   </p> 
</blockquote>

Voici l’affichage résultant :

images/C03-007.png

Et voici les styles utilisés :

blockquote small { 
   display: block; 
   line-height: 1.428571429; 
   color: #999; 
} 
small {  ...