Bootstrap 4 Schnellstart – Text Kontrolle

Ausrichtung

Die Textausrichtung kannst du mit 3 Klassen beeinflussen:

Ausrichtung Klasse
Linksbündig text-left
Zentriert text-center
Rechtsbündig text-right
<p class="text-center">Linksbündiger Text</p>

Umbruch (wrapping) und Überlauf (overflow)

Den Umbruch oder den Überlauf von Text erhältst du über 3 Klassen.

Ausrichtung Klasse
Text umbrechen text-wrap
Text überlaufen lassen text-nowrap
Text abkürzen las…. text-truncate
<p class="text-truncate">Ein langer Text, auf jeden Fall umbrechen wird sobald man an das Ende des Bildschirms kommt. Das passiert nur, wenn man lange Texte schreibt!</p>

 

Transform

Über folgende 3 Klassen kannst du die Schreibweise des Textes beeinflussen:

Ausrichtung Klasse
Kleinbuchstaben text-lowercase
Großbuchstaben text-uppercase
Erster Buchstabe Im Wort Groß text-capitalize
<p class="text-uppercase">Alles großgeschriebener Text</p>

Gewicht, Kursiv & Monospace

Das Gewicht und die Kursivschrift können über folgende Klassen eingestellt werden:

Ausrichtung Klasse
Fett font-weight-bold
Fetter font-weight-bolder
Normal font-weight-normal
Dünn font-weight-light
Dünner font-weight-lighter
Kursiv font-italic
Monospace text-monospace
<p class="font-weight-bolder">Fetterer Text</p>

Das ist eine ganze Menge, nicht wahr? Schauen wir uns das mal in Aktion an: