Das Gridsystem von Bootstrap

Bootstrap hat insgesamt 12 Spalten

Das heißt, dass jede Reihe in 12 Spalten unterteilt werden kann. Diese Spalten können auch unterschiedlich konfiguriert werden.

für den Desktop-PC
für das Tablet
für das Smartphone

Warum das so wichtig ist?

Auf Desktops kann man gut und gerne mal drei Produktboxen nebeneinander positionieren. Auf dem Smartphone würden drei Boxen nebeneinander aber dazu führen, dass jede Box sehr schmal wird und einfach nicht mehr ausreichend bedient werden kann. Hier würde es sich eher empfehlen, dass nur eine oder max. zwei Boxen nebeneinander angezeigt werden. Dies erreicht man, in dem man die CSS-Klasse entsprechend einträgt, die dieses Verhalten erzeugt.

Die Grundregel: die Spaltenzahl von 12 sollte in Summe immer erreicht werden.
Bitte merken: Bootstrap geht immer von einer Minimalbreite aus, daher wird auch der Ansatz "Mobile-first" verfolgt.

Nehmen wir an das Sie festlegen möchten, dass immer drei Boxen auf dem Desktop nebeneinander stehen, dann wird für alle Gerätegrößen darunter auf 100% skaliert. Wenn Sie also festlegen möchten, dass auf dem Tablet statt 3 nur 2 Boxen nebeneinander stehen, dann muss das entsprechend deklariert werden.
Ihnen Stehen hier verschiedene Klassen zur Verfügung

col-xs-# für kleine Geräte
col-sm-# für kleine Tablets
col-md-# für mittlere Größen
col-lg-# für Desktops

12 Spalten

.col-md-1

2-spaltig mit unterschiedlichen Spaltenbreiten

Bei diesem Beispiel wäre die linke Spalte auf Desktops und Tablet 4 Spalten breit, die rechte entsprechend 8 Spalten.
Auf Smartphones würden beide Spalten untereinander angezeigt werden.

.col-md-4

.col-md-8

2-spaltig auf dem Smartphone, 3-spaltig auf dem Tablet, 4-spaltig auf dem Desktop

In diesem Beispiel werden wir ein Layout definieren, das sich auf unterschiedlichen Gerätegrößen unterschiedlich verhält.

.col-xs-6 .col-sm-4 .col-md-3