Bootstrap ist ein freies Frontend-CSS-Framework. Es enthält auf HTML und CSS basierende Gestaltungsvorlagen für Typografie, Formulare, Buttons, Tabellen, Grid-Systeme, Navigations- und andere Oberflächengestaltungselemente sowie zusätzliche, optionale JavaScript-Erweiterungen (Quelle von diesem Text: Wikipedia).
Bootstrap benötigt zwingend HTML5. Daher ist es notwendig folgende Deklaration zu verwenden:
<!doctype html> <html lang="de"> ... </html>
Außerdem benötigt Bootstrap jquery und Popper.js.Am einfachsten ist es, Bootstrap über ein CDN (Content Delivery Network) einzubinden. Hierfür muss der Head-Bereich des HTML-Dokuments um eine Zeile für die Styles und drei Zeilen für die Javascript-Dateien ergänzt werden. Hierbei ist die Einhaltung der Reihenfolge wichtig:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Das äußere Div ist immer ein container. Es können beliebig viele Container in einer Seite angelegt werden. Allerdings dürfen Container nicht in Container verschachtelt werden. Jeder Container muss mindestens eine Reihe „row“ besitzen. In einer „row“ können belieb viele Spalten „col“ enthalten sein. Eine Spalte „col“ kann wiederrum weitere Reihen „row“ enthalten. Die Anzahl der „col“ pro Reihe sollte bei dem 12-Spalten-System die 12 nicht überschreiten.
<div class="container"> <div class="row"> <div class="col-x"> </div> </div>
Die Klassen werden immer in der Reihenfolge „von klein nach groß“ definiert, wobei für die kleinste Auflösung kein Präfix angegeben werden muss.
| Pxel | Name | CSS-Klasse | Beispiel |
|---|---|---|---|
| < 576px | Extra small | xs | col-xs-12 |
| >= 576px | Small | sm | col-sm-8 |
| >= 768px | Medium | md | col-md 4 |
| >= 992px | Large | lg | col-lg-3 |
| >= 1200px | Extra large | xl | col-xl-3 |
Beispiel:
<div class="container"> <div class="row"> <div class="d-none d-lg-block col-lg-5">...</div> <div class="col-12 col-lg-7">...</div> </div> </div>
In diesem Beispiel werden in den Auflösungen xs, sm und md wird die 1. Spalte mit „d-none“ ausgeblendet und nur die 2. Spalte mit der gesamten Breite „col-12“ angezeigt. In den Auflösungen lg und xl werden beide Spalten angezeigt, wobei die 1. Spalte 5 cols und die 2. Spalte 7. cols einnimmt.
Hier ist zu erkennen, dass nicht alle Auflösungen angegeben werden müssen. Die zwischenliegenden Auflösungen nehmen den Wert der vorher definierten Auflösung an.
| Ausrichtung | CSS-Klasse | Auswirkung | Standardwert |
|---|---|---|---|
| Horizontal | justify-content-start | Richtet den Inhalt einer Reihe linksbündig aus | X |
| Horizontal | justify-content-center | Zentriert den Inhalt einer Reihe | |
| Horizontal | justify-content-end | Richtet den Inhalt einer Reihe rechtsbündig aus | X |
| Horizontal | justify-content-around | Jede Spalte hat links und Rechts den gleichen Abstand | |
| Horizontal | justify-content-between | Spalten werden links und rechts gesetzt | |
| Vertikal | align-items-start | Richtet den Inhalt einer Reihe linksbündig aus | X |
| Vertikal | align-items-center | Zentriert den Inhalt einer Reihe | |
| Vertikal | align-items-end | Richtet den Inhalt einer Reihe rechtsbündig aus | X |
Mit der CSS-Klasse „img-fluid“ werden Bilder auflösungsabhängig angepasst.