kiwi/contao-bootstrap

This Contao bundle implements the possibility to assign bootstrap (css-framework) grid classes to contents and therefore flexibly align them via the CMS.

1.0.2 2025-09-18 14:50 UTC

Requires

• php: ^8.3.11
• contao/core-bundle: ~5.3.18
• kiwi/contao-responsive-base: ^1.0
• twbs/bootstrap: ~5.2.3

Requires (Dev)

• contao/manager-plugin: ^2.0

Suggests

• kiwi/contao-blueprints: Simplifies content creation with bootstrap settings for editors
• kiwi/contao-designer: Manage bootstrap design settings via klickibunti in the CMS

Conflicts

• contao/manager-plugin: <2.0 || >=3.0
• kiwi/contao-wrapper-bundle: <1.0.0

LGPL-3.0-or-later

• Katrin Zimmermann
• Patrick Josupeit
• KIWI. Werbeagentur GmbH

• bootstrap
• responsive
• grid
• contao
• CSS-Framework

README

Implement the Bootstrap CSS framework into your Contao CMS.

Table of contents

1. Scope
2. Setup
   1. Installation
   2. Implementation
   3. Widget

Scope

This bundle allows you to define bootstrap layout properties within your Contao backend.

Define container widths and flex properties for wrapping elements:

• articles (tl_article)
• element groups (tl_content)
• fieldsets (tl_form_field)
• forms (tl_form)
• sections (tl_layout)

Set colspans and flex properties for components:

• content elements (tl_content)
• form fields (tl_form_field)
• modules and their list items (tl_module)

Create responsive fields yourself by using the integrated ResponsiveWidget or OptionalResponsiveWidget.

Setup

Installation

Install the bundle via composer

composer require kiwi/contao-bootstrap

Implementation

Step 1: (Re-)store themes

Go to themes (/contao?do=themes) and create or edit a theme. Choose the bootstrap components that shall be loaded or chose none to load all – in any case you need to restore the theme.

Step 2: (Re-)store layouts

Afterwards you go to layouts (/contao?do=themes&table=tl_layout&id={{theme_id}}) and create or edit one. Define container widths for your given row sections (header, footer). If you need to setup sidebars you are able to define the container width for the wrapping element they're placed in. Next determine how many colspans the sidebars shall occupy within every single breakpoint. If nothing is set the value will be inherited from smaller (left) to bigger (right) viewport. The Main area will fill the space between these sidebars.

Step 3: Use in Contents

CSS-Classes and their styles will now be applied automatically, when you define bootstrap layout properties in your contents (forms, modules, articles & content elements)

Widget

If you need a custom property to be responsively set, you can use the ResponsiveWidget (inputtype responsive) or the OptionalResponsiveWidget (inputtype optionalResponsive). Therefore define a 'responsiveInputType' which needs to contain the widget-alias you want to multiply for all given breakpoihts. To store the values in your DB use a blob field.