Bootstrap für TYPO3

Bootstrap-basierte TYPO3-Projekte brauchen ein Sitepackage, das die Brücke zwischen Framework und CMS schlägt

Bootstrap ist das meistgenutzte CSS-Framework der Welt. Über 25 Prozent aller Websites setzen Bootstrap ein. Für TYPO3-Projekte bedeutet das: Designer liefern Entwürfe in Bootstrap, Entwickler kennen die Klassen und Komponenten, und Kunden erwarten responsive Layouts, die auf Bootstrap aufbauen. ws_t3bootstrap bringt Bootstrap als Sitepackage direkt in TYPO3: Responsive Templates, das Grid-System, Bootstrap-Komponenten (Accordion, Cards, Carousel, Tabs, Alerts) als Content-Elemente und eine vorkonfigurierte TypoScript-Basis. Statt Bootstrap manuell in ein leeres TYPO3-Projekt zu integrieren, liefert ws_t3bootstrap einen funktionsfähigen Startpunkt, der sofort produktionsfähig ist.

Typische Einsatzszenarien sind Unternehmenswebsites, Portale und Rapid-Prototyping

Das häufigste Szenario ist die mittelständische Unternehmenswebsite. Ein Unternehmen mit 50 bis 500 Mitarbeitenden braucht eine Website mit 30 bis 80 Seiten: Startseite, Über uns, Leistungen, Referenzen, Karriere, Kontakt. Der Designer erstellt ein Mockup auf Basis von Bootstrap 5. ws_t3bootstrap liefert die Templates, das Grid-System und die Content-Elemente, sodass der Entwickler nur das Custom CSS (Farben, Schriften, Abstände) und projektspezifische Komponenten ergänzen muss. Typische Entwicklungszeit: zwei bis drei Wochen vom Mockup zur fertigen Website, statt vier bis sechs Wochen bei einem Custom-Setup.

Ein zweites Szenario sind Intranet-Portale. Ein Unternehmen betreibt ein TYPO3-Intranet für 2.000 Mitarbeitende. Das Design muss nicht einzigartig sein, aber konsistent und responsive. ws_t3bootstrap liefert ein professionelles Standard-Layout, das ohne grossen Design-Aufwand eingesetzt werden kann. Content-Elemente wie Akkordeons für FAQs, Tabs für Abteilungsinformationen und Cards für News-Teaser sind sofort verfügbar.

Drittes Szenario: Rapid Prototyping. Eine Agentur baut in zwei Tagen einen funktionierenden Website-Prototyp, den der Kunde freigeben kann. ws_t3bootstrap reduziert die Setup-Zeit auf Stunden statt Tage, weil die Grundstruktur (Header, Footer, Navigation, Grid) bereits steht.

Technische Architektur registriert Bootstrap-Komponenten als TYPO3 Content Elements

ws_t3bootstrap installiert sich als TYPO3-Sitepackage und konfiguriert: TypoScript-Setup mit Bootstrap-CSS/JS-Includes, Fluid-Templates für Header, Footer und Seitenlayouts, Backend-Layouts (1-Spalter, 2-Spalter, 3-Spalter mit Sidebar) und Content-Elemente, die Bootstrap-Komponenten abbilden.

Die Content-Elemente werden über TCA-Konfigurationen und Fluid-Templates definiert. Ein Accordion-Element erstellt beispielsweise ein Bootstrap-Accordion mit n Panels, jedes Panel mit Titel und Body-Text. Ein Card-Element erzeugt eine Bootstrap-Card mit Bild, Titel, Text und Link. Ein Grid-Element ermöglicht verschachtelte Spalten-Layouts innerhalb einer Seite.

Das Bootstrap-CSS wird entweder als kompilierte CSS-Datei eingebunden (schnell, keine Build-Tools nötig) oder als Sass-Quellcode, der über ein Build-System (Webpack, Vite) kompiliert wird. Die Sass-Variante erlaubt, Bootstrap-Variablen (Farben, Breakpoints, Schriftgrössen) zu überschreiben und nur die benötigten Bootstrap-Module einzubinden, was die CSS-Dateigrösse von 230 KB auf 80 bis 120 KB reduziert.

Die JavaScript-Komponenten (Accordion, Collapse, Dropdown, Modal, Tab, Toast) werden über Bootstrap 5 eingebunden, das ohne jQuery auskommt. Das reduziert die JavaScript-Dateigrösse gegenüber Bootstrap 4 um rund 85 KB (jQuery-Wegfall).

Häufige Probleme betreffen Bootstrap-Versions-Konflikte und CSS-Spezifitäts-Kämpfe

Das grösste Problem bei Bootstrap-Sitepackages ist der Versions-Konflikt. Wenn ws_t3bootstrap Bootstrap 5.2 einbindet, aber eine andere Extension (z.B. ein Slider-Plugin) Bootstrap 4.6 oder 3.x mitbringt, kollidieren die CSS-Klassen. Bootstrap 4 nutzt “col-md-4”, Bootstrap 5 ebenfalls, aber mit unterschiedlichem Verhalten bei bestimmten Utilities. Die Lösung: Alle Extensions auf dieselbe Bootstrap-Version vereinheitlichen oder Extension-eigenes Bootstrap per CSS-Scoping isolieren.

Zweites Problem: CSS-Spezifität. Wenn Custom CSS die Bootstrap-Klassen überschreiben muss, entsteht ein Spezifitäts-Wettlauf: !important-Deklarationen häufen sich, weil Bootstrap-Utilities hohe Spezifität haben. Die Lösung: Bootstrap-Variablen statt CSS-Overrides nutzen und das Custom-Stylesheet nach dem Bootstrap-CSS laden.

Drittes Thema: Performance. Bootstrap als Framework lädt alle Komponenten, auch wenn die Website nur fünf davon nutzt. Bei einer Website, die nur Grid, Cards und Navbar braucht, werden 80 Prozent des Bootstrap-CSS nie genutzt. PurgeCSS oder ein selektiver Sass-Import reduziert die CSS-Dateigrösse auf das Nötige.

TYPO3 v12 und v13 werden unterstützt, Bootstrap 5 ist der aktuelle Standard

ws_t3bootstrap wird aktiv gepflegt und unterstützt TYPO3 v12 und v13. Die aktuelle Version basiert auf Bootstrap 5.3. Beim Upgrade von Bootstrap 4 auf 5 sind Breaking Changes zu beachten: jQuery-Abhängigkeit entfällt, einige CSS-Klassen wurden umbenannt (z.B. ml-/mr- zu ms-/me-), und die JavaScript-API hat sich geändert. Gosign führt Bootstrap-Upgrades zusammen mit TYPO3-Upgrades durch und prüft dabei alle Content-Elemente auf korrekte Darstellung. Bei neuen Projekten empfehlen wir ws_t3bootstrap als Startpunkt und ergänzen das Sitepackage um projektspezifische Komponenten, statt Bootstrap von Grund auf in TYPO3 zu integrieren.