Summary  
This chapter explains how to apply CSS utility classes to style text elements—adjusting headings, font sizes, font weights, italics, lead text emphasis, and alignment—using Bootstrap’s typography system.  

General domain of usage  
Front-end web development and UI styling

Bootstrap stellt eine Reihe von Typografie-Klassen für eine konsistente Gestaltung von Textelementen bereit. Diese Klassen können auf Überschriften, Absätze, Spans und andere Textelemente angewendet werden.

## Überschriften 
Überschriften können mit Klassen wie `h1` bis `h6` gestaltet werden, um deren Größen anzupassen.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+VHlwb2dyYXBoeSBQYXJ0IDEgRXhhbXBsZSAxPC90aXRsZT4KICAgIDxsaW5rCiAgICAgIGhyZWY9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIgogICAgICByZWw9InN0eWxlc2hlZXQiCiAgICAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxoMSBjbGFzcz0iaDEiPkhlYWRpbmcgMTwvaDE+CiAgICA8aDIgY2xhc3M9ImgyIj5IZWFkaW5nIDI8L2gyPgogICAgPGgzIGNsYXNzPSJoMyI+SGVhZGluZyAzPC9oMz4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2Jvb3RzdHJhcEA1LjMuMi9kaXN0L2pzL2Jvb3RzdHJhcC5taW4uanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

## Schriftgröße 
Bootstrap stellt Klassen wie `fs-1`, `fs-2`, `fs-3`, `fs-4`, `fs-5` und `fs-6` zur Verfügung, um Schriftgrößen (Textgrößen) zu steuern.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+VHlwb2dyYXBoeSBQYXJ0IDEgRXhhbXBsZSAyPC90aXRsZT4KICAgIDxsaW5rCiAgICAgIGhyZWY9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIgogICAgICByZWw9InN0eWxlc2hlZXQiCiAgICAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwIGNsYXNzPSJmcy0xIj5mcy0xIFRleHQ8L3A+CiAgICA8cCBjbGFzcz0iZnMtMiI+ZnMtMiBUZXh0PC9wPgogICAgPHAgY2xhc3M9ImZzLTMiPmZzLTMgVGV4dDwvcD4KICAgIDxwIGNsYXNzPSJmcy00Ij5mcy00IFRleHQ8L3A+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4zLjIvZGlzdC9qcy9ib290c3RyYXAubWluLmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

## Schriftgewicht und Kursivschrift
Schriftgewichte werden mit der Klasse `fw-*` (`font-weight`) festgelegt, während die kursive Darstellung mit der Klasse `fst-*` (`font-style`) erreicht werden kann.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+VHlwb2dyYXBoeSBQYXJ0IDEgRXhhbXBsZSAzPC90aXRsZT4KICAgIDxsaW5rCiAgICAgIGhyZWY9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIgogICAgICByZWw9InN0eWxlc2hlZXQiCiAgICAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9InJvdyI+CiAgICAgIDxkaXYgY2xhc3M9ImNvbCI+CiAgICAgICAgPGgxIGNsYXNzPSJoMiI+Rm9udCB3ZWlnaHQgdmFyaWF0aW9uczwvaDE+CiAgICAgICAgPHAgY2xhc3M9ImZ3LWJvbGQiPlRoaXMgdGV4dCBpcyBib2xkLjwvcD4KICAgICAgICA8cCBjbGFzcz0iZnctc2VtaWJvbGQiPlRoaXMgdGV4dCBpcyBzZW1pYm9sZC48L3A+CiAgICAgICAgPHAgY2xhc3M9ImZ3LW5vcm1hbCI+VGhpcyB0ZXh0IGlzIG5vcm1hbC48L3A+CiAgICAgICAgPHAgY2xhc3M9ImZ3LWxpZ2h0Ij5UaGlzIHRleHQgaXMgbGlnaHQuPC9wPgogICAgICAgIDxwIGNsYXNzPSJmdy1saWdodGVyIj5UaGlzIHRleHQgaXMgZXZlbiBsaWdodGVyLjwvcD4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImNvbCI+CiAgICAgICAgPGgxIGNsYXNzPSJoMiI+Rm9udCBzdHlsZSB2YXJpYXRpb25zPC9oMT4KICAgICAgICA8cCBjbGFzcz0iZnN0LWl0YWxpYyI+VGhpcyB0ZXh0IGlzIGl0YWxpY2l6ZWQuPC9wPgogICAgICAgIDxwIGNsYXNzPSJmc3Qtbm9ybWFsIj5UaGlzIHRleHQgaXMgaW4gbm9ybWFsIGZvbnQgc3R5bGUuPC9wPgogICAgICA8L2Rpdj4KICAgIDwvZGl2PgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvanMvYm9vdHN0cmFwLm1pbi5qcyI+PC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

