Bootstrap: Ein 5 spaltiges Layout erstellen

04. Okt. 2017 // Moritz Kanzler //


Zu Bootstraps Grundgerüst zählt ein auf 12 Spalten basierendes Layout, mit welchem man seine Inhalte in verschiedenen Verhältnissen anordnen kann. Bei meinem letzten Projekt wurde aber als Grundvoraussetzung ein 5-spaltiges Layout gefordert. Dieses Layout sollte als Minimum genau Platz für fünf einzelne Element in einer Reihe bieten. Dazu kamen noch Elemente die entweder 2 oder 3 der fünf Spalten breit sind, oder aber komplett über 5 Spalten gespannt werden können müssen. Versucht man dieses 5 spaltige Layout auf die 12 spaltige Basis von Bootstrap anzuwenden, erkennt man schnell, das dies ohne eine Erweiterung der zur Verfügung stehenden CSS Klassen nicht möglich ist.

Die gegebenen Klassen für die Aufteilung der Größenverhältnisse der Elemente lassen Teiler von 1, 2, 3, 4, 6 und 12 zu, nicht aber 5.

Dieser Artikel beschreibt zwei Wege, wie in Bootstrap dennoch mit einem 5 spaltigen Grundlayout gearbeitet werden kann. Dazu werden zwei mögliche Strategien vorgestellt.

Wichtig ist dabei, dass versucht werden muss, die Grundstruktur von Bootstrap, und die Vorteile die dieses mitbringt, nicht von der Erweiterung untergraben werden. So soll die Browserkompatibilität und vor allem der responsive Charakter von Bootstrap unverändert bleiben und die Änderungen möglichst einfach und an grundlegender Stelle getätigt werden.

Hinweis: Die vorgestellten Lösungen beziehen sich auf die Arbeit mit Bootstrap 3. Durch das Flexboxdesign in Bootstrap 4 sind diese Anpassungen nicht mehr nötig!

via GIPHY

Anforderung

Die Anforderung an das hier besprochene Layout ist wie folgt:

  • 5-spaltiges Grundlayout
  • eine Box über die gesamte Breite (5 Spalten breit)
  • zwei Boxen nebeneinander im Verhältnis 3:2 (eine Box, 3 Spalten breit + eine Box 2 Spalten breit)
  • fünf Boxen nebeneinander (5x eine Box, die eine Spalte breit ist)
  • Diese „gedachte“ Aufgliederung in ein 5 spaltiges Layout soll auf dem Grundgerüst des 12 spaltigen Bootstraplayouts umgesetzt werden!

Ansatz 1: Mit dem Bootstrap Offset arbeiten

Der erste Ansatz arbeitet komplett mit den verfügbaren Bootstrap Klassen. Die Idee ist, das 12 spaltige Layout von Bootstrap auf ein 10 spaltiges Layout zu reduzieren. Das kann durch die CSS Klasse col-xy-offset-1 erreicht werden. Diese Anweisung rückt das Element um n Stellen nach rechts.

Im unten gezeigten Beispiel wird damit jedes Element auf der linken Seite um eine Stelle nach rechts gerückt. Wählt man dann im weiteren eine Aufteilung von maximal 10 Spalten bleibt auch auf der rechten Seite eine Spalte unbesetzt. Dadurch ergibt sich eine Art Rand, welcher jeweils ein Element links und rechts auslässt.

Auf den ersten Blick ist dieser Ansatz sehr einfach umzusetzen, da an der eigentlichen Klassenstruktur von Bootstrap nichts geändert werden muss. Problematisch sind allerdings zwei Punkte:

  1. In jeder anzulegenden Reihe („row“) des Layouts muss daran gedacht werden, beim ersten Element, die Klasse col-xy-offset-1 einzubauen, ansonsten wird weiter die 12 Spaltige Ausgabe genutzt.
  2. Das Setzen des 1-Element großen Rahmens sorgt dafür, dass das Layout nicht die volle Breite des Browsers ausnutzen kann. Falls das sowieso nicht gewünscht ist, ergibt sich daraus kein Problem, möchte man aber die gesamte zur Verfügung stehende Breite nutzen, ist das mit diesem Ansatz nicht möglich.

Ansatz 2: Einführen neuer CSS Klassen

Die zweite Methode um ein fünf spaltiges Layout „nativ“ in Bootstrap umzusetzen, ist die Nutzung und Anpassung vorhandener CSS Klassen. Dazu werden neue CSS Klassen definiert, welche für das fünf spaltige Layout verwendet werden können.

Grundlage für die Anpassungen ist die Tatsache, dass Bootstrap die Größe der einzelnen Spalten per width Angabe in CSS prozentual ausdrückt. Das bedeutet, dass zum Beispiel ein col-md-6 Element mit einer Breite von 50% definiert ist. Ein col-md-4 hat entsprechend eine Breite von 33,3% (12/4 = 3, 100/3 = 33,3).
Möchte man nun Elemente in fünf Spalten darstellen, so ergeben sich folgende Aufteilungen:

Elementgröße im 5-spaltigen KontextElementgröße im 12-spaltigen KontextProzentualer AnteilKlassenname (beispielhaft)
1 von 52,420%col-sm-2_4
2 von 54,840%col-sm-4_8
3 von 57,260%col-sm-7_2
4 von 59,680%col-sm-9_6
5 von 512100%col-sm-12 (vorhanden)

 

Betrachtet man die prozentualen Anteile wird schnell klar, dass die Standartelemente von Bootstrap für diese Breitenangaben noch nicht definiert sind.

Eine erster naiver Ansatz kann sein, die Klassendefinitionen der bisherigen col-xy-z Klassen zu kopieren und in das eigene CSS zu integrieren. Dieses Vorgehen funktioniert zunächst einwandfrei, kann aber zu Problemen bei der Mobildarstellung führen, und noch wichtiger: Bei einer Änderungen der grundlegenden Bootstrap Funktionalität kann es zu Problemen mit den selbst definierten Klassen führen. Deshalb bietet Bootstrap einige Funktionen an, um eigene Implementationen von CSS Klassen korrekt, im Kontext des unterliegenden Bootstrapkerns, zu integrieren.

Um eine solche Eigenimplementation auf Basis der Bootstrapklassen zu machen muss einer von zwei CSS Preprozessoren verwendet werden. Die Funktion die genutzt wird ist je nach verwendetem CSS Preprozessor (LESS oder SASS) unterschiedlich. Bootstrap bietet verschiedene Methoden an um eigene Klassenkonzepte erweitern zu können. Eine solche Methode oder Mixin wird im Folgenden verwendet. In diesem Beispiel wird auf SASS als Preprozessor gesetzt.

Wie im obigen Listing zu sehen ist konnten durch die SASS Mixins ganz einfach die benötigten Spaltenlayouts definiert werden. Dabei gibt man als Parameter für die Methode make-md-column einfach das gewünschte Verhältnis der Spalte im Bezug auf das 12 spaltige Design an (Tabelle oben). Wird die SASS Datei kompiliert, erhält man die neu definierten Spaltengrößen als vollständig Bootstrap-kompatible CSS Klassen und kann diese mit allen Vorteilen der klassischen Spaltenverhältnisse nutzen.

Das folgende Listing zeigt einen beispielhaften Aufbau eines 5 spaltigen Layouts mit den neu definierten Klassen:

Fazit

Ein rein 5 spaltiges Layout mit Bootstrap zu erstellen, ist „out-of-box“ gar nicht so einfach möglich. Ansatz 1 zeigt jedoch, dass mit dem Einsatz weiterer Bootstrap Klassen ein solches Layout grundsätzlich umsetzbar ist. Dennoch hat Ansatz 1 zwei gravierende Einschränkungen, weshalb Bootstrap von sich aus schon Möglichkeiten bietet, eigene Spaltenverhältnisse für das Layout anzulegen.

Auf diesem Gedanken fußt Ansatz 2, der eine saubere Integration von Bootstraps Erweiterungsmöglichkeiten nutzt um ein „echtes“ 5 spaltiges Layout umzusetzen. Dennoch ist anzumerken, dass diese Vorgehensweise einen tieferen Einstieg in die Materie fordert: CSS Preprozessoren, Mixins, etc..
Grundsätzlich halte ich es aber für größere Projekte, alleine aus Gründen der Wartbarkeit und Erweiterbarkeit, für absolut sinnvoll den Weg von Ansatz 2 zu gehen um eine klare und korrekte Einbindung umsetzen zu können.

Nützliche Links