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">