## Lead-Text
Die Klasse `lead` wird verwendet, um einem Absatz durch Vergrößerung der Schriftgröße und Schriftstärke mehr Gewicht zu verleihen.

## Textausrichtung
Klassen wie `text-start`, `text-center` und `text-left` werden verwendet, um Textelemente auszurichten.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+VHlwb2dyYXBoeSBQYXJ0IDEgRXhhbXBsZSA0PC90aXRsZT4KICAgIDxsaW5rCiAgICAgIGhyZWY9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIgogICAgICByZWw9InN0eWxlc2hlZXQiCiAgICAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwIGNsYXNzPSJsZWFkIj5UaGlzIGlzIGEgbGVhZCBwYXJhZ3JhcGguPC9wPgogICAgPHAgY2xhc3M9InRleHQtY2VudGVyIj5DZW50ZXItYWxpZ25lZCB0ZXh0LjwvcD4KICAgIDxwIGNsYXNzPSJ0ZXh0LWVuZCI+UmlnaHQtYWxpZ25lZCB0ZXh0LjwvcD4KICAgIDxwIGNsYXNzPSJ0ZXh0LXN0YXJ0Ij5MZWZ0LWFsaWduZWQgdGV4dC48L3A+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4zLjIvZGlzdC9qcy9ib290c3RyYXAubWluLmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

Erkunden Sie die grundlegenden Prinzipien des Bootstrap CSS-Frameworks und entdecken Sie die Geheimnisse zur schnellen und effizienten Erstellung responsiver und optisch ansprechender Websites. Durch praktische Anwendung der wichtigsten Utilities und die Implementierung leistungsstarker Komponenten erwerben Sie wertvolle praktische Erfahrungen, um Ihren Webentwicklungsprozess mit dem vielseitigen Toolkit von Bootstrap zu optimieren.

Erkunden Sie das Wesen von Bootstrap und seine Entwicklung von den Anfängen bis zur Gegenwart, bewerten Sie Vorteile und Nachteile und verstehen Sie die Voraussetzungen für eine effektive Implementierung.

Übersicht über die Installationsoptionen von Bootstrap. Auswahl zwischen schneller Integration über Content Delivery Network (CDN) oder einer individuelleren Methode mit Node Package Manager (NPM).

Erwerb von Kenntnissen in zentralen Bootstrap-Elementen, einschließlich des vielseitigen Rastersystems, differenzierter Typografie, dynamischer Button-Nutzung, präziser Verwaltung von Abständen und Innenabständen sowie der Gestaltung effektiver Formulare für eine nahtlose Benutzerinteraktion.

Steigerung der Bootstrap-Kenntnisse durch fortgeschrittene Themen wie dynamische Navigationsmenüs, responsive Bildverarbeitung, vielseitige Kartenlayouts, interaktive Modals und ansprechende Karussells für fesselnde Nutzererlebnisse.

Erstellen Sie eine Portfolio-Website mit dem Bootstrap-Framework anhand unserer Anleitung. Nutzen Sie die leistungsstarken Funktionen von Bootstrap. Dieser praxisorientierte Abschnitt hilft dabei, Ihre Fähigkeiten, Projekte und Erfolge zu präsentieren.

Typografie-Grundlagen in Bootstrap

Häufig verwendete Typografie-Klassen

Überschriften

Schriftgröße

Schriftgewicht und Kursivschrift

Lead-Text