Webseite Schnellstart – Jumbotron und Inhalte

Texte

Allein 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="h2">Zweitgrößte Überschrift</p>

Um tatsächliche Überschriften Elemente noch größer darzustellen kannst du die display-Klassen verwenden. Davon gibt es genau 4 Stück, also 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 als sonst 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.

Jumbotron

Möchtest du ein riesiges Element auf deiner Seite ganz prominent platzieren? Dann nimm ein div und die Klasse jumbotron. Der Inhalt bekommt einen Rahmen und wird so hervorgehoben.

<div class="jumbotron">
  <h1 class="display-4">Hallo, ich bin wichtig!</h1>
</div>