Bootstrap

Bootstrap ist ein Open-Source CSS-Framework, ursprünglich von Twitter entwickelt. Es bietet ein responsives 12-Spalten-Grid-System, vorgefertigte UI-Komponenten (Buttons, Forms, Modals, Navigation) und Utility-Classes für schnelles Styling. Bootstrap war revolutionär für responsive Webdesign und ist bis heute das meistgenutzte CSS-Framework - ideal für schnelle Prototypen und Admin-Interfaces.

Die Stärken von Bootstrap: Schnelle Entwicklung durch fertige Komponenten, konsistentes Design out-of-the-box, umfangreiche Dokumentation, große Community und Tausende Themes/Templates. Für Entwickler ohne Design-Expertise bietet Bootstrap sofort professionell aussehende UIs. Bootstrap 5 hat jQuery-Abhängigkeit entfernt und ist schlanker geworden.

Die Nachteile: "Bootstrap-Look" - viele Websites sehen ähnlich aus ohne Customizing. Größere Bundle-Size als Utility-First-Frameworks wie Tailwind. Überschreiben von Bootstrap-Styles kann mühsam sein ("Spezifitäts-Kampf"). Für moderne Projekte mit individuellen Designs ist Tailwind CSS oft flexibler. Bootstrap eignet sich ideal für schnelle Prototypen, Admin-Dashboards und wenn sofort verwendbare Komponenten wichtiger sind als individuelle Designs.

Technisch basiert Bootstrap 5 auf Sass: Über zentrale Variablen (etwa $primary, $grid-breakpoints oder $spacer) und eine Utility-API lässt sich das Design anpassen, sodass der oft kritisierte einheitliche Look vermeidbar ist - vorausgesetzt, man kompiliert eine eigene Sass-Version statt das fertige CSS einzubinden. Das Grid nutzt Flexbox mit zwölf Spalten und fünf responsiven Breakpoints (sm 576px, md 768px, lg 992px, xl 1200px, xxl 1400px). Interaktive Komponenten wie Modals, Dropdowns oder Offcanvas laufen seit Version 5 über natives Vanilla-JavaScript, die frühere jQuery-Abhängigkeit ist entfallen.

Der zentrale Unterschied zu Tailwind CSS liegt in der Philosophie: Bootstrap liefert fertige, gestylte Komponenten (component-first), Tailwind nur atomare Utility-Klassen (utility-first), aus denen man Komponenten selbst zusammensetzt. Bootstrap ist dadurch schneller im ersten Wurf, führt aber ohne Anpassung zum Wiedererkennungseffekt und bringt bei vollständigem Import mehr ungenutztes CSS mit - das lässt sich per PurgeCSS oder gezieltem Sass-Import reduzieren. Für datenlastige Admin-Oberflächen, interne Tools und schnelle Prototypen, bei denen Konsistenz wichtiger ist als ein einzigartiges Markendesign, bleibt Bootstrap eine pragmatische Wahl; für ein individuelles, markenprägendes Frontend greifen moderne Teams eher zu Tailwind oder Komponentensystemen wie shadcn/ui.