{"id":20961921,"url":"https://github.com/heimrichhannot/contao-bootstrapper","last_synced_at":"2026-03-05T07:32:19.530Z","repository":{"id":22876761,"uuid":"26224729","full_name":"heimrichhannot/contao-bootstrapper","owner":"heimrichhannot","description":"Adjust contao elements \u0026 markups, to take advantage of twitter bootstrap. ","archived":false,"fork":false,"pushed_at":"2021-01-12T09:42:17.000Z","size":9842,"stargazers_count":2,"open_issues_count":2,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-10-07T09:41:43.677Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/heimrichhannot.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-05T15:06:32.000Z","updated_at":"2021-01-11T12:57:04.000Z","dependencies_parsed_at":"2022-08-21T09:10:52.295Z","dependency_job_id":null,"html_url":"https://github.com/heimrichhannot/contao-bootstrapper","commit_stats":null,"previous_names":[],"tags_count":276,"template":false,"template_full_name":null,"purl":"pkg:github/heimrichhannot/contao-bootstrapper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heimrichhannot%2Fcontao-bootstrapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heimrichhannot%2Fcontao-bootstrapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heimrichhannot%2Fcontao-bootstrapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heimrichhannot%2Fcontao-bootstrapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heimrichhannot","download_url":"https://codeload.github.com/heimrichhannot/contao-bootstrapper/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heimrichhannot%2Fcontao-bootstrapper/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30114222,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T03:40:26.266Z","status":"ssl_error","status_checked_at":"2026-03-05T03:39:15.902Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T02:18:37.692Z","updated_at":"2026-03-05T07:32:19.505Z","avatar_url":"https://github.com/heimrichhannot.png","language":"PHP","readme":"# Bootstrapper\n\nContao external CSS \u0026 JS assets groups with bootstrap and font-awesome support.\n\n## Features\n\n- Adds the bootstrap-slider as inputType to the FE\n\n### Form/EFG\n\n- Supports Ajax Form Handling. Support Messages can be easily configured inside the form, within a custom group like fieldsets.\n\n### Module\n\n#### ModuleNewsReader \n- Display news details as contao of bootstrap modal window, if selected news_full_modal.html5 template\n\n## Bootstrapper components\n\n### Default components\nDisable in Page-layout, if you dont want to use these components.\n\n- [bootstrap-select] (https://github.com/silviomoreto/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*\n- [bootstrap-flatpickr] (https://github.com/chmln/flatpickr) : styled datepicker with time and datepicker inclduing native support on mobile devices\n- [bootstrap-slider] (https://github.com/seiyria/bootstrap-slider) : input slider with ranged slider support\n- [bootstrap-tooltips] (http://getbootstrap.com/javascript/#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*\n- scroll-smooth : Scroll smooth to anchor targets \n\n\n#### bootstrap-scroll-smooth\nIf 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\nYou can provide both integers or multiple element selectors, do calculate the offset height, that should be subtracted from the target offset. \nSelectors have the advantage, that in case you have a responsive website, the offset updates from its element height.\nYou 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.\n\nExample - Integer:\n```\n\u003cbody data-scroll-smooth-offset=\"150\" data-scroll-smooth-duration=\"slow\" data-scroll-smooth-easing=\"swing\" id=\"top\"\u003e\n \u003cdiv id=\"header\"\u003e\u003c/header\u003e\n\u003c/body\u003e\n```\nExample - Selectors:\n```\n\u003cbody data-scroll-smooth-offset=\"#header,#highlight\" data-scroll-smooth-duration=\"slow\" data-scroll-smooth-easing=\"swing\" id=\"top\"\u003e\n \u003cdiv id=\"header\"\u003e\u003c/header\u003e\n \u003cdiv id=\"highlight\"\u003e\u003c/header\u003e\n\u003c/body\u003e\n```\n\n\n\n## Bootstrapper form field eval extension\n \nOption | Type | Default | InputTypes | Description\n------ | ---- | ------- | ----------- | -----------\nhideLabel | boolean | false | all | Hide label for this input\nexplanation | string | null | all | Adds an explanation to the input\nshowGroupLabel | boolean | false | checkbox/radio |\ngroupLabel | string | null | checkbox/radio |\nchangeFile | string | Change | upload | Label that will be displayed when a file has been selected.\nremoveFile | string | Remove | upload | Label that will be displayed to remove file when a file has been selected.\nfileIconClass | string | fa fa-file | upload | Icon css class that will be shown before the uploaded file name.\nsingleSelect | boolean | false | checkbox | Make a checkbox behave like radio buttons, with the option to disable a selection again. \nshowDescription | boolean | false | all | Show the description label below the input as help-block (text replaced with error message in case).\ninline | boolean | true | checkbox, radio | Show checkbox and radio inputs inline.\ntoolbar | string | undo redo \u0026#124; bold italic \u0026#124; bullist numlist outdent indent \u0026#124; link unlink | textarea | Add a custom tinyMCE toolbar.\ncontent_css | string | false | textarea | Add a valid location to an css file, that should be loaded as tinyMCE content.css.\ndisableOptGroups | array | array() | select | Enter the name of the optgroups that should be disabled.\nsize | integer | | select | The value of the size attribute\nslider | array | | slider | Contains information for the bootstrap input slider\ninvisible | boolean | false | all | Determines whether a field should be invisible (css display: none); the field still is in the markup!\ninputGroupPrepend | string | null | Add custom `input-group-prepend` content \ninputGroupAppend | string | null | Add custom `input-group-append` content \n\n### Flatpickr (datepicker) data attributes\n\nAttribute | Contao dca eval | Type | Default | InputTypes | Description\n------ | ---- | ---- | ------- | ----------- | -----------\ndata-linked-start | linkedStart | string | | text | The selector of the start date/time input field linking to the end date/time input field (e.g. #ctrl_startDate).\ndata-linked-end | linkedEnd | string | | text | The selector of the end date/time input field linking to the start date/time input field (e.g. #ctrl_endDate).\ndata-min-date | minDate | string | | text | A formatted date/time constraining the date/time picker to a certain minimum date/time.\ndata-max-date | maxDate | string | | text | A formatted date/time constraining the date/time picker to a certain maximum date/time.\ndata-minute-steps | minuteSteps | integer | text | The number of seconds in a minute\ndata-date-format | dateFormat | string | text | The php date format (see: https://chmln.github.io/flatpickr/formatting/)\ndata-moment-date-format | dateFormat | string | text | The javascript/moment version of data-date-format (Use HeimrichHannot\\Haste\\Util\\DateUtil::formatPhpDateToJsDate() for conversion\n\n#### Example 1: Flatpickr (datepicker only with linked picker)\n\n```\n\u003cdiv class=\"form-group datepicker\"\u003e\n    \u003cinput type=\"text\" id=\"f_datepicker\" name=\"f[datepicker]\" placeholder=\"von\" data-date-format=\"d.m.Y\" data-moment-date-format=\"DD.MM.YYYY\" data-linked-end=\"#f_datepicker_range\" class=\"form-control\" value=\"16.11.2017\"\u003e\n\u003c/div\u003e\n```\n\n#### Example 2: Flatpickr (datepicker with timepicker)\n\n```\n\u003cdiv class=\"form-group datepicker datimepicker\"\u003e\n    \u003cinput type=\"text\" id=\"f_datepicker\" name=\"f[datepicker]\" placeholder=\"von\" data-enable-time=\"true\" data-date-format=\"d.m.Y H:i\" data-moment-date-format=\"DD.MM.YYYY HH:mm\"  class=\"form-control\" value=\"16.11.2017 14:28\"\u003e\n\u003c/div\u003e\n```\n\n#### Example 3: Flatpickr (timepicker)\n\n```\n\u003cdiv class=\"form-group timepicker\"\u003e\n    \u003cinput type=\"text\" id=\"f_datepicker\" name=\"f[datepicker]\" placeholder=\"von\" data-enable-time=\"true\" data-no-calendar=\"true\" data-date-format=\"H:i\" data-moment-date-format=\"HH:mm\" class=\"form-control\" value=\"14:28\"\u003e\n\u003c/div\u003e\n```\n\n\n###### Bootstrapper input slider eval extension\n \n| Name | Type |\tDefault |\tDescription |\n| ---- |:----:|:-------:|:----------- |\n| id | string | '' | set the id of the slider element when it's created |\n| min |\tfloat\t| 0 |\tminimum possible value |\n| max |\tfloat |\t10 |\tmaximum possible value |\n| step | float |\t1 |\tincrement step |\n| precision | float |\tnumber of digits after the decimal of _step_ value |\tThe number of digits shown after the decimal. Defaults to the number of digits after the decimal of _step_ value. |\n| orientation |\tstring | 'horizontal' |\tset the orientation. Accepts 'vertical' or 'horizontal' |\n| value |\tfloat,array |\t5\t| initial value. Use array to have a range slider. |\n| range |\tbool |\tfalse\t| make range slider. Optional if initial value is an array. If initial value is scalar, max will be used for second value. |\n| selection |\tstring |\t'before' |\tselection placement. Accepts: 'before', 'after' or 'none'. In case of a range slider, the selection will be placed between the handles |\n| tooltip |\tstring |\t'show' |\twhether to show the tooltip on drag, hide the tooltip, or always show the tooltip. Accepts: 'show', 'hide', or 'always' |\n| tooltip_split |\tbool |\tfalse |\tif false show one tootip if true show two tooltips one for each handler |\n| tooltip_position |\tstring |\tnull |\tPosition 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. |\n| handle |\tstring |\t'round' |\thandle shape. Accepts: 'round', 'square', 'triangle' or 'custom' |\n| reversed | bool | false | whether or not the slider should be reversed |\n| enabled | bool | true | whether or not the slider is initially enabled |\n| formatter |\tfunction |\treturns the plain value |\tformatter callback. Return the value wanted to be displayed in the tooltip |\n| natural_arrow_keys | bool | false | The 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. |\n| ticks | array | [ ] | 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. |\n| ticks_positions | array | [ ] | Defines the positions of the tick values in percentages. The first value should always be 0, the last value should always be 100 percent. |\n| ticks_labels | array | [ ] | Defines the labels below the tick marks. Accepts HTML input. |\n| ticks_snap_bounds | float | 0 | Used to define the snap bounds of a tick. Snaps to the tick if value is within these bounds. |\n| scale | string | 'linear' | Set to 'logarithmic' to use a logarithmic scale. |\n| focus | bool | false | Focus the appropriate slider handle after a value change. |\n| labelledby | string,array | null | ARIA labels for the slider handle's, Use array for multiple values in a range slider. |\n| value_callback | array('Class', 'function') | | callback function to set value|\n| min_callback | array('Class', 'function') | | callback function to set min|\n| max_callback | array('Class', 'function') | | macallback function to set max|\n| step_callback | array('Class', 'function') | | callback function to set step|\n| rangeLabels | array, null | array('min' =\u003e array('mode' =\u003e 'sync', 'suffix' =\u003e '', 'prefix =\u003e '', 'max' =\u003e array('mode' =\u003e 'sync', 'suffix' =\u003e '', 'prefix =\u003e '')) | 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.\n\n## Bootstrapper form field callbacks\n\nOption | Type | Default | InputTypes | Description\n------ | ---- | ------- | ----------- | -----------\noption_callback | array of valid callbacks | array() | select/checkbox/radio | A callback to modify the data of an single option.\n\n## Bootstrapper inserttags\n\nTag | Arguments | Example\n------ | ---- | ------- \nbtn | Buttton Class :: Button text | {{btn::btn-primary visible-ios::download now}}\nbtn-dropdown | Button Class :: Button Text :: n Links separated by :: | {{btn-dropdown::btn-primary::download now::App Store::Google play}} \n\n## Form templates\t\t\n\t\t\n- 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\"\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheimrichhannot%2Fcontao-bootstrapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheimrichhannot%2Fcontao-bootstrapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheimrichhannot%2Fcontao-bootstrapper/lists"}