Wie binde ich Bootstrap in meine Seite ein?

Hier erfährst du, wie du Bootstrap zusammen mit allen benötigten Abhängigkeiten in dein Projekt einbindest. Für Angular habe ich einen extra Teil verfasst, da man Bootstrap dort per NPM installieren sollte, um später bei einem Produktivbuild deines Projektes einen optimalen Komprimierungsgrad erzielen zu können.

Für normale HTML Seiten per CDN Links

Hast du eine einfache Seitenstruktur mit z.B. einzelnen HTML Dateien musst du die Bootstrap CSS Datei im <head> und die JavaScript Dateien ganz unten im <body> deiner Seite hinzufügen

Dazu gehst du in deinen <head></head> Bereich deiner Datei und fügst für die Aktuelle Bootstrap 4.4 Version folgende Zeile ein:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Ich empfehle aber vorher auf https://www.bootstrapcdn.com/ zu schauen, ob es bereits eine neuere Version von Bootstrap gibt und dann diesen Link einzubinden (s. Screenshot).

Im normalen <body></body> deiner Seite musst du außerdem für vollständige Funktionalität von Bootstrap jQuery, Popper.js sowie die Bootstrap eigene JS Datei einbinden:

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Am Beispiel einer kleinen Demo Seite von mir würde der Code wie folgt aussehen:

Das war’s schon. Wenn du deine Seite manuell mit einzelnen HTML Dateien entwickelst musst du diese Schritte natürlich für alle Dateien deiner Webseite wiederholen.


Für Angular Projekte über NPM

Bei Angular sollte man aus Performancegründen wenn möglich immer die NPM Version von Bootstrap benutzen, da diese mit in dein Projekt „gebaut“ wird. Dadurch müssen deine Seitenbesucher am Ende nur die Teile von Bootstrap herunterladen, die du auch in deinem Projekt benutzt. Dies spart für deine Seitenbesucher unterwegs vor allem Datenvolumen und dadurch natürlich auch Ladezeit ein.

In deinem Angular Projekt öffnest du zuerst ein neues Terminal (bzw. Kommandozeile) und installierst über NPM die Pakete bootstrap, popper.js und jquery:

npm i --save bootstrap popper.js query

Das Argument –save bewirkt, dass diese Pakete in die package.json Datei geschrieben werden und so z.B. bei einem „npm install“ nach einem erneuten clonen des Projektes erneut mit installiert werden.

Nachdem die Installation durchgelaufen ist öffnest du in deinem Projekt die „angular.json“ Datei, welche sich im Hauptordner deines Projektes befindet. Dort suchst du den Punkt „styles“: […] und fügst folgende Zeile hinzu:

"./node_modules/bootstrap/dist/css/bootstrap.min.css"

Danach sollte das Array, wenn du nicht vorher schon etwas hinzugefügt hast, so aussehen:

Danach gehst du in das nächste Array „scripts“: […] und fügst folgende Zeilen hinzu:

"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/umd/popper.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"

Das scripts Array ist mit hoher Wahrscheinlichkeit noch leer und sieht danach wie folgt aus:


Hast du die CSS und JS Pakete erfolgreich eingebunden sollte dein styles und scripts Array wie meins aussehen:

Nach diesen 3 Schritten hast du Bootstrap bereits in dein Angular Projekt integriert und musst nur noch den Angular Webserver neustarten.


Hast du weitere Wünsche oder Vorschläge für dieses HowTo? Schreib mir per Mail an support@unbekannt3.eu oder eröffne ein Support Ticket unter support.unbekannt3.eu 🙂