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.
Un texte d'espace réservé pour démontrer l'alignement du texte justifié. Ferez-vous la même chose pour moi? Il est temps d'affronter la musique Je ne suis plus ta muse. J'ai entendu dire que c'est beau, soyez le juge et mes filles voteront. Je peux sentir un phénix à l'intérieur de moi. Le ciel est jaloux de notre amour, les anges pleurent d'en haut. Ouais, tu m'emmènes à l'utopie.
<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</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-breakpour définir word-wrap: break-wordet word-break: break-word. Nous utilisons word-wrapà la place du plus courant overflow-wrappour une prise en charge plus large des navigateurs, et ajoutons le déprécié word-break: break-wordpour éviter les problèmes avec les conteneurs flexibles.
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>