Texte
Documentation et exemples d'utilitaires de texte courants pour contrôler l'alignement, l'habillage, le poids, etc.
Alignement du texte
Réalignez facilement le texte sur les composants grâce aux classes d'alignement de texte.
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indexe. Cras mattis iudicium purus sit amet fermentum.
<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>Pour l'alignement à gauche, à droite et au centre, des classes réactives sont disponibles et utilisent les mêmes points d'arrêt de largeur de fenêtre que le système de grille.
Texte aligné à gauche sur toutes les tailles de fenêtre.
Centrer le texte aligné sur toutes les tailles de fenêtre.
Texte aligné à droite sur toutes les tailles de fenêtre.
Texte aligné à gauche sur les fenêtres de taille SM (petite) ou plus large.
Texte aligné à gauche sur les fenêtres de taille MD (moyenne) ou plus large.
Texte aligné à gauche sur les fenêtres de taille LG (large) ou plus large.
Texte aligné à gauche sur les fenêtres de taille XL (extra-large) ou plus large.
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>Habillage et débordement de texte
Enveloppez le texte avec une .text-wrapclasse.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Empêcher le texte d'être renvoyé à la ligne avec une .text-nowrapclasse.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>Pour un contenu plus long, vous pouvez ajouter une .text-truncateclasse pour tronquer le texte avec des points de suspension. Nécessite display: inline-blockou display: block.
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>Coupure de mot
Empêchez les longues chaînes de texte de casser la disposition de vos composants en utilisant .text-breakto set overflow-wrap: break-word(et word-break: break-wordpour la compatibilité IE & Edge).
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>Transformation de texte
Transformez le texte en composants avec des classes de capitalisation de texte.
Texte en minuscule.
Texte en majuscule.
Texte en majuscules.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Notez que .text-capitalizeseule la première lettre de chaque mot change, sans affecter la casse des autres lettres.
Épaisseur de la police et italique
Modifiez rapidement le poids (gras) du texte ou mettez le texte en italique.
Texte en gras.
Texte de poids plus gras (par rapport à l'élément parent).
Texte de poids normal.
Texte léger.
Texte plus léger (par rapport à l'élément parent).
Texte en italique.
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>Monospace
Remplacez une sélection par notre pile de polices monospace avec .text-monospace.
C'est en monospace
<p class="text-monospace">This is in monospace</p>Réinitialiser la couleur
Réinitialisez la couleur d'un texte ou d'un lien avec .text-reset, afin qu'il hérite de la couleur de son parent.
Texte masqué avec un lien de réinitialisation .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Décoration de texte
Supprimer une décoration de texte avec une .text-decoration-noneclasse.
<a href="#" class="text-decoration-none">Non-underlined link</a>