Mettre en forme des textes avec les classes Bootstrap

Dans cette nouvelle leçon, nous allons faire un tour d’horizon des classes Bootstrap les plus utiles qui vont nous permettre de styliser nos textes.

 

Faire ressortir visuellement des textes

Les classes .display-1, .display-2, .display-3 et .display-4 permettent de faire ressortir visuellement un titre par rapport au reste du contenu.

On va pouvoir appliquer ces classes à nos éléments h afin de les styliser davantage. Voici l’effet produit par ces classes :

See the Pen
Bootstrap 2.2.1
by Pierre (@pierregiraud)
on CodePen.

Pour faire ressortir visuellement un paragraphe, on utilisera plutôt la classe .lead qui va produire le résultat suivant :

See the Pen
Bootstrap 2.2.2
by Pierre (@pierregiraud)
on CodePen.

Enfin, Bootstrap met à notre disposition les classes .h1, .h2.h6 qui vont nous permettre d’appliquer des styles similaires aux titres à n’importe quel autre contenu textuel.

Cela va être très utile dans les situations où il n’est pas sémantiquement correct d’utiliser un élément de type h mais où on voudra quand même réutiliser les styles des titres (car je vous rappelle que le rôle du HTML est de donner du sens aux contenus, pas d’appliquer des styles).

See the Pen
Bootstrap 2.2.3
by Pierre (@pierregiraud)
on CodePen.

 

Modifier le poids ou le style d’une police

Pour modifier le poids d’une police, c’est-à-dire son épaisseur, on va pouvoir utiliser l’une des classes suivantes :

  • .font-weight-lighter pour obtenir un texte très fin ;
  • .font-weight-light pour obtenir un texte fin ;
  • .font-weight-normal pour obtenir un texte normal ;
  • .font-weight-bold pour obtenir un texte épais ;
  • .font-weight-bolder pour obtenir un texte très épais.

Notez que les classes .font-weight-lighter et >.font-weight-bolder vont modifier l’épaisseur de la police de l’élément relativement à celle de son parent.

Pour qu’un texte s’affiche en italique, on peut utiliser la classe .font-italic.

See the Pen
Bootstrap 2.2.4
by Pierre (@pierregiraud)
on CodePen.

 

Modifier la casse des textes

Bootstrap nous fournit 3 classes permettant de modifier la casse (le fait que le texte s’affiche en majuscules ou en minuscules) de nos textes :

  • La classe .text-lowercase fera qu’un texte s’affiche en minuscules ;
  • La classe .text-uppercase fera qu’un texte s’affiche en majuscules ;
  • La classe .text-capitalize ne va transformer que la première lettre de chaque mot pour la mettre en majuscules.

See the Pen
Bootstrap 2.2.5
by Pierre (@pierregiraud)
on CodePen.

 

Aligner un texte dans son élément parent

Bootstrap nous fournit différentes classes nous permettant d’aligner un texte à droite, au centre, à gauche ou de le justifier. Les classes d’alignement de base sont les suivantes :

  • .text-left va aligner un texte à gauche ;
  • .text-center va centrer un texte ;
  • .text-right va aligner un texte à droite ;
  • .text-justify va justifier un texte.

Nous allons également pouvoir gérer l’alignement de nos textes de façon responsive, c’est-à-dire en leur donnant des ordres d’alignement différents en fonctions des différentes tailles de fenêtres de nos visiteurs.

Pour cela, nous allons devoir ajouter les préfixes connus -sm-, -md-, -lg- et -xl- à nos classes ci-dessus.

Notez cependant que l’utilisation de classes responsive d’alignement n’est possible que pour des alignements à gauche, au milieu et à droite mais pas pour un alignement justifié.

See the Pen
Bootstrap 2.2.6
by Pierre (@pierregiraud)
on CodePen.

 

Gérer les dépassements

Par défaut, un texte d’une page utilisant Bootstrap essaiera de ne pas dépasser de son conteneur et ira se positionner sur une nouvelle ligne s’il est plus long que son conteneur.

Pour annuler ce comportement et laisser un texte dépasser de son conteneur, on peut utiliser la classe .nowrap. Pour rétablir le comportement de non-dépassement, on utilisera la classe .text-wrap.

Dans le cas où on dispose d’un texte relativement long et d’un petit conteneur, on peut choisir de le tronquer, c’est-à-dire de n’afficher que la partie qui rentre dans le conteneur en utilisant la classe .text-truncate.

See the Pen
Bootstrap 2.2.7
by Pierre (@pierregiraud)
on CodePen.

 

Autres classes Bootstrap disponibles pour styliser nos textes

Bootstrap fournit encore d’autres classes pour nous permettre de styliser l’affichage qui peuvent s’avérer intéressante dans certaines situations particulières mais qui vont être beaucoup moins utilisées que celles déjà présentées dans cette leçon.

Parmi ces classes, on peut notamment citer les suivantes :

ClasseDéfinition
.leadFait ressortir un paragraphe du reste du texte
.text-monospaceApplique la police Monospace à un texte
.initialismAffiche le texte contenu dans un élément abbr avec une taille de police légèrement plus petite
.pre-scrollablePermet d’affiche une barre de défilement (scroll) dans un élément pre

Laisser un commentaire