Utilitaires

Texte

Les utilitaires de texte règlent l’alignement, le retour à la ligne, la casse, la graisse, le style, la taille, la hauteur de ligne, la famille monospace et la décoration. Pour la couleur du texte, voyez Couleurs.

Alignement#

text-start, text-center et text-end alignent le texte. Ils suivent le sens de lecture de la page.

Alignement au début (text-start) : votre virement a bien été enregistré.

Alignement centré (text-center) : votre virement a bien été enregistré.

Alignement à la fin (text-end) : votre virement a bien été enregistré.

<p class="text-start bg-body-secondary border p-3">Alignement au début (text-start) : votre virement a bien été enregistré.</p>
<p class="text-center bg-body-secondary border p-3">Alignement centré (text-center) : votre virement a bien été enregistré.</p>
<p class="text-end bg-body-secondary border p-3 mb-0">Alignement à la fin (text-end) : votre virement a bien été enregistré.</p>

Alignement responsive#

Ajoutez un point de rupture : le texte est centré sur mobile, puis aligné au début à partir de md.

Centré sur mobile, aligné au début dès 768 px.

<p class="text-center text-md-start bg-body-secondary border p-3 mb-0">Centré sur mobile, aligné au début dès 768 px.</p>

Retour à la ligne#

text-wrap autorise le retour à la ligne, text-nowrap l’empêche, text-break coupe les mots trop longs (IBAN, adresses) et text-truncate remplace la fin par des points de suspension.

text-wrap : ce texte long passe à la ligne dans une boîte étroite.

text-nowrap : ce texte reste sur une seule ligne.

text-break : CI0080123456789012345678901234

text-truncate : agence de Cocody Angré, rue des Jardins

<div class="badge text-bg-primary text-wrap" style="width: 8rem">text-wrap : ce texte long passe à la ligne dans une boîte étroite.</div>
<div class="bg-body-secondary border p-2 text-nowrap my-3" style="width: 8rem; overflow: hidden">text-nowrap : ce texte reste sur une seule ligne.</div>
<div class="bg-body-secondary border p-2 text-break my-3" style="width: 12rem">text-break : CI0080123456789012345678901234</div>
<div class="bg-body-secondary border p-2 text-truncate" style="width: 12rem">text-truncate : agence de Cocody Angré, rue des Jardins</div>

Casse du texte#

TEXTE EN MINUSCULES (text-lowercase)

texte en majuscules (text-uppercase)

première lettre de chaque mot en capitale (text-capitalize)

<p class="text-lowercase">TEXTE EN MINUSCULES (text-lowercase)</p>
<p class="text-uppercase">texte en majuscules (text-uppercase)</p>
<p class="text-capitalize mb-0">première lettre de chaque mot en capitale (text-capitalize)</p>

Graisse et style#

Les classes fw-* règlent l’épaisseur des caractères, fst-* le style italique.

fw-bold : texte en gras

fw-semibold : texte demi-gras

fw-medium : texte moyen

fw-normal : texte normal

fw-light : texte léger

fw-bolder : plus gras que le parent

fw-lighter : plus léger que le parent

fst-italic : texte en italique

fst-normal : texte sans italique

<p class="fw-bold mb-1">fw-bold : texte en gras</p>
<p class="fw-semibold mb-1">fw-semibold : texte demi-gras</p>
<p class="fw-medium mb-1">fw-medium : texte moyen</p>
<p class="fw-normal mb-1">fw-normal : texte normal</p>
<p class="fw-light mb-1">fw-light : texte léger</p>
<p class="fw-bolder mb-1">fw-bolder : plus gras que le parent</p>
<p class="fw-lighter mb-1">fw-lighter : plus léger que le parent</p>
<p class="fst-italic mb-1">fst-italic : texte en italique</p>
<p class="fst-normal mb-0">fst-normal : texte sans italique</p>

Taille de police#

Les classes fs-1 à fs-6 appliquent les tailles des titres sans changer la balise. Les quatre plus grandes s’adaptent à la largeur de l’écran.

fs-1 : 2,5 rem

fs-2 : 2 rem

fs-3 : 1,75 rem

fs-4 : 1,5 rem

fs-5 : 1,25 rem

fs-6 : 1 rem

<p class="fs-1 mb-1">fs-1 : 2,5 rem</p>
<p class="fs-2 mb-1">fs-2 : 2 rem</p>
<p class="fs-3 mb-1">fs-3 : 1,75 rem</p>
<p class="fs-4 mb-1">fs-4 : 1,5 rem</p>
<p class="fs-5 mb-1">fs-5 : 1,25 rem</p>
<p class="fs-6 mb-0">fs-6 : 1 rem</p>

Hauteur de ligne#

Les classes lh-* règlent l’interligne : 1 (serré), 1,25 (petit), 1,5 (normal) ou 2 (large).

lh-1 : l'interligne est égal à la taille de la police. Ce texte de plusieurs lignes montre le resserrement : mensualité, taux, durée, assurance.

lh-sm : interligne de 1,25. Ce texte de plusieurs lignes montre le resserrement : mensualité, taux, durée, assurance.

lh-base : interligne de 1,5. Ce texte de plusieurs lignes montre l'espacement : mensualité, taux, durée, assurance.

lh-lg : interligne de 2. Ce texte de plusieurs lignes montre l'aération : mensualité, taux, durée, assurance.

