Webseite Schnellstart – Bootstrap Grid

Grid-System

Eine der kompliziertesten Dinge in HTML und CSS überhaupt (zumindest früher und wenn man als Anfänger startet) ist das Layouting.

Es gibt verschiedene Möglichkeiten und Techniken um ein Webseiten Layout richtig zu gestalten.

Seitdem alle Webseiten auch mobil erreichbar sein müssen, kommt dazu die Herausforderung, dass das Layout auch noch responsiv sein muss, dazu aber später mehr.

Dank Bootstrap haben wir die Möglichkeit mit ein paar CSS-Klassen ein Layout nach unseren Wünschen zu designen.

Sobald wir einen Bootstrap Container definiert haben (siehe letzte Lektion!) können wir in Bootstrap Zeilen und Spalten erstellen, ähnlich wie in einer Tabelle.

Rows und Columns

In einem Container kann man zunächst mehrere Zeilen definieren, dies geht mit einem div und der Klasse row, z.B.

<div class="row">
</div>

Um eine Spalte in dieser Zeile hinzuzufügen erstellt man ein weiteres div mit der Klasse col:

<div class="row">
  <div class="col">
  </div>
</div>

In das div-Element kann man nun ohne Probleme alle weiteren Elemente packen. Benötigst du eine weitere Zeile oder Spalte fügst du entsprechende Elemente mit den Klassen row oder col hinzu.

Wichtig zu wissen ist, da man standardmäßig maximal 12 Spalten verwenden kann. In den seltensten Fällen benötigt man mehr Spalten. Solltest du mal mehr als 12 Spalten benötigen, melde dich bitte per Mail bei uns, das wollen wir sehen! ?

Das sind erstmal die Basics für das Layout, in dem Beispiel darfst du mal mit einem Layout rumspielen und selber Zeilen und Spalten anlegen.