Bootstrap 4 Schnellstart – Grid Optionen

Grid Optionen

Bootstrap nimmt dir eine Menge Arbeit ab, die dir im ersten Moment gar nicht auffallen würde.

Nutzt du die col-Klassen, kümmert sich Bootstrap automatisch darum, dass alle Spalten in etwa gleich groß sind. Dir bleibt dennoch die Möglichkeit, die Größen zu ändern.

Die Maximalgröße von 12 Spalten ist nämlich auch eine Orientierung um die Größen der Spalten zu beeinflussen.

Möchtest du also die Größen der Spalten verändern, musst du mit den 12 Spaltengrößen „rechnen“. Bei einem Layout mit 3 Spalten, wäre also jede Spalte 4 Größeneinheiten groß (Beispielbild mit 11 Spalten und 3 Spalten):

Wollen wir nun die mittlere Spalte vergrößern, können wir folgende Aufteilung wählen:

Beispielbild letzte Zeile: Spalte 1: 2, Spalte 2: 8, Spalte 3: 2

Die Summe der Spalten darf maximal 12 ergeben.

Wie gibt man diese Zahlen nun in Bootstrap an?

Neben der col-Klasse gibt es verschiedene Klassen von col-1 bis col-11.

Nehmen wir das letzte Beispiel und erstellen das 3-Spalten-Layout mit individuellen Größen:

<div class="row">
  <div class="col-2">
    Zelle 1
  </div>
  <div class="col-8">
    Zelle 2
  </div>
  <div class="col-2">
    Zelle 3
  </div>
</div>

Am besten probierst du die verschiedenen Größen in der folgenden Übung aus. Als visuelle Hilfe kannst du in der Übung einen Rahmen um die Elemente sehen.