In diesem Artikel stellen wir Ihnen einige nützliche Bootstrap CSS-Klassen vor, mit denen Sie Abstände und Ausrichtungen auf Ihrer Webseite schnell und unkompliziert anpassen können – ganz ohne eigenes CSS schreiben zu müssen.

1. Margin-Klassen (Abstände nach außen)

Die m-Klassen steuern den Außenabstand (margin) eines Elements.
Dabei gilt:

• t = top (oben)

• b = bottom (unten)

• l = left (links)

• r = right (rechts)

Die Zahlen 1–5 geben die Größe des Abstands an (klein bis groß).

Beispiele:

• mt-1 → kleiner Außenabstand oben

• mt-5 → sehr großer Außenabstand oben

• mb-3 → mittlerer Außenabstand unten

2. Padding-Klassen (Abstände nach innen)

Die p-Klassen steuern den Innenabstand (padding) eines Elements.
Das Prinzip ist dasselbe:

• t = top (oben)

• b = bottom (unten)

• l = left (links)

• r = right (rechts)

Auch hier reichen die Werte von 1 (klein) bis 5 (groß).

Beispiele:

• pt-2 → kleiner Innenabstand oben

• pb-4 → großer Innenabstand unten

• pl-2 → Innenabstand links

3. Unterschied: Margin vs. Padding

• Margin = Abstand außerhalb eines Elements.
  → Schiebt ein Element von anderen Elementen weg.

• Padding = Abstand innerhalb eines Elements.
  → Vergrößert den „Innenraum“ zwischen Inhalt (z. B. Text) und Rand des Elements.

Merksatz:

• Möchten Sie Abstand zwischen zwei Boxen schaffen → margin

• Möchten Sie den Inhalt innerhalb einer Box „luftiger“ gestalten → padding

4. Textausrichtung

Mit der Klasse text-center können Sie den Inhalt eines Elements (z. B. Text oder Bilder) zentrieren.

5. Übersicht häufig genutzter Klassen