Marketing Glossar

2.413 Fachbegriffe aus 22 Bereichen des Online Marketings

Bootstrap

Definition: Bootstrap ist ein Open-Source-CSS- und JavaScript-Framework das vordefinierte UI-Komponenten, ein responsives 12-Spalten-Grid-System und ein umfangreiches Utility-Klassen-System bereitstellt um Web-Interfaces schnell und konsistent zu entwickeln ohne jede Komponente von Grund auf zu stylen. Bootstrap-Kernbestandteile: Grid-System (12-Spalten; Breakpoints: xs/sm/md/lg/xl/xxl; Flexbox-basiert ab Bootstrap 4); UI-Komponenten (Navbar, Cards, Modals, Carousels, Alerts, Badges, Buttons, Forms, Tables, Tabs, Tooltips); Utility-Klassen (spacing, typography, colors, display, flexbox, position); JavaScript-Plugins (Modals, Dropdowns, Offcanvas, Tooltips, Popovers, Carousels; ab Bootstrap 5: reines Vanilla JavaScript ohne jQuery-Abhängigkeit). Verbreitung: Bootstrap ist nach GitHub-Stars (über 167.000 Stars, 2024) das meistgenutzte CSS-Framework weltweit; State of CSS Survey 2023: 62% der Entwickler haben Bootstrap genutzt; oft auf CMS-basierten Websites (WordPress-Themes, Drupal) und in Unternehmensanwendungen präsent. Version: Bootstrap 5 (veröffentlicht Mai 2021): jQuery-unabhängig; verbesserte CSS Custom Properties; RTL-Unterstützung; xxl-Breakpoint; überarbeitetes Formular-Styling.

Erläuterung

Bootstrap wurde 2011 von Mark Otto und Jacob Thornton als internes Twitter-Tool unter dem Namen «Twitter Blueprint» entwickelt um die Konsistenz der internen Twitter-Interfaces zu verbessern. Nach der Open-Source-Veröffentlichung auf GitHub im August 2011 wurde es innerhalb kürzester Zeit zum meistgeforkten Repository auf GitHub und definierte für Jahre das Standard-Design-Idiom des Webs – so sehr dass der «Bootstrap-Look» (abgerundete Buttons; spezifische Blautöne; charakteristische Card-Schatten) als eigenständige ästhetische Kategorie erkennbar wurde. Bootstrap 3 (2013) etablierte den Mobile-First-Ansatz als Standard; Bootstrap 4 (2018) wechselte von float-basiertem zu Flexbox-basiertem Grid. Mark Otto, der als Product Design Director bei GitHub tätig war, pflegt Bootstrap bis heute als Open-Source-Projekt außerhalb von Twitter. Die Kernkritik an Bootstrap – «alle Websites sehen gleich aus» – führte zur Bootstrap-Theming-Industrie (ThemeForest; Envato; Bootstrap-Themes-Marktplatz) und zur Popularität von Customization-Workflows über Sass-Variable-Overrides. Adam Wathan (Entwickler von Tailwind CSS; veröffentlicht 2017 in Montreal; basierend auf seiner Arbeit bei Tighten Co) formulierte das konzeptionelle Gegenprinzip: statt fertiger Komponenten-CSS sollte ein Utility-First-Ansatz verwendet werden bei dem atomare Klassen direkt im HTML kombiniert werden («Designing with Tailwind CSS» Videoserie 2019) – dies führte zur Paradigmendiskussion «Komponenten-Framework (Bootstrap) vs. Utility-First (Tailwind)» die bis heute die Frontend-Community prägt. Bootstrap bleibt trotz Tailwind-Wachstum dominant in Legacy-Projekten, Unternehmensanwendungen und WordPress-Ökosystemen.

Bootstrap Grid-System und Komponenten

Bootstrap vs. Tailwind vs. Custom CSS

Praxistipp: Wenn Sie Bootstrap für neue Projekte einsetzen: Starten Sie nicht mit dem CDN-Link (vollständiges Bundle ~220 KB) sondern mit der NPM-Installation und importieren Sie nur die Sass-Module die Sie tatsächlich benötigen. In einem typischen Projekt brauchen Sie grid, buttons, forms, navbar und utilities – das reduziert das Bootstrap-Bundle auf 40–80 KB. Überschreiben Sie Brands-Farben und Typografie immer als Sass-Variable-Overrides vor dem Bootstrap-Import statt nachträglicher CSS-Überschreibungen – das verhindert Spezifizitätsprobleme und macht das Customizing wartungsfreundlich.