PHPackages                             heimrichhannot/contao-bootstrapper - 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. [Utility & Helpers](/categories/utility)
4. /
5. heimrichhannot/contao-bootstrapper

ActiveContao-module[Utility & Helpers](/categories/utility)

heimrichhannot/contao-bootstrapper
==================================

Adjusts contao elements & markups, to take advantage of twitter bootstrap.

1.5.17(7y ago)22.8k1[2 issues](https://github.com/heimrichhannot/contao-bootstrapper/issues)LGPL-3.0-or-laterPHP

Since Nov 5Pushed 5y ago5 watchersCompare

[ Source](https://github.com/heimrichhannot/contao-bootstrapper)[ Packagist](https://packagist.org/packages/heimrichhannot/contao-bootstrapper)[ Docs](https://github.com/heimrichhannot/contao-bootstrapper)[ RSS](/packages/heimrichhannot-contao-bootstrapper/feed)WikiDiscussions master Synced today

READMEChangelog (9)Dependencies (5)Versions (278)Used By (0)

Bootstrapper
============

[](#bootstrapper)

Contao external CSS & JS assets groups with bootstrap and font-awesome support.

Features
--------

[](#features)

- Adds the bootstrap-slider as inputType to the FE

### Form/EFG

[](#formefg)

- Supports Ajax Form Handling. Support Messages can be easily configured inside the form, within a custom group like fieldsets.

### Module

[](#module)

#### ModuleNewsReader

[](#modulenewsreader)

- Display news details as contao of bootstrap modal window, if selected news\_full\_modal.html5 template

Bootstrapper components
-----------------------

[](#bootstrapper-components)

### Default components

[](#default-components)

Disable in Page-layout, if you dont want to use these components.

- \[bootstrap-select\] () : styled select input with live-search, groups and mobile support - *boostrap.js is required, Extassets\\ExtJs group with added bootstrapper.js should be added to tl\_layout*
- \[bootstrap-flatpickr\] () : styled datepicker with time and datepicker inclduing native support on mobile devices
- \[bootstrap-slider\] () : input slider with ranged slider support
- \[bootstrap-tooltips\] () : auto-initialize default bootstrap tooltips `[data-toggle="tooltip"]` - *boostrap.js is required, Extassets\\ExtJs group with added bootstrapper.js should be added to tl\_layout*
- scroll-smooth : Scroll smooth to anchor targets

#### bootstrap-scroll-smooth

[](#bootstrap-scroll-smooth)

If you want to set an offset, for example for a fixed header, you can provide `data-scroll-smooth-offset` at you body element within fe\_page.html5 You can provide both integers or multiple element selectors, do calculate the offset height, that should be subtracted from the target offset. Selectors have the advantage, that in case you have a responsive website, the offset updates from its element height. You are able to set the animation duration by adding `data-scroll-smooth-duration` to the body element and `data-scroll-smooth-easing` for the easing function.

Example - Integer:

```

```

Example - Selectors:

```

```

Bootstrapper form field eval extension
--------------------------------------

[](#bootstrapper-form-field-eval-extension)

OptionTypeDefaultInputTypesDescriptionhideLabelbooleanfalseallHide label for this inputexplanationstringnullallAdds an explanation to the inputshowGroupLabelbooleanfalsecheckbox/radiogroupLabelstringnullcheckbox/radiochangeFilestringChangeuploadLabel that will be displayed when a file has been selected.removeFilestringRemoveuploadLabel that will be displayed to remove file when a file has been selected.fileIconClassstringfa fa-fileuploadIcon css class that will be shown before the uploaded file name.singleSelectbooleanfalsecheckboxMake a checkbox behave like radio buttons, with the option to disable a selection again.showDescriptionbooleanfalseallShow the description label below the input as help-block (text replaced with error message in case).inlinebooleantruecheckbox, radioShow checkbox and radio inputs inline.toolbarstringundo redo | bold italic | bullist numlist outdent indent | link unlinktextareaAdd a custom tinyMCE toolbar.content\_cssstringfalsetextareaAdd a valid location to an css file, that should be loaded as tinyMCE content.css.disableOptGroupsarrayarray()selectEnter the name of the optgroups that should be disabled.sizeintegerselectThe value of the size attributesliderarraysliderContains information for the bootstrap input sliderinvisiblebooleanfalseallDetermines whether a field should be invisible (css display: none); the field still is in the markup!inputGroupPrependstringnullAdd custom `input-group-prepend` contentinputGroupAppendstringnullAdd custom `input-group-append` content### Flatpickr (datepicker) data attributes

[](#flatpickr-datepicker-data-attributes)

AttributeContao dca evalTypeDefaultInputTypesDescriptiondata-linked-startlinkedStartstringtextThe selector of the start date/time input field linking to the end date/time input field (e.g. #ctrl\_startDate).data-linked-endlinkedEndstringtextThe selector of the end date/time input field linking to the start date/time input field (e.g. #ctrl\_endDate).data-min-dateminDatestringtextA formatted date/time constraining the date/time picker to a certain minimum date/time.data-max-datemaxDatestringtextA formatted date/time constraining the date/time picker to a certain maximum date/time.data-minute-stepsminuteStepsintegertextThe number of seconds in a minutedata-date-formatdateFormatstringtextThe php date format (see: )data-moment-date-formatdateFormatstringtextThe javascript/moment version of data-date-format (Use HeimrichHannot\\Haste\\Util\\DateUtil::formatPhpDateToJsDate() for conversion#### Example 1: Flatpickr (datepicker only with linked picker)

[](#example-1-flatpickr-datepicker-only-with-linked-picker)

```

```

#### Example 2: Flatpickr (datepicker with timepicker)

[](#example-2-flatpickr-datepicker-with-timepicker)

```

```

#### Example 3: Flatpickr (timepicker)

[](#example-3-flatpickr-timepicker)

```

```

###### Bootstrapper input slider eval extension

[](#bootstrapper-input-slider-eval-extension)

NameTypeDefaultDescriptionidstring''set the id of the slider element when it's createdminfloat0minimum possible valuemaxfloat10maximum possible valuestepfloat1increment stepprecisionfloatnumber of digits after the decimal of *step* valueThe number of digits shown after the decimal. Defaults to the number of digits after the decimal of *step* value.orientationstring'horizontal'set the orientation. Accepts 'vertical' or 'horizontal'valuefloat,array5initial value. Use array to have a range slider.rangeboolfalsemake range slider. Optional if initial value is an array. If initial value is scalar, max will be used for second value.selectionstring'before'selection placement. Accepts: 'before', 'after' or 'none'. In case of a range slider, the selection will be placed between the handlestooltipstring'show'whether to show the tooltip on drag, hide the tooltip, or always show the tooltip. Accepts: 'show', 'hide', or 'always'tooltip\_splitboolfalseif false show one tootip if true show two tooltips one for each handlertooltip\_positionstringnullPosition of tooltip, relative to slider. Accepts 'top'/'bottom' for horizontal sliders and 'left'/'right' for vertically orientated sliders. Default positions are 'top' for horizontal and 'right' for vertical slider.handlestring'round'handle shape. Accepts: 'round', 'square', 'triangle' or 'custom'reversedboolfalsewhether or not the slider should be reversedenabledbooltruewhether or not the slider is initially enabledformatterfunctionreturns the plain valueformatter callback. Return the value wanted to be displayed in the tooltipnatural\_arrow\_keysboolfalseThe natural order is used for the arrow keys. Arrow up select the upper slider value for vertical sliders, arrow right the righter slider value for a horizontal slider - no matter if the slider was reversed or not. By default the arrow keys are oriented by arrow up/right to the higher slider value, arrow down/left to the lower slider value.ticksarray\[ \]Used to define the values of ticks. Tick marks are indicators to denote special values in the range. This option overwrites min and max options.ticks\_positionsarray\[ \]Defines the positions of the tick values in percentages. The first value should always be 0, the last value should always be 100 percent.ticks\_labelsarray\[ \]Defines the labels below the tick marks. Accepts HTML input.ticks\_snap\_boundsfloat0Used to define the snap bounds of a tick. Snaps to the tick if value is within these bounds.scalestring'linear'Set to 'logarithmic' to use a logarithmic scale.focusboolfalseFocus the appropriate slider handle after a value change.labelledbystring,arraynullARIA labels for the slider handle's, Use array for multiple values in a range slider.value\_callbackarray('Class', 'function')callback function to set valuemin\_callbackarray('Class', 'function')callback function to set minmax\_callbackarray('Class', 'function')macallback function to set maxstep\_callbackarray('Class', 'function')callback function to set steprangeLabelsarray, nullarray('min' => array('mode' => 'sync', 'suffix' => '', 'prefix => '', 'max' => array('mode' => 'sync', 'suffix' => '', 'prefix => ''))Adjust min and max labels for range slider, or set to null if you want them to hide. Sync mode doest update values on slide changed.Bootstrapper form field callbacks
---------------------------------

[](#bootstrapper-form-field-callbacks)

OptionTypeDefaultInputTypesDescriptionoption\_callbackarray of valid callbacksarray()select/checkbox/radioA callback to modify the data of an single option.Bootstrapper inserttags
-----------------------

[](#bootstrapper-inserttags)

TagArgumentsExamplebtnButtton Class :: Button text{{btn::btn-primary visible-ios::download now}}btn-dropdownButton Class :: Button Text :: n Links separated by ::{{btn-dropdown::btn-primary::download now::App Store::Google play}}Form templates
--------------

[](#form-templates)

- Naming convention for custom form field templates is defined as: `bootstrapper_form_[type]_[name of your form field].html5` e.g. "bootstrapper\_form\_upload\_myfiles.html"

###  Health Score

33

—

LowBetter than 72% of packages

Maintenance0

Infrequent updates — may be unmaintained

Popularity20

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity83

Battle-tested with a long release history

 Bus Factor2

2 contributors hold 50%+ of commits

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 ~8 days

Recently: every ~153 days

Total

277

Last Release

1998d ago

Major Versions

2.1.10-alpha → 3.0.0-beta2018-02-09

1.5.7 → 3.0.3-beta2018-03-05

1.5.8 → 3.0.13-beta2018-07-12

1.5.13 → 3.2.7-beta2018-11-22

1.5.17 → 3.2.8-beta2019-05-24

### Community

Maintainers

![](https://www.gravatar.com/avatar/28ad3224d8727b622ebd229840eea6b9dbcb83eb0bd609e6ce65b614830ff538?d=identicon)[digitales@heimrich-hannot.de](/maintainers/digitales@heimrich-hannot.de)

---

Top Contributors

[![koertho](https://avatars.githubusercontent.com/u/12064642?v=4)](https://github.com/koertho "koertho (13 commits)")[![Defcon0](https://avatars.githubusercontent.com/u/1485098?v=4)](https://github.com/Defcon0 "Defcon0 (10 commits)")[![nafetagrats](https://avatars.githubusercontent.com/u/5796948?v=4)](https://github.com/nafetagrats "nafetagrats (9 commits)")[![neuemedien](https://avatars.githubusercontent.com/u/1265303?v=4)](https://github.com/neuemedien "neuemedien (5 commits)")[![matzke](https://avatars.githubusercontent.com/u/192946?v=4)](https://github.com/matzke "matzke (4 commits)")

---

Tags

twittercontaobootstrap

### Embed Badge

![Health badge](/badges/heimrichhannot-contao-bootstrapper/health.svg)

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

###  Alternatives

[cwspear/bootstrap-hover-dropdown

An unofficial Bootstrap plugin to enable Bootstrap dropdowns to activate on hover and provide a nice user experience.

1.2k156.0k](/packages/cwspear-bootstrap-hover-dropdown)[mediawiki/chameleon-skin

A highly flexible MediaWiki skin using Bootstrap 5

12585.7k2](/packages/mediawiki-chameleon-skin)[contao-bootstrap/core

Core of Contao Bootstrap extension

1791.6k23](/packages/contao-bootstrap-core)[fritzmg/contao-sharebuttons

Simple Contao extension to provide share buttons as a module and content element

2233.5k](/packages/fritzmg-contao-sharebuttons)[contao-bootstrap/bundle

Install all modules of the Contao Bootstrap extension

1547.4k2](/packages/contao-bootstrap-bundle)

PHPackages © 2026

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