<p class="lh-1 bg-body-secondary border p-2">lh-1 : l'interligne est égal à la taille de la police. Ce texte de plusieurs lignes montre le resserrement : mensualité, taux, durée, assurance.</p>
<p class="lh-sm bg-body-secondary border p-2">lh-sm : interligne de 1,25. Ce texte de plusieurs lignes montre le resserrement : mensualité, taux, durée, assurance.</p>
<p class="lh-base bg-body-secondary border p-2">lh-base : interligne de 1,5. Ce texte de plusieurs lignes montre l'espacement : mensualité, taux, durée, assurance.</p>
<p class="lh-lg bg-body-secondary border p-2 mb-0">lh-lg : interligne de 2. Ce texte de plusieurs lignes montre l'aération : mensualité, taux, durée, assurance.</p>

Monospace et décoration#

font-monospace convient aux numéros de compte et aux références. Les classes text-decoration-* ajoutent ou retirent le soulignement et le barré. text-reset reprend la couleur du parent.

CI93 0001 0000 1234 5678 9012 34 (font-monospace)

Texte souligné (text-decoration-underline)

Ancien taux : 9,5 % (text-decoration-line-through)

Lien sans soulignement (text-decoration-none)

Lien qui reprend la couleur du parent (text-reset)

<p class="font-monospace">CI93 0001 0000 1234 5678 9012 34 (font-monospace)</p>
<p class="text-decoration-underline">Texte souligné (text-decoration-underline)</p>
<p class="text-decoration-line-through">Ancien taux : 9,5 % (text-decoration-line-through)</p>
<p><a href="#" class="text-decoration-none">Lien sans soulignement (text-decoration-none)</a></p>
<p class="text-body-secondary mb-0"><a href="#" class="text-reset">Lien qui reprend la couleur du parent (text-reset)</a></p>

Classes disponibles

Classes disponibles
Classe	Propriété CSS
`text-start`, `text-center`, `text-end`	`text-align` : `left`, `center`, `right` (début, centre, fin)
`text-{sm\|md\|lg\|xl\|xxl}-{start\|center\|end}`	Alignement à partir du point de rupture
`text-wrap`	`white-space: normal`
`text-nowrap`	`white-space: nowrap`
`text-break`	`word-wrap: break-word` et `word-break: break-word`
`text-truncate`	`overflow: hidden`, `text-overflow: ellipsis`, `white-space: nowrap`
`text-lowercase`, `text-uppercase`, `text-capitalize`	`text-transform`
`fw-lighter`, `fw-light`, `fw-normal`, `fw-medium`, `fw-semibold`, `fw-bold`, `fw-bolder`	`font-weight` : `lighter`, 300, 400, 500, 600, 700, `bolder`
`fst-italic`, `fst-normal`	`font-style`
`fs-1`, `fs-2`, `fs-3`, `fs-4`, `fs-5`, `fs-6`	`font-size` : 2,5 rem, 2 rem, 1,75 rem, 1,5 rem, 1,25 rem, 1 rem
`lh-1`, `lh-sm`, `lh-base`, `lh-lg`	`line-height` : 1, 1,25, 1,5, 2
`font-monospace`	`font-family: var(--bs-font-monospace)`
`text-decoration-none`, `text-decoration-underline`, `text-decoration-line-through`	`text-decoration`
`text-reset`	`color: inherit`

Variables associées

Pour les titres, les paragraphes et les styles de la page de typographie, voyez Typographie.

Variables associées
Variable	Rôle
`--bs-font-sans-serif`	Police du texte : Roboto, avec repli sur la police système.
`--bs-font-monospace`	Police à chasse fixe utilisée par `font-monospace`.
`--bs-body-font-size`, `--bs-body-font-weight`	Taille et graisse du texte courant (1 rem, 400).
`$font-size-base`	Taille de base (`1rem`) dont dérivent les tailles `fs-*`.
`$font-sizes`	Carte Sass des tailles `fs-1` à `fs-6`. Les tailles de `fs-1` à `fs-4` s’adaptent à la largeur de l’écran quand `$enable-rfs` est actif.
`$font-weight-lighter`, `-light`, `-normal`, `-medium`, `-semibold`, `-bold`, `-bolder`	Valeurs des classes `fw-*`.
`$line-height-base`, `$line-height-sm`, `$line-height-lg`	Valeurs des classes `lh-*` (1,5, 1,25 et 2).
`$font-family-sans-serif`, `$font-family-monospace`	Familles de caractères.

Bonnes pratiques

À faire

Utilisez text-break sur les IBAN, adresses e-mail et références pour éviter un débordement sur mobile.
Choisissez la balise d’un titre selon la structure de la page, puis ajustez sa taille avec fs-*.
Privilégiez un interligne d’au moins 1,5 (lh-base) pour les paragraphes.

À éviter

N’utilisez pas text-uppercase sur de longs textes : la lecture est plus lente.
Évitez text-truncate pour une information essentielle (montant, nom du bénéficiaire) : elle serait illisible.
Ne mettez pas un texte en italique ou en gras sur plusieurs paragraphes d’affilée.

Accessibilité

Les lecteurs d’écran ignorent fw-bold et fst-italic : si l’insistance a un sens, utilisez <strong> ou <em>.
Ne retirez pas le soulignement d’un lien dans un paragraphe (text-decoration-none) sans autre signe distinctif : couleur seule insuffisante.
Un texte de taille réduite ou léger (fw-light) doit conserver un contraste d’au moins 4,5:1.
Un texte tronqué doit rester accessible en entier (attribut title ou page de détail).