Texte
Documentation et exemples d'utilitaires de texte courants pour contrôler l'alignement, l'habillage, le poids, etc.
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>Empêcher le texte d'être renvoyé à la ligne avec une .text-nowrapclasse.
<div class="text-nowrap" 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>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.
Modifiez rapidement le poids (gras) du texte ou mettez le texte en italique.
Texte en gras.
Texte de poids normal.
Texte léger.
Texte en italique.
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>