Bootstrap

Kurz: Ein weitverbreitetes CSS-Framework mit vorgefertigten Komponenten (Buttons, Formulare, Grid-Layout) — spart eigenes CSS-Schreiben für Standard-UI-Elemente.

Genauer: Bootstrap liefert ein responsives 12-Spalten-Grid-System und fertig gestylte Komponenten, die man per CSS-Klassen einbindet (z. B. class="btn btn-primary"), statt eigenes Styling zu schreiben. Beliebt für schnelle Prototypen und Projekte ohne eigenes Design-System.

Im Detail

Grid-System und Komponenten

Ein einfaches Bootstrap-Layout mit responsivem Grid sieht z. B. so aus:

<div class="container">
  <div class="row">
    <div class="col-md-6">Linke Spalte</div>
    <div class="col-md-6">Rechte Spalte</div>
  </div>
</div>
 
<button class="btn btn-primary">Kaufen</button>
<div class="alert alert-warning">Achtung, bitte prüfen!</div>

Das Grid ist “mobile-first” aufgebaut: Standardmäßig stapeln sich Spalten untereinander, ab bestimmten Bildschirmbreiten (sm ≥576px, md ≥768px, lg ≥992px, xl ≥1200px) ordnen sie sich nebeneinander an — ohne dass man selbst Media Queries schreiben muss. Neben dem Grid liefert Bootstrap fertige, konsistent gestylte Komponenten für nahezu alle Standard-UI-Elemente: Navigationsleisten, Modals (Dialogfenster), Formularfelder mit Validierungszuständen, Karten (Cards), Akkordeons, Tooltips — jeweils mit passendem JavaScript für Interaktivität (z. B. das Öffnen/Schließen eines Modals) gleich mitgeliefert.

Historische Entstehung

Bootstrap wurde ursprünglich 2011 intern bei Twitter entwickelt (“Twitter Bootstrap”), um interne Tools schneller und konsistenter bauen zu können, und dann als Open-Source-Projekt veröffentlicht. Es traf einen Nerv: viele Teams ohne eigenes Design-System konnten damit schnell professionell wirkende Oberflächen bauen, ohne CSS-Expertise im Team zu benötigen — Bootstrap wurde dadurch über Jahre das mit Abstand meistgenutzte CSS-Framework überhaupt.

Vor- und Nachteile

Bootstraps größter Vorteil (schnell konsistent aussehende Seiten ohne eigenes CSS) ist zugleich sein bekanntester Nachteil: Seiten mit Standard-Bootstrap-Styling sehen sich oft zum Verwechseln ähnlich (“das sieht aus wie Bootstrap” ist unter Designern fast ein Schimpfwort), was für individuelle Markenauftritte meist zusätzliches, aufwändiges Überschreiben der Standard-Styles erfordert. Zudem lädt man oft CSS/JS für Komponenten mit, die man in einem konkreten Projekt gar nicht nutzt, was die Ladezeit unnötig erhöht (moderne Build-Tools können das teilweise durch selektives Importieren mildern).

Alternativen

Moderne Alternativen wie Tailwind CSS verfolgen einen fundamental anderen Ansatz (kleine, kombinierbare Utility-Klassen wie flex, p-4, text-red-500 statt fertiger Komponenten) und haben Bootstrap in neueren Projekten teilweise den Rang abgelaufen, da sie individuelleres Design erlauben, ohne dass man komplett bei Null anfangen muss. Component-Bibliotheken für spezifische Frameworks (z. B. Material UI für React) haben ebenfalls Marktanteile übernommen, insbesondere in Projekten, die ohnehin ein bestimmtes Frontend-Framework nutzen.

Sass als Anpassungsebene

Bootstrap ist selbst in Sass geschrieben (siehe SASS) und stellt zahlreiche Variablen bereit (Farben, Abstände, Breakpoints), die sich vor dem Kompilieren überschreiben lassen, um ein individuelleres Erscheinungsbild zu erzielen, ohne die generierten CSS-Klassen selbst manuell nachträglich zu überschreiben. Diese Anpassungsebene wird in der Praxis aber oft übersehen — viele Projekte nutzen einfach die fertigen CSS-Dateien direkt, was zum bekannten “sieht aus wie Bootstrap”-Effekt beiträgt, statt die eigentlich vorhandene Anpassbarkeit zu nutzen.

Siehe auch: CSS, HTML