Resize this responsive page to see the effect!
Dies ist die erste von drei Spalten im .row-Element. Jede Spalte trägt die Klasse col-sm-4, belegt also 4 von 12 Grid-Einheiten = 1/3 der Containerbreite.
Ab einer Viewport-Breite von 576px (Breakpoint "sm") stehen alle drei Spalten nebeneinander. Darunter (z.B. auf dem Smartphone) stapeln sie sich automatisch übereinander, da kein kleinerer Breakpoint wie col-4 definiert wurde.
Die zweite Spalte verhält sich identisch zur ersten. Bootstrap berechnet die Breite automatisch aus dem Gutter (Innenabstand zwischen den Spalten, gesteuert über CSS-Variablen) und der verfügbaren Containerbreite.
Da alle drei Spalten zusammen 12 Einheiten ergeben (4 + 4 + 4 = 12), füllen sie die gesamte Zeile exakt aus – ohne Überlauf in eine neue Zeile.
Die dritte Spalte schliesst die Zeile ab. Würde man eine vierte Spalte mit col-sm-4 hinzufügen, ergäbe das 16 Einheiten – sie würde dann automatisch in eine neue Zeile umbrechen (Grid-Wrapping).
Der rote, gestrichelte outline-Rahmen (siehe <style> oben) macht sichtbar, wo genau Container, Row und jede einzelne Spalte beginnen und enden.