Bootstrap for TYPO3

Bootstrap-based TYPO3 projects need a site package that bridges framework and CMS

Bootstrap is the most widely used CSS framework in the world. More than 25 percent of all websites use it. For TYPO3 projects, that means designers deliver their designs in Bootstrap, developers know the classes and components, and clients expect responsive layouts built on Bootstrap. ws_t3bootstrap brings Bootstrap into TYPO3 as a site package: responsive templates, the grid system, Bootstrap components (accordion, cards, carousel, tabs, alerts) as content elements and a preconfigured TypoScript foundation. Instead of integrating Bootstrap manually into an empty TYPO3 project, ws_t3bootstrap provides a working starting point that is ready for production right away.

The typical projects are corporate websites, intranet portals and rapid prototypes

The most common scenario is the website of a mid-sized company. A business with 50 to 500 employees needs a website with 30 to 80 pages: home, about us, services, references, careers, contact. The designer creates a mockup based on Bootstrap 5. ws_t3bootstrap supplies the templates, the grid system and the content elements, so the developer only has to add the custom CSS (colors, fonts, spacing) and the project-specific components. Typical development time: two to three weeks from mockup to finished website, instead of four to six weeks with a custom setup.

A second scenario is intranet portals. A company runs a TYPO3 intranet for 2,000 employees. The design does not have to be unique, but it must be consistent and responsive. ws_t3bootstrap provides a professional standard layout that can be used without major design effort. Content elements such as accordions for FAQs, tabs for department information and cards for news teasers are available right away.

Third scenario: rapid prototyping. An agency builds a working website prototype in two days that the client can sign off on. ws_t3bootstrap cuts setup time to hours instead of days, because the basic structure (header, footer, navigation, grid) is already in place.

Bootstrap components are registered as TYPO3 content elements

ws_t3bootstrap installs as a TYPO3 site package and configures the following: a TypoScript setup with Bootstrap CSS/JS includes, Fluid templates for header, footer and page layouts, backend layouts (one column, two columns, three columns with sidebar) and content elements that map Bootstrap components.

The content elements are defined through TCA configuration and Fluid templates. An accordion element, for example, creates a Bootstrap accordion with n panels, each with a title and body text. A card element produces a Bootstrap card with image, title, text and link. A grid element enables nested column layouts within a page.

The Bootstrap CSS is included either as a compiled CSS file (fast, no build tools required) or as Sass source code compiled by a build system (webpack, Vite). The Sass variant makes it possible to override Bootstrap variables (colors, breakpoints, font sizes) and to include only the Bootstrap modules that are actually needed, which reduces the CSS file size from 230 KB to 80 to 120 KB.

The JavaScript components (Accordion, Collapse, Dropdown, Modal, Tab, Toast) come from Bootstrap 5, which works without jQuery. Compared with Bootstrap 4, dropping jQuery reduces the JavaScript payload by around 85 KB.

Common problems are Bootstrap version conflicts and CSS specificity battles

The biggest problem with Bootstrap site packages is version conflicts. If ws_t3bootstrap includes Bootstrap 5.2 but another extension (a slider plugin, for example) ships Bootstrap 4.6 or 3.x, the CSS classes collide. Bootstrap 4 uses “col-md-4”, and so does Bootstrap 5, but certain utilities behave differently. The fix: standardize all extensions on the same Bootstrap version, or isolate an extension’s own Bootstrap through CSS scoping.

Second problem: CSS specificity. When custom CSS has to override Bootstrap classes, a specificity race begins: !important declarations pile up because Bootstrap utilities have high specificity. The fix: use Bootstrap variables instead of CSS overrides, and load the custom stylesheet after the Bootstrap CSS.

Third issue: performance. As a framework, Bootstrap loads every component, even if the website uses only five of them. On a website that needs only the grid, cards and the navbar, 80 percent of the Bootstrap CSS is never used. PurgeCSS or a selective Sass import trims the CSS down to what is actually needed.

TYPO3 v12 and v13 are supported, and Bootstrap 5 is the current standard

ws_t3bootstrap is actively maintained and supports TYPO3 v12 and v13. The current version is based on Bootstrap 5.3. Upgrading from Bootstrap 4 to 5 involves breaking changes: the jQuery dependency is gone, some CSS classes were renamed (for example ml-/mr- to ms-/me-), and the JavaScript API has changed. Gosign carries out Bootstrap upgrades together with TYPO3 upgrades and checks every content element for correct rendering. For new projects, we recommend ws_t3bootstrap as the starting point and extend the site package with project-specific components, rather than integrating Bootstrap into TYPO3 from scratch.