Bootstrap 4 Schnellstart – Sonstige Komponenten

Bootstrap hat noch viele weitere Komponenten zur Auswahl. Allerdings braucht man nicht alle Komponenten. Du hast die Wichtigsten bereits kennengelernt. Hier findest du noch ein paar weitere, die du unbedingt ausprobieren solltest.

(Hinweis: Bootstrap bietet viele weitere Einstellmöglichkeiten. Ein Blick in die offizielle Dokumentation ist hilfreich.)

Badges

Ein Badge lässt sich über ein span-Element erstellen. Dafür werden alle Bootstrap Farben unterstützt:

&lt;h3&gt;Hallo &lt;span class="badge badge-primary"&gt;WELT&lt;/span&gt;&lt;/h3&gt;

Jumbotron

Möchtest du ein riesiges Element auf deiner Seite ganz prominent platzieren? Dann nimm ein div und die Klasse jumbotron. Der Inhalt bekommt einen Rahmen und wird so hervorgehoben.

&lt;div class="jumbotron"&gt;
  &lt;h1 class="display-4"&gt;Hallo, ich bin wichtig!&lt;/h1&gt;
&lt;/div&gt;

Progress

Ein Fortschrittsbalken wird auf jeder Webseite mal gebraucht, hier kannst du einen simplen Balken erstellen:

&lt;div class="progress"&gt;
  &lt;div class="progress-bar" role="progressbar" style="width: 25%" &lt;/div&gt;
&lt;/div&gt;

Über das style-Attribut kannst du den Fortschritt beeinflussen. Über JavaScript leider etwas herausfordernder, da man immer mit dem gesamten Text "width: 52%" arbeiten muss. Die Prozentzahl zeigt, wie weit der Fortschritt ist.

Spinner

Auch in Zeiten von schnellem Internet gibt es noch lange Ladezeiten im Browser. Um so einen Ladevorgang zu zeigen, gibt es Spinner:

&lt;div class="spinner-border"&gt;&lt;/div&gt;

Diese Lektion hat dir die wichtigsten Elemente gezeigt. Doch Bootstrap kann noch mehr.

Weitere Bootstrap-Komponenten:

Breadcrumbs
Cards
Collapse
Dropdown
Listen
Navbar
Pagination
Popover
Toasts
Tooltips

Das sind alles Komponenten, die man für den Schnellstart nicht braucht, die man aber mal gehört haben sollte. Wie du diese in der Dokumentation findest und verwendest, lernst du im nächsten Modul. Viel Spaß bei der Übung!