Das Bootstrap 4 Grid-System
In diesem Beitrag zeigen wir euch, wie ihr das Gridsystem von Bootstrap benutzen könnt, um eine responsive Internetseite zu erstellen. Wir beziehen uns dabei auf Bootstrap in der Version 4. Grundlegend funktioniert das Gridsystem in Bootstrap 3 aber genauso. Auf die Unterschiede zwischen den Versionen, die das Gridsystem betreffen, werden wir am Ende dieses Beitrags kurz eingehen.
Einbinden von Bootstrap
Zuerst muss Bootstrap eingebunden werden. Dafür lädt man die benötigten Dateien entweder herunter oder benutzt das BootstrapCDN. Das Stylesheet bootstrap.min.css wird im Head-Bereich der Seite eingebunden und die JavaScript-Datei bootstrap.min.js direkt vor das schließende body-Tag der Seite. Das sogenannte Content Delivery Network (CDN) sorgt dafür, dass die benötigten Dateien von einem Server abgerufen und eingebunden werden. Beide Methoden haben ihre Vor- und Nachteile. Während über das CDN stets die aktuellste Version von Bootstrap verfügbar ist, sind lokale Dateien immer abrufbar und nicht von einem Server und möglichen technischen Problemen abhängig.
Bootstrap benötigt jetzt noch das jQuery-Framework und Popper.js. Auch diese können entweder gedownloaded und selbst gehostet werden oder man nutzt das CDN.
WICHTIG: Unbedingt die Reihenfolge beachten, in der die JavaScript-Dateien eingebunden werden! Zuerst wird jQuery eingebunden, dann Popper.js und erst danach Bootstrap.
Unser HTML-Code sieht nach dem Einbinden von Bootstrap so aus:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4-Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
</head>
<body>
<!-- hier kommt der Inhalt der Seite hin -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>Der Container
Der Container ist ein <div>-Block mit der Klasse .container und umschließt das gesamte Bootstrap-Grid. Er sorgt dafür, dass das Grid die richtige Breite hat (s. Breakpoints) und im Browserfenster zentriert dargestellt wird.
Unterteilt wird der Container in Zeilen, die wiederum in Spalten aufgeteilt werden.
Wir legen also innerhalb unseres <body> einen Container an:
[...]
<div class="container">
</div>
[...]
Die Zeilen
Um eine neue Zeile im Grid anzulegen, fügt man einfach einen <div>-Block mit der Klasse .row in den Container ein. Alle direkten Kinder des Containers sollten Zeilen sein. Auch wenn das Grid zum Beispiel nur aus einer Zeile besteht, können die Spalten nicht direkt in den Container geschrieben werden.
[...]
<div class="container">
<div class="row">
</div>
</div>
[...]
Die Spalten
Um das Grid zu vervollständigen legen wir jetzt innerhalb der Zeile die Spalten an. Wir haben uns für ein dreispaltiges Layout entschieden, daher legen wir innerhalb der .row drei <div>-Blöcke mit der Klasse .col an.
[...]
<div class="container">
<div class="row">
<div class="col">Erste Spalte</div>
<div class="col">Zweite Spalte</div>
<div class="col">Dritte Spalte</div>
</div>
</div>
[...]
Befüllt mit etwas Inhalt sieht das Ganze so aus:
[...]
<div class="container">
<div class="row">
<div class="col bg-secondary">
<h2>Erste Spalte</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
<p>Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</p>
</div>
<div class="col bg-light">
<h2>Zweite Spalte</h2>
<p>Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.</p>
</div>
<div class="col bg-secondary">
<h2>Dritte Spalte</h2>
<p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci.</p>
</div>
</div>
</div>
[...]
Wir haben jetzt ein dreispaltiges Grid. Alle Spalten haben dieselbe Breite, die sich beim Ändern der Fenstergröße automatisch anpasst, sodass alle Spalten gleich breit sind und immer nebeneinanderstehen.
Immer? Zumindest soweit dies möglich ist. Fügen wir in der mittleren Spalte zum Beispiel einen Block ein, der mindestens 250px breit ist, passen ab einer bestimmten Fensterbreite abwärts nicht mehr alle Spalten gleich breit nebeneinander.
[...]
<div class="col bg-light">
<h2>Zweite Spalte</h2>
<div style="min-width: 250px; height: 200px; background-color: grey"></div>
</div>
[...]
Wenn wir jetzt das Fenster schmaler ziehen, sind bis zu einem bestimmten Punkt die Spalten weiterhin gleich breit. Verkleinert man das Fenster über diesen Punkt hinaus, kann die mittlere Spalte nicht mehr kleiner werden, da der Block ja eine Mindestbreite hat.
Ist es nicht möglich die Spalten nebeneinander darzustellen, werden so viele Spalten nebeneinander dargestellt, wie möglich. Die überzähligen Spalten rutschen automatisch in die nächste Zeile.
Feste Spaltenbreite
Bis jetzt haben unsere Spalten (soweit möglich) immer dieselbe Breite. Was aber, wenn wir einer Spalte eine feste Breite geben wollen? Hierzu hängen wir einfach an die Klasse .col ein - gefolgt von einer Zahl von 1 bis 12. Jede Zeile besteht intern aus 12 gleich breiten Spalten und die Zahl gibt an, wie viele dieser Spalten von unserer Spalte belegt werden sollen.
Wenn wir beispielsweise der zweiten Spalte die Klasse .col-6 geben, nimmt diese 6 der 12 internen Spalten ein. Die anderen beiden Spalten teilen die verbleibenden 6 Abschnitte gleichmäßig untereinander auf.
[...]
<div class="row">
<div class="col bg-secondary">
[...]
</div>
<div class="col-6 bg-light">
[...]
</div>
<div class="col bg-secondary">
[...]
</div>
</div>
[...]
Wenn der Platz für die anderen Spalten nicht ausreicht, werden diese wieder in die nächste Zeile verschoben. Dies kann man verhindern, indem man allen Spalten eine Breite gibt und diese zusammen 12 (oder weniger) ergeben. Beispielsweise so:
[...]
<div class="row">
<div class="col-2 bg-secondary">
[...]
</div>
<div class="col-6 bg-light">
[...]
</div>
<div class="col-4 bg-secondary">
[...]
</div>
</div>
[...]
In manchen Fällen möchte man, dass sich die Breite einer Spalte immer an den Inhalt anpasst. Dafür gibt man einfach die Klasse.col-auto an.
Breakpoints
Beim Verändern der Fensterbreite ist vielleicht bereits aufgefallen, dass der gesamte Container innerhalb bestimmter Bereiche die gleiche feste Breite hat. An bestimmten Stellen ändert sich die Breite dann plötzlich. Diese Stellen werden Breakpoints genannt und Bootstrap hat vier davon. Diese teilen das Layout in fünf unterschiedliche Displaygrößen ein: sehr klein, klein, mittel, groß und sehr groß.
| sehr klein | klein | mittel | groß | sehr groß | |
|---|---|---|---|---|---|
| Displaybreite | < 576px | ≥ 576px | ≥ 768px | ≥ 992px | ≥ 1200px |
| max. Containerbreite | auto | 540px | 720px | 960px | 1140px |
| Klassen-Präfix | col- | col-sm- | col-md- | col-lg- | col-xl- |
Mit dem Klassen-Präfix können wir die Spaltenbreiten an die verschiedenen Displaygrößen anpassen. .col-6 bedeutet also, dass die Spalte auf sehr kleinen Displays 6 der 12 Spalten belegt.
Wir benutzen immer das Präfix für die kleinste Displaygröße, für die die jeweilige Spaltenbreite gelten soll. Für alle größeren Displays gilt dann dieselbe Spaltenbreite, außer es wird eine weitere .col-*-Klasse angegeben, die für eine größere Größe steht.
Beispiel:
<div class="col-3 col-lg-6"></div>
Hier werden auf Displays mit einer Breite bis 991px 3 Spalten belegt. Bei breiteren Displays werden 6 Spalten belegt.
Zeilenumbrüche
Automatische Zeilenumbrüche (Wrapping)
Wie oben schon gesehen, macht Bootstrap automatisch einen Zeilenumbruch, wenn der Platz in einer Zeile nicht ausreicht. Im folgenden Beispiel werden die 4 Boxen also automatisch auf zwei Zeilen mit jeweils zwei Boxen aufgeteilt.
<div class="row">
<div class="col-6">Diese Box steht in der ersten Zeile.</div>
<div class="col-6">Diese Box passt noch in die erste Zeile, aber die nächste...</div>
<div class="col-6">... nicht mehr.</div>
<div class="col-6">Diese Box steht auch in der zweiten Zeile.</div>
</div>
Zeilenumbrüche erzwingen (Breaks)
Um einen Zeilenumbruch zu erzwingen, kann an der gewünschten Stelle ein <div class="w-100"></div> eingefügt werden.
<div class="row">
<div class="col-6">Nach dieser Box kommt ein Zeilenumbruch, ...</div>
<div class="w-100"></div>
<div class="col-6">... daher steht diese Box in der zweiten Zeile.</div>
<div class="col-6">Diese Box steht in der zweiten Zeile.</div>
</div>
Offset
Indem wir der Spalte die Klasse .offset-x geben, können wir die Spalte um x Spalten nach rechts verschieben.
<div class="row">
<div class="col-3">Erste Spalte</div>
<div class="col-2 offset-5">Die zweite Spalte hat einen Offset von 5</div>
<div class="col-2">Dritte Spalte</div>
</div>
Hier können natürlich auch wieder Breakpoints angegeben werden, wenn der Offset nur für bestimmte Bildschirmgrößen gelten soll. Mit .offset-{breakpoint}-0 wird der Offset ab dem jeweiligen Breakpoint wieder zurückgesetzt.
<div class="row">
<div class="col-3">Erste Spalte</div>
<div class="col-2 col-md-5 col-lg-7 offset-5 offset-md-2 offset-lg-0">Zweite Spalte</div>
<div class="col-2">Dritte Spalte</div>
</div>
Bootstrap 3
Das Gridsystem in Bootstrap 3 kann grundlegend genauso genutzt werden, wie in diesem Artikel erklärt. (Es gibt in Bootstrap 4 allerdings einige neue Möglichkeiten für spezielle Anwendungsfälle, die wir in diesem Artikel aber nicht behandeln.)
Beachtet jedoch, dass einige Klassennamen und die Breakpoints in Bootstrap 4 geändert wurden.
Hier die Übersicht über die Breakpoints in Bootstrap 3:
| sehr klein | klein | mittel | groß | |
|---|---|---|---|---|
| Displaybreite | < 768px | ≥ 768px | ≥ 992px | ≥ 1200px |
| max. Containerbreite | auto | 750px | 970px | 1170px |
| Klassen-Präfix | col-xs- | col-sm- | col-md- | col-lg- |
