Bootstrap 4 Schnellstart / Bootstrap 4 Schnellstart – Modul 2: Inhalte (Bilder, Texte, Buttons)
0%
In Bearbeitung

Bootstrap 4 Schnellstart – Texte

Texte formatieren in Bootstrap:

Alleine für die Formatierung von Text hält Bootstrap eine Menge Optionen bereit.

Überschriften

Überschriften können mit den Klassen h1 bis h6 gesetzt werden.

<p class="h1">Größte Überschrift</p>

<p class="h2">Zweitgrößte Überschrift</p>

<p class="h6">Kleinste Überschrift</p>

Um Überschriften-Elemente größer darzustellen, kannst du die display-Klassen verwenden. Davon gibt es genau vier Stück von display-1 bis display-4:

<h1 class="display-2">Große Überschrift</h1>

Formatierungen: Lead, mark, small

Für einzelne Textformatierungen gibt es ja bereits fertige HTML-Elemente, welche auch in Bootstrap durchgestylt sind. Allerdings gibt es ein paar Highlights, die du verwenden kannst:

  • Die Klasse lead stellt einen Text etwas größer dar, damit bestimmte Textteile hervorgehoben werden können.
  • Mit der Klasse mark kann man einen Text markiert darstellen.
  • Die Klasse small stellt einen Text etwas kleiner dar.

Beachte die HTML-Elemente:

Bootstrap liefert nicht nur eigene Klassen, die man zum Styling verwenden kann.

Das Framework bringt sein eigenes Design auch schon auf Standard-HTML-Elemente mit, z.B.:

  • Abkürzungen
  • Zitate
  • Code-Schnipsel