Bootstrap 4 Schnellstart – Grid System

Wie erstelle ich ein Webseiten-Layout?

Eins der kompliziertesten Themen in HTML sowie CSS (zumindest früher und wenn man als Anfänger startet) ist das Layouting.

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

Seitdem alle Webseiten mobil erreichbar sein müssen, kommt dazu die Herausforderung, dass das Layout zusätzlich 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 erstellen.

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 (dt. Zeilen und Spalten)

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 einfügen. Benötigst du eine weitere Zeile oder Spalte, fügst du entsprechende Elemente mit den Klassen row oder col hinzu.

Wichtig zu wissen ist, dass man 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 die Basics für das Layout. In dem Beispiel darfst du mit einem Layout herumspielen, in dem du Zeilen und Spalten anlegst.