PHPackages                             kiwi/contao-bootstrap - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. kiwi/contao-bootstrap

ActiveContao-bundle[Templating & Views](/categories/templating)

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.1.0(3mo ago)1524↑66.7%1[3 PRs](https://github.com/KIWI-Werbeagentur/contao-bootstrap-bundle/pulls)LGPL-3.0-or-laterPHPPHP ^8.3.11

Since Sep 16Pushed 1w agoCompare

[ Source](https://github.com/KIWI-Werbeagentur/contao-bootstrap-bundle)[ Packagist](https://packagist.org/packages/kiwi/contao-bootstrap)[ RSS](/packages/kiwi-contao-bootstrap/feed)WikiDiscussions main Synced 1w ago

READMEChangelogDependencies (12)Versions (28)Used By (0)

KIWI. Contao Bootstrap
======================

[](#kiwi-contao-bootstrap)

**Implement the Bootstrap CSS framework into your Contao CMS.**

Table of contents
-----------------

[](#table-of-contents)

1. [Scope](#scope)
2. [Setup](#setup)
    1. [Installation](#installation)
    2. [Implementation](#implementation)
        1. [Themes](#theme)
        2. [Layouts](#layout)
        3. [Wrapping elements: articles, element groups & modules of type list](#article)
        4. [Elements: content elements, form fields & modules](#element)
    3. [Vertical spacings](#spacing)
    4. [Widgets](#widget)

Scope
---------------------------------------

[](#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
---------------------------------------

[](#setup-)

### Installation

[](#installation-)

Install the bundle via composer

```
composer require kiwi/contao-bootstrap
```

### Implementation

[](#implementation-)

**Step 1: (Re-)store themes **

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

---

**Step 2: (Re-)store layouts **

Afterwards you go to layouts (*/contao?do=themes&table=tl\_layout&id={{theme\_id}}*) and create or edit one. Apply container widths to row sections (header, footer), custom sections (by choosing a correspondig template) and sidebars (main area will fill available space). If you don't want to manually load Bootstrap you can activate automatic loading in your CSS-framework selection (recommended).

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

---

**Step 3: Use in articles, content element\_groups and modules listing elements**

Articles are used as bootstrap containers.

- **Container Width**: You can choose between container-fluid (whole viewport) and limited width upwards a specifix breakpoint.
- **Elements per row**: Defines how many content elements will be shown in one row.
- **Direction** \[flex-diretion\]: Define block (vertical and horizontal) and inline alignment.
- **Alignment** \[justify-content, align-content, align-items\]: Define block (vertical and horizontal) and inline alignment.
- **Wrapping** \[flex-wrap\]: Allow or disallow row breaks.
- **Spacing** \[padding-top, padding-bottom\]: Choose how much distance an article should have to its previous and next sibling [(Take a look at the spacing section for further information)](#spacing). [![](docs/images/bootstrap--articles.jpg)](docs/images/bootstrap--articles.jpg)

To define further **content elements** as wrapper, you can add an entry to `$GLOBALS['responsive']['tl_content']['includePalettes']['container']` within your config file.

To define further **modules** as wrapper, you can add an entry to `$GLOBALS['responsive']['tl_module']['includePalettes']['container']` within your config file.

---

**Step 4: Use in content elements, form fields and modules**

- **Overwrite Width**: Check to overwrite "Elements per row" setting of parent element.
- **Width**: Set elements width.
- **Offset**: Define the positioning of the element.
- **Order**: Change the order of an element.
- **Alignment**: Overwrite "Alignment" setting of parent element. [![](docs/images/bootstrap--elements.jpg)](docs/images/bootstrap--elements.jpg)

To remove the settings from a specific **content element**, add an entry to `$GLOBALS['responsive']['tl_content']['excludePalettes']['column']` within your config file.

To remove the settings from a specific **module**, add an entry to `$GLOBALS['responsive']['tl_module']['excludePalettes']['column']` within your config file.

To remove the settings from a specific **form field**, add an entry to `$GLOBALS['responsive']['tl_form_field']['excludePalettes']['column']` within your config file.

### Vertical spacings

[](#vertical-spacings-)

For simple customization, you can overwrite the following variables in you (s)css file

```
:root {
  --spacing-default: your_size;
  --spacing-none: your_size; /* "0" recommended */
  --spacing-gap: your_size; /* grid gutter width recommended */
  --spacing-gap-half: your_size; /* half of grid gutter width recommended */
  --spacing-xxs: your_size;
  --spacing-xs: your_size;
  --spacing-sm: your_size;
  --spacing-md: your_size;
  --spacing-lg: your_size;
  --spacing-xl: your_size;
  --spacing-xxl: your_size;
}
```

To add custom spacing options, add the css variables in your own (s)css file. Additionally, you need to extend the `BootstrapConfiguration` class and modify the `$arrSpacings` property accordingly, and provide labels for the new options.

```
:root {
    --spacing-foo: your_size;
    --spacing-bar: your_size;
}
```

```
// /src/CustomBootstrapConfiguration.php
namespace App;

use Kiwi\Contao\BootstrapBundle\Configuration\BootstrapConfiguration;

class CustomBootstrapConfiguration extends BootstrapConfiguration
{
    public function __construct($objDca = null)
    {
        parent::__construct($objDca);

        $this->arrSpacings['foo'] = 'p{{direction}}{{modifier}}-foo';
        $this->arrSpacings['bar'] = 'p{{direction}}{{modifier}}-bar';
    }
}
```

```
// /contao/languages/en/responsive.php
$GLOBALS['TL_LANG']['responsive']['spacings']['foo'][0] = "Foo-sized [foo]";
$GLOBALS['TL_LANG']['responsive']['spacings']['bar'][0] = "Bar-sized [bar]";
```

### Widgets

[](#widgets-)

There a different types of responsive widgets allowing you to adjust a setting for different viewports (Values will be inherited from smaller to bigger device). When using them, define the input type that shall be replicated as 'responsiveInputType'.

**Fully Responsive Widget** \[responsive\]

Directly shows a setting for every viewport [![](docs/images/bootstrap--widget--fully-responsive.jpg)](docs/images/bootstrap--widget--fully-responsive.jpg)

Example usage:

```
$GLOBALS['TL_DCA'][{your table}]['fields'][{your first field}}] = [
    'inputType' => 'responsive',
    'responsiveInputType' => 'select',
    'options_callback' => [{your first options}, {your second option}}],
    'sql' => "blob NULL"
];
```

---

**Optionally Responsive Widget** \[optionalResponsive\]

Only shows a global setting but can be set responsively by activating the checkbox. [![](docs/images/bootstrap--widget--opt-responsive.jpg)](docs/images/bootstrap--widget--opt-responsive.jpg)

Example usage:

```
$GLOBALS['TL_DCA'][{your table}]['fields'][{your second field}}] = [
    'inputType' => 'optionalResponsive',
    'responsiveInputType' => 'text',
    'sql' => "blob NULL"
];
```

###  Health Score

48

—

FairBetter than 94% of packages

Maintenance90

Actively maintained with recent releases

Popularity19

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity62

Established project with proven stability

 Bus Factor1

Top contributor holds 81.3% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~16 days

Total

18

Last Release

63d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/61ed50f7dc016b767a60d147cadea2b0c2fe2c215a0d88598508980e0aa4a88a?d=identicon)[dev@kiwi.de](/maintainers/dev@kiwi.de)

---

Top Contributors

[![rakaete](https://avatars.githubusercontent.com/u/57911907?v=4)](https://github.com/rakaete "rakaete (87 commits)")[![patrickjDE](https://avatars.githubusercontent.com/u/6651001?v=4)](https://github.com/patrickjDE "patrickjDE (18 commits)")[![luiswagener](https://avatars.githubusercontent.com/u/114886444?v=4)](https://github.com/luiswagener "luiswagener (2 commits)")

---

Tags

gridcontaobootstrapresponsivecss framework

### Embed Badge

![Health badge](/badges/kiwi-contao-bootstrap/health.svg)

```
[![Health](https://phpackages.com/badges/kiwi-contao-bootstrap/health.svg)](https://phpackages.com/packages/kiwi-contao-bootstrap)
```

###  Alternatives

[bk2k/bootstrap-package

Bootstrap Package delivers a full configured frontend theme for TYPO3, based on the Bootstrap CSS Framework.

354983.4k109](/packages/bk2k-bootstrap-package)[contao-community-alliance/dc-general

Universal data container for Contao

1581.4k93](/packages/contao-community-alliance-dc-general)[contao-themes-net/mate-theme-bundle

mate theme bundle for Contao 5

1219.8k1](/packages/contao-themes-net-mate-theme-bundle)[contao-bootstrap/core

Core of Contao Bootstrap extension

1592.2k24](/packages/contao-bootstrap-core)[markocupic/calendar-event-booking-bundle

Contao Calendar Event Booking Bundle

125.3k1](/packages/markocupic-calendar-event-booking-bundle)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)