anbei eine Kurz-Anleitung für das Bootstrap Grid-System. Wenn ihr euch daran haltet, sollte eigentlich nix mehr schief gehen.

[Regel 1] container oder container-fluid verwenden

Diese Klassen sorgen für die richtige Ausrichtung und Abstände zwischen den Elementen. container gibt eine feste Breite vor, während container-fluid die volle Breite des Viewports einnimmt.

[Regel 2] Rows zuerst

Jede .col muss immer in einer .row sein. Ohne .row wird die .col nicht korrekt dargestellt, da .row den notwendigen negativen Margin ausgleicht, der durch das Padding der .col erzeugt wird.

[Regel 3] 12 Cols nebeneinander

Das Grid-System von Bootstrap ist in 12 Spalten unterteilt. Diese ermöglichen das Nebeneinanderstellen von Elementen. Wenn du mehr als 12 Spalten innerhalb einer .row verwendest, erfolgt ein automatischer Umbruch.

[Regel 3.1] Bei mehr als 12 Cols: Automatischer Umbruch

Wird die Anzahl von 12 Spalten in einer Reihe überschritten, werden die zusätzlichen Spalten auf die nächste Zeile umgebrochen.

[Regel 4] Breakpoints: col-sm-* (576px)

Mit der Klasse col-sm-* werden Spalten für Bildschirme mit einer Breite unter 576px auf volle Breite gesetzt und untereinander dargestellt, um besser auf Mobilgeräten angezeigt zu werden.

Das ist ausreichend, wenn man nur zwei Versionen pflegen möchte.

[Regel 5] Verschachtelung möglich

Man kann .rows in .cols verschachteln, um komplexere und maßgeschneiderte Layouts zu erstellen. Denke daran, dass verschachtelte .rows in einer .col ebenfalls bis zu 12 Spalten haben können.

[Regel 6] Vertikal zentrieren mit d-flex align-items-center

Um Inhalte vertikal zu zentrieren, kannst du die Klasse d-flex zusammen mit align-items-center verwenden:

<div class="col-sm-6 d-flex align-items-center">Code-Sprache: JavaScript (javascript)