Bootstrap-5-Beispiele mit Tailwind-Entsprechungen

Bootstrap-5-Beispiele

Bootstrap-5-Beispiele: Navbar, Cards, Grid, Modal + Tailwind | We.Inc

Live-Beispiele für Bootstrap 5.3: Navbar, Cards, Grid, Formulare, ein Modal, Alerts und Buttons, jeweils mit der Tailwind-Entsprechung und einem Klassen-Übersetzer.

Bootstrap 5 baut Layouts aus fertigen Klassen: navbar navbar-expand-lg für ein Menü, row und col-md-4 für ein 12-spaltiges Grid, card für Inhaltsboxen, btn btn-primary für Buttons und alert alert-success für Meldungen. Binde das 5.3.3-CSS über ein CDN ein und das JavaScript-Bundle nur für interaktive Teile wie Modals und Dropdowns.

Zentrale Bootstrap-5-Klassen

Komponente
Bootstrap 5
Tailwind-Idee

Container
mx-auto max-w-7xl px-4

Grid-Zeile und -Spalte
row, col-md-4
grid md:grid-cols-3 gap-6

Card
card, card-body
rounded-xl border p-6

Primärer Button
btn btn-primary
rounded-md bg-blue-600 px-4 py-2 text-white

Alert
alert alert-warning
rounded-md border bg-amber-50 p-4

Jede Komponente unten ist neu für Bootstrap 5.3 geschrieben und wird live angezeigt, mit der Tailwind-CSS-Version derselben Sache daneben, damit du beide Vokabulare vergleichen oder eine Seite vom einen ins andere portieren kannst. Ein Klassen-Übersetzer erledigt die gängigen Eins-zu-eins-Ersetzungen.

Scrolle zur benötigten Komponente. Der Bootstrap-Code links wird live mit dem echten Bootstrap-Stylesheet gerendert.
Bearbeite den Code, um andere Varianten auszuprobieren, etwa btn-outline-danger oder col-lg-3.
Kopiere die Tailwind-Version darunter, wenn dein Projekt stattdessen Tailwind nutzt.
Füge eine Klassenliste in den Übersetzer ein, um gängige Utilities in beide Richtungen umzuwandeln.

Lade bootstrap.bundle.min.js nur, wenn du Modals, Dropdowns, Collapse, Tooltips oder Popovers nutzt. Das Bundle enthält Popper, das Dropdowns und Tooltips brauchen.
Passe über CSS-Variablen wie --bs-primary-rgb oder per Sass vor dem Kompilieren an, statt Komponentenklassen einzeln zu überschreiben.
Bootstrap 5.3 hat Farbmodi. Füge data-bs-theme="dark" zum html-Element oder einem beliebigen Wrapper hinzu, um diesen Bereich auf die dunkle Palette umzustellen.
Lege in CDN-Links die exakte Version fest und füge den Integrity-Hash aus der offiziellen Dokumentation hinzu, damit sich keine veränderte Datei einschleichen kann.

Häufige Fragen

Wie klappt eine Bootstrap-5-Navbar auf dem Handy ein?

Nutze navbar-expand-lg (oder md, sm) auf dem nav, füge einen navbar-toggler-Button mit data-bs-toggle="collapse" und einem data-bs-target hinzu, das auf die ID des Menüs zeigt, und umschließe die Links mit einem div mit collapse navbar-collapse. Zum Öffnen und Schließen braucht der Umschalter das Bootstrap-JavaScript-Bundle.

Wie viele Spalten hat das Bootstrap-Grid?

Zwölf pro Zeile. col-6 nimmt die Hälfte ein, col-4 ein Drittel, und Breakpoint-Präfixe wie col-md-4 gelten ab dieser Breite aufwärts. Es gibt sechs Breakpoints: den Standard unter 576px, dann sm, md, lg, xl und xxl bei 576, 768, 992, 1200 und 1400 Pixeln.

Sollte ich Bootstrap oder Tailwind nutzen?

Bootstrap ist schneller, wenn du fertige Komponenten und einen klassischen Look mit wenig Designarbeit willst. Tailwind ist schneller, wenn du ein eigenes Design hast und Komponenten selbst baust. Beide stehen unter der MIT-Lizenz und werden gut gepflegt.

Braucht Bootstrap 5 jQuery?

Nein. Bootstrap 5 hat jQuery entfernt. Seine JavaScript-Plugins sind reines JavaScript, und Popper ist die einzige Abhängigkeit, enthalten in der Bundle-Datei.

Warum öffnet und schließt sich das Modal auf dieser Seite nicht?

Die Beispiele laufen in einem abgeschotteten Frame mit deaktivierten Skripten, daher wird das Modal mit den Klassen position-static und d-block bereits geöffnet angezeigt. Auf einer echten Seite öffnet und schließt das JavaScript-Bundle es und verwaltet den Fokus.

Wann Bootstrap und wann Tailwind

Bootstrap lohnt sich bei internen Tools, Admin-Panels und schnellen Marketing-Websites, bei denen der Standard-Look akzeptabel ist und funktionierende Widgets wichtiger sind als ein unverwechselbarer Stil. Du schreibst weniger Klassen und bekommst getestetes Tastaturverhalten für Modals und Dropdowns.
Tailwind lohnt sich, wenn ein Designer ein individuelles Layout übergibt. Bootstraps Card-Padding und Button-Stile an ein eigenes Design anzupassen dauert länger, als die Card aus Utilities zu bauen, und nur die Klassen, die du nutzt, landen im Stylesheet.

Lizenz und Namensnennung

Bootstrap wird von The Bootstrap Authors unter der MIT-Lizenz veröffentlicht. Du kannst es in kommerziellen Projekten nutzen; behalte den Lizenzkommentar bei, der oben in den CSS- und JavaScript-Dateien steht. Das Markup auf dieser Seite stammt von uns und darf frei kopiert werden.

Komponenten: Bootstrap 5.3 live, Tailwind daneben

Jeder Live-Frame lädt eine unveränderte Kopie des Bootstrap-5.3.3-Stylesheets, die wir selbst hosten. In deinem eigenen Projekt lädst du es mit dem unten gezeigten Link vom offiziellen CDN. Skripte sind in den Frames deaktiviert, daher ist nur die CSS-Seite jeder Komponente zu sehen.

Bootstrap 5.3.3 im eigenen Projekt laden

Setze das Stylesheet in den head und das Bundle vor das schließende body-Tag. Kopiere die Integrity-Hashes von getbootstrap.com und füge sie als Attribute integrity und crossorigin hinzu.

Navbar: Bootstrap 5.3

navbar-expand hält die Links bei jeder Breite sichtbar, da der Frame das Collapse-Skript nicht ausführen kann. Nutze auf einer echten Website navbar-expand-lg plus einen Toggler.