Text
Dokumentation und Beispiele für gängige Texthilfsprogramme zur Steuerung von Ausrichtung, Umbruch, Gewichtung und mehr.
Richten Sie Text mit Textausrichtungsklassen einfach an Komponenten neu aus.
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. Bei nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. 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>Für die linke, rechte und zentrierte Ausrichtung sind reaktionsschnelle Klassen verfügbar, die dieselben Breakpoints für die Ansichtsfensterbreite wie das Rastersystem verwenden.
Linksbündiger Text in allen Ansichtsfenstergrößen.
Zentrieren Sie ausgerichteten Text in allen Ansichtsfenstergrößen.
Rechtsbündiger Text in allen Ansichtsfenstergrößen.
Linksbündiger Text in Ansichtsfenstern der Größe SM (klein) oder breiter.
Linksbündiger Text in Ansichtsfenstern der Größe MD (mittel) oder breiter.
Linksbündiger Text in Ansichtsfenstern mit der Größe LG (groß) oder breiter.
Linksbündiger Text in Ansichtsfenstern der Größe XL (extra groß) oder breiter.
<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>Verhindern Sie, dass Text mit einer .text-nowrapKlasse umbrochen wird.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>Bei längeren Inhalten können Sie eine .text-truncateKlasse hinzufügen, um den Text mit Auslassungspunkten abzuschneiden. Benötigt display: inline-blockoder 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>Wandeln Sie Text in Komponenten mit Textgroßschreibungsklassen um.
Kleingeschriebener Text.
Großgeschriebener Text.
GROSSGESCHRIEBENER TEXT.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Beachten Sie, dass text-capitalizenur der erste Buchstabe jedes Wortes geändert wird, wobei die Groß- und Kleinschreibung aller anderen Buchstaben unbeeinflusst bleibt.
Ändern Sie schnell die Stärke (Fettschrift) von Text oder setzen Sie Text kursiv.
Fetter Text.
Normalgewichtiger Text.
Leichter Text.
Kursiver Text.
<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>Ändern Sie eine Auswahl mit in unseren Monospace-Schriftstapel .text-monospace.
Dies ist im Monospace
<p class="text-monospace">This is in monospace</p>