{"id":16064444,"url":"https://github.com/lbr-media/typo3-extension-bootstrap","last_synced_at":"2026-01-20T19:32:37.487Z","repository":{"id":42508572,"uuid":"461773133","full_name":"lbr-media/typo3-extension-bootstrap","owner":"lbr-media","description":"Typo3 template extension with twitter bootstrap5.","archived":false,"fork":false,"pushed_at":"2023-03-07T13:15:48.000Z","size":1587,"stargazers_count":1,"open_issues_count":7,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T16:41:05.592Z","etag":null,"topics":["bootstrap","bootstrap5","bootstrap5-template","php","typo3","typo3-extension"],"latest_commit_sha":null,"homepage":"https://lbr-media.github.io/typo3-extension-bootstrap/","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lbr-media.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-21T08:40:26.000Z","updated_at":"2022-03-29T18:49:15.000Z","dependencies_parsed_at":"2024-10-27T17:39:09.174Z","dependency_job_id":null,"html_url":"https://github.com/lbr-media/typo3-extension-bootstrap","commit_stats":{"total_commits":232,"total_committers":2,"mean_commits":116.0,"dds":0.03879310344827591,"last_synced_commit":"424255800a4155288f73e5381a06b186b7438b35"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/lbr-media/typo3-extension-bootstrap","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbr-media%2Ftypo3-extension-bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbr-media%2Ftypo3-extension-bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbr-media%2Ftypo3-extension-bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbr-media%2Ftypo3-extension-bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lbr-media","download_url":"https://codeload.github.com/lbr-media/typo3-extension-bootstrap/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbr-media%2Ftypo3-extension-bootstrap/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28610617,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T18:56:40.769Z","status":"ssl_error","status_checked_at":"2026-01-20T18:54:26.653Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5: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":["bootstrap","bootstrap5","bootstrap5-template","php","typo3","typo3-extension"],"created_at":"2024-10-09T05:07:54.002Z","updated_at":"2026-01-20T19:32:37.467Z","avatar_url":"https://github.com/lbr-media.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# typo3 extension: bootstrap\n\nTypo3 template extension with Twitter Bootstrap 5 package.\n\nProvides page templates and many content elements modified or build for Bootstrap 5.  \nThe basis of the content elements is fluid_styled_content (many are copied from this extension).\n\n## Table of contents\n\n- [typo3 extension: bootstrap](#typo3-extension-bootstrap)\n  - [Table of contents](#table-of-contents)\n  - [Install](#install)\n    - [1. Install typo3 as usual with composer.](#1-install-typo3-as-usual-with-composer)\n    - [2. Install this package.](#2-install-this-package)\n    - [3. Run the command to copy some assets to fileadmin.](#3-run-the-command-to-copy-some-assets-to-fileadmin)\n    - [4. Clear the cache](#4-clear-the-cache)\n    - [5. Go to the backend, create a new template and include static files from extension](#5-go-to-the-backend-create-a-new-template-and-include-static-files-from-extension)\n  - [Content elements](#content-elements)\n    - [All content elements](#all-content-elements)\n      - [Fields](#fields)\n    - [All headers](#all-headers)\n      - [Fields](#fields-1)\n      - [TypoScript constants](#typoscript-constants)\n    - [Accordion](#accordion)\n      - [Settings for all items:](#settings-for-all-items)\n      - [Settings each item:](#settings-each-item)\n    - [Carousel](#carousel)\n      - [Settings:](#settings)\n      - [Image properties:](#image-properties)\n    - [Cards](#cards)\n      - [Settings](#settings-1)\n      - [Card-item properties](#card-item-properties)\n    - [Media grid](#media-grid)\n      - [Settings](#settings-2)\n    - [Tabulator](#tabulator)\n      - [Settings for all items](#settings-for-all-items-1)\n      - [Settings each item](#settings-each-item-1)\n    - [Text + Image](#text--image)\n      - [Settings](#settings-3)\n    - [Text \u0026 Media (float)](#text--media-float)\n      - [Settings](#settings-4)\n    - [Text \u0026 Media (grid)](#text--media-grid)\n      - [Settings](#settings-5)\n    - [Two columns text](#two-columns-text)\n      - [TypoScript constants](#typoscript-constants-1)\n    - [Alert](#alert)\n      - [Settings](#settings-6)\n    - [Markdown](#markdown)\n    - [Bullets](#bullets)\n      - [Settings (like Typo3)](#settings-like-typo3)\n    - [Div](#div)\n      - [TypoScript Constants](#typoscript-constants-2)\n    - [Header](#header)\n    - [Table](#table)\n    - [Uploads](#uploads)\n      - [TypoScript Constants](#typoscript-constants-3)\n    - [Copied `fluid_styled_content` content elements](#copied-fluid_styled_content-content-elements)\n  - [Navigation](#navigation)\n    - [TypoScript Constants](#typoscript-constants-4)\n      - [PID](#pid)\n      - [Regular nav](#regular-nav)\n      - [Dropdown main](#dropdown-main)\n      - [Dropdown link regular](#dropdown-link-regular)\n      - [Dropdown toggle link/button](#dropdown-toggle-linkbutton)\n      - [Dropdown link in dropdown](#dropdown-link-in-dropdown)\n  - [Credits](#credits)\n\n## Install\n\nThere is a basic package at https://github.com/lbr-media/typo3-bootstrap-base which also loads a distribution extension. Maybe use it to get an example page with content or follow these steps to get a fresh and empty installation:\n\n### 1. Install typo3 as usual with composer.\n\nUse `composer create-project \"typo3/cms-base-distribution:^11.5\" my-new-project` or check the composer helper at https://get.typo3.org/misc/composer/helper.\n\nAfter the backend is running you maybe have to setup the sites configuration.\n\n### 2. Install this package.\n\n`composer require lbr-media/typo3-extension-bootstrap`\n\n### 3. Run the command to copy some assets to fileadmin.\n\n`php vendor/bin/typo3 bootstrap:updatefileadmin`\n\n### 4. Clear the cache \n\nClear the cache in Install-Tool or with `php vendor/bin/typo3 cache:flush`.\n\n### 5. Go to the backend, create a new template and include static files from extension\n\nInclude the following static templates:\n* General (bootstrap)\n* Content elements (bootstrap)\n* Additional Styles (bootstrap)\n\nRemove the default TypoScript config in setup field.\n\nNow you should be able to call the frontend of the page.\n\n## Content elements\n\n### All content elements\n\nAll content elements have extra or modified fields.\n\n#### Fields\n\n* _`Frame class`_ (select)  \nHere you'll find the Bootstrap container* classes like `container-xl` or `container-float`.\n* _`Inner frame class`_ (select)  \nLike the frame class but will create an inner div around the content when a value is selected.  \nExample:\n``` TypoScript\nTCEFORM.tt_content.tx_bootstrap_inner_frame_class.addItems {\n    my-inner-frame-class = My Label\n}\n```\n* _`Additional styles`_ (select multiple)  \nMany styles are selectable for one content element.  \nUse this to configure modifications like indents, etc.  \nIn TypoScript several styles can be configured.  \nYou'll find them with the key `plugin.tx_bootstrap.settings.form.element.AdditionalStyles`.  \nEach variant has these properties:\n    * `label` (string; required)\n    * `value` (int; required; used for reference)\n    * `outerWrap` (string)\n    * `innerWrap` (string)\n    * `additionalClass` (string)\n    * `additionalAttributes` (array; key value pairs)\n    * `additionalOuterClass` (string)\n    * `additionalOuterAttributes` (array; key value pairs)\n\nExample:\n\n``` TypoScript\nplugin.tx_bootstrap.settings.form.element.AdditionalStyles {\n    10 {\n        label = Indent left\n        value = 10\n        innerWrap = \u003cdiv class=\"indent-left-inner\"\u003e|\u003c/div\u003e\n        additionalClass = indent-left\n        additionalAttributes {\n            data-render = indent-left\n        }\n    }\n}\n```\n\n* _`Color`_ (select; one of the text-{color} classes)\n* _`Background color`_ (select; one of the bg-{color} classes)\n* _`Space before`_ (select; one of the space_before_class')\n* _`Space after`_ (select; one of the space_after_class')\n\nThe defaults of `space_before_class` and `space_after_class` will be replaced with Bootstrap space classes. So you don't need extra classes for the space between content elements.\n\nAdjust to your needs:\n\n``` TypoScript\nplugin.tx_bootstrap.settings.form.element {\n    SpaceBeforeClassReplacements {\n        extra-small = mt-3\n        small = mt-4\n        medium = mt-5\n        large = mt-6\n        extra-large = mt-7\n    }\n\n    SpaceAfterClassReplacements {\n        extra-small = mb-3\n        small = mb-4\n        medium = mb-5\n        large = mb-6\n        extra-large = mb-7\n    }\n}\n```\n\n---\n\n### All headers\n\nAll headers of all content elements have extra or modified fields.\n\n#### Fields\n\n* _`Header`_ (multiline string)\n* _`Header layout`_ aka _`Type`_ (select)  \nThe tag that will be generated (`h1` to `h5`).\n* _`Layout`_ (select)  \nThe basic css-class that will be used for the tag.\nThe default Bootstrap classes from `display-1` to `display-6`, `h1` to `h6` and `lead`.\n* _`Variant`_ or _`Predefined header`_ (select)  \nOnly one variant is selectable for one headline. Use this to produce some variants of headers.  \nIn TypoScript several variants can be configured.  \nYou'll find them with the key `plugin.tx_bootstrap.settings.form.element.PredefinedHeader`.  \nEach variant has these properties:\n    * `label` (string; required)\n    * `value` (int; required; used for reference)\n    * `outerWrap` (string)\n    * `innerWrap` (string)\n    * `additionalClass` (string)\n\nExample:\n\n``` TypoScript\nplugin.tx_bootstrap.settings.form.element.PredefinedHeader {\n    10 {\n        label = My fancy headline\n        value = 10\n        outerWrap = \u003cdiv class=\"h-fancy border bg-dark text-light rounded\"\u003e|\u003c/div\u003e\n        innerWrap = \u003cspan class=\"h-fancy-inner\"\u003e|\u003c/span\u003e\n        additionalClass = mb-0\n    }\n}\n```\n\n* _`Color`_ (select; one of the text-{color} classes)\n* _`Position`_ (select; either `start`, `center` or `end`)\n* _`Date`_ (Date)\n* _`Additional styles`_ (select multiple)  \nMany styles are selectable for one headline. Use this to configure modifications like uppercase, no space below, etc.\nIn TypoScript several styles can be configured.  \nYou'll find them with the key `plugin.tx_bootstrap.settings.form.element.AdditionalHeaderStyles`.  \nEach variant has these properties:\n    * `label` (string; required)\n    * `value` (int; required; used for reference)\n    * `outerWrap` (string)\n    * `innerWrap` (string)\n    * `additionalClass` (string)\n\nExample:\n\n``` TypoScript\nplugin.tx_bootstrap.settings.form.element.AdditionalHeaderStyles {\n    10 {\n        label = VERSAL\n        value = 10\n        additionalClass = text-uppercase\n    }\n    20 {\n        label = italic\n        value = 20\n        innerWrap = \u003cem\u003e|\u003c/em\u003e\n    }\n    30 {\n        label = -line-through-\n        value = 30\n        innerWrap = \u003cdel\u003e|\u003c/del\u003e\n    }\n}\n```\n\n* _`Link`_ (TypoLink)\n* _`Subheader`_ (string)\n* _`File icon`_  \n    * `Icon` (File reference)\n    * `Size` (select; the bootstrap font sizes or just inherit)\n    * `Alignment` (select; each device from xs to xxl; `top`, `top-left`, `top-center`, `top-right`, `left`, `left-top`, `left-middle`, `left-bottom`, etc.)\n* _`Icon-Set`_  \n    * `Set` (select; required; at this time only bootstrap icons)\n    * `Name` (string; readonly with visible selected icon)\n    * `Alignment` (select; each device from xs to xxl; `top`, `top-left`, `top-center`, `top-right`, `left`, `left-top`, `left-middle`, `left-bottom`, etc.)\n    * `Size` (select; the bootstrap font sizes or just inherit)\n    * `Color` (select; one of the text-{color} classes)\n\n#### TypoScript constants\n\n| Key | Default | Desription |\n| --- | ------- | ---------- |\n| `header_pattern` | `###TAG_START######HEADER######TAG_END###` | Header pattern |\n| `header_subheader_pattern` | `###TAG_START######HEADER###\u003csmall class=\"d-block\"\u003e###SUBHEADER###\u003c/small\u003e###TAG_END###` | Header subheader pattern |\n| `header_date_pattern` | `\u003cspan class=\"d-block\" datetime=\"###DATE_DATETIME###\"\u003e###DATE###\u003c/span\u003e###TAG_START######HEADER######TAG_END###` | Header date pattern |\n| `header_subheader_date_pattern` | `\u003cspan class=\"d-block\" datetime=\"###DATE_DATETIME###\"\u003e###DATE###\u003c/span\u003e###TAG_START######HEADER###\u003csmall class=\"d-block\"\u003e###SUBHEADER###\u003c/small\u003e###TAG_END###` | Header subheader date pattern |\n| `header_date_datetype` | `FULL` | Header date format\u003cbr /\u003eSee: https://www.php.net/manual/de/class.intldateformatter.php |\n| `header_date_timetype` | `NONE` | Header time format |\n| `header_icon_wrap` | `outside` | Header icon wrap.\u003cbr /\u003eShould the icons be 'outside' the h-tag or 'inside'? |\n\n---\n\n### Accordion\n\nBootstrap styled Accordion component.  \nCType: `bootstrap_accordion`\n\nOne accordion content element has one or many accordion items.  \nEach accordion item may have one or many `Text \u0026 media (grid)` content elements.\n\n#### Settings for all items:\n\n* _`Keep items open on opening other items`_ (boolean)\n\n#### Settings each item:\n\n* _`Opened on load`_ (boolean)\n\n---\n\n### Carousel\n\nBootstrap styled Carousel component with images.  \nCType: `bootstrap_carousel`\n\n#### Settings:\n\n* _`Animation`_ (select; either `slide` or `fade`)\n* _`Autoplay`_ (boolean)\n* _`Color scheme`_ (select; either `light`, `dark`)\n* _`Show controls`_ (boolean)\n* _`Show indicators`_ (boolean)\n* _`Interval`_ (int; required; milliseconds)\n\n#### Image properties:\n\n* _`Header`_ (string)\n* _`Title`_ (string)\n* _`Alternative`_ (string)\n* _`Description`_ (multiline string)\n* _`Link`_ (TypoLink)\n* _`Link text`_ (string)\n* _`Crop`_ (each device from xs to xxl)\n\n---\n\n### Cards\n\nBootstrap styled Cards component in a grid system.  \nCType: `bootstrap_cards`\n\n#### Settings\n\n* _`Presets`_ (select multiple)  \nIn TypoScript `tt_content.bootstrap_cards.flexform_presets` one or more settings could be grouped and labeled for selection.\n* Grid:\n    * _`Cols`_ (select; each device from xs to xxl; col* classes)\n    * _`Gutter space x`_ (select; each device from xs to xxl; g-* classes)\n    * _`Gutter space y`_ (select; each device from xs to xxl; g-* classes)\n    * _`Align x`_ (select; each device from xs to xxl; alignment classes)\n    * _`Align y`_ (select; each device from xs to xxl; alignment classes)\n* Cards:\n    * _`Image position`_ (select; one of `above`, `below`, `start`, `end`)\n    * _`Background color`_ (select; one of the bg-{color} classes)\n    * _`Text color`_ (select; one of the text-{color} classes)\n    * Border-Options:\n        * _`Border edge`_ (select; one of the border-{side} classes)\n        * _`Border width`_ (select; one of the border-{size} classes)\n        * _`Border color`_ (select; one of the border-{color} classes)\n        * _`Rounded`_ (select; one of the rounded classes)\n        * _`Shadow`_ (select; one of the shadow classes)\n    * _`Button color/style`_ (select; one of the btn-{color} and btn-outline-{color} classes)\n* _`Image optimizing`_ (produced percentual window width from xs to xxl)\n\n#### Card-item properties\n\n* _`Header`_ (string)\n* _`Title`_ (string)\n* _`Image`_ (File reference)\n* _`Text`_ (multiline string, RTE)\n* _`Link`_ (TypoLink)\n* _`Link text`_ (string)\n* _`Footer`_ (string)\n\n---\n\n### Media grid\n\nImages and videos in an adjustable grid system. Masonry is also provided.  \nCType: `bootstrap_mediagrid`\n\n#### Settings\n\n* _`Presets`_ (select multiple)  \nIn TypoScript `tt_content.bootstrap_mediagrid.flexform_presets` one or more settings could be grouped and labeled for selection.\n* Use _`masonry grid`_ (boolean)\n* Grid:\n    * _`Cols`_ (select; each device from xs to xxl; col* classes)\n    * _`Gutter space x`_ (select; each device from xs to xxl; g-* classes)\n    * _`Gutter space y`_ (select; each device from xs to xxl; g-* classes)\n    * _`Align x`_ (select; each device from xs to xxl; alignment classes)\n    * _`Align y`_ (select; each device from xs to xxl; alignment classes)\n* Border for each media item:\n    * _`Border edge`_ (select; one of the border-{side} classes)\n    * _`Border width`_ (select; one of the border-{size} classes)\n    * _`Border color`_ (select; one of the border-{color} classes)\n    * _`Rounded`_ (select; one of the rounded classes)\n    * _`Shadow`_ (select; one of the shadow classes)\n* _`Image optimizing`_ (produced percentual window width from xs to xxl)\n\n---\n\n### Tabulator\n\nBootstrap styled Tabulator component.  \nCType: `bootstrap_tabs`\n\nOne tabulator content element has one or many tabulator items.  \nEach tabulator item may have one or many `Text \u0026 media (grid)` content elements.  \n\n#### Settings for all items\n\n* _`Layout`_ (select; either `default`, `pills horizontal` or `pills vertical`)\n* _`Navigation alignment`_ (select; only on horizontal; one of `start`, `center`, `end`, `nav fill`, `nav justified`)\n\n#### Settings each item\n\n* _`active`_ (boolean)  \nOnly one can be active. The first found with active state is used. If no one is active, the first item is marked as active.\n\n---\n\n### Text + Image\n\nA content element to create fast a grid with one image and text. Positions, space and alignment is adjustable.  \nCType: `bootstrap_textimage`\n\n#### Settings\n\n* _`Presets`_ (select multiple)  \nIn TypoScript `tt_content.bootstrap_textimage.flexform_presets` one or more settings could be grouped and labeled for selection.\n* _`Order`_ (select; either `first image` or `first text`)\n* _`Image alignment`_ (select; either `top` or `bottom`)\n* _`Text alignment`_ (select; either `top` or `bottom`)\n* _`Header position`_ (select; either `above all`, `above text` or `above image`)\n* _`Space between`_ text and image (select; each device from xs to xxl; g-* classes)\n* Border for the image:\n    * _`Border edge`_ (select; one of the border-{side} classes)\n    * _`Border width`_ (select; one of the border-{size} classes)\n    * _`Border color`_ (select; one of the border-{color} classes)\n    * _`Rounded`_ (select; one of the rounded classes)\n    * _`Shadow`_ (select; one of the shadow classes)\n\n---\n\n### Text \u0026 Media (float)\n\nA text which floats a media grid. Full adjustable grid and floating settings. Some presets are available to the editor.  \nCType: `bootstrap_textmediafloat`\n\n#### Settings\n\n* _`Presets`_ (select multiple)  \nIn TypoScript `tt_content.bootstrap_textmediafloat.flexform_presets` one or more settings could be grouped and labeled for selection.\n* _`Header position`_ (`above all` or `above text`)\n* Media area:\n    * _`Position`_ (select; each device from xs to xxl; either `centered above text`, `left` or `right`)\n    * _`Width`_ (select; each device from xs to xxl; additional float classes)\n    * _`Space x`_ (select; each device from xs to xxl; space classes)\n    * _`Space y`_ (select; each device from xs to xxl; space classes)\n* Use _`masonry grid`_\n* Grid for the media items:\n    * _`Cols`_ (select; each device from xs to xxl; col* classes)\n    * _`Gutter space x`_ (select; each device from xs to xxl; g-* classes)\n    * _`Gutter space y`_ (select; each device from xs to xxl; g-* classes)\n    * _`Align x`_ (select; each device from xs to xxl; alignment classes)\n    * _`Align y`_ (select; each device from xs to xxl; alignment classes)\n* Border for each media item:\n    * _`Border edge`_ (select; one of the border-{side} classes)\n    * _`Border width`_ (select; one of the border-{size} classes)\n    * _`Border color`_ (select; one of the border-{color} classes)\n    * _`Rounded`_ (select; one of the rounded classes)\n    * _`Shadow`_ (select; one of the shadow classes)\n* _`Image optimizing`_ (produced percentual window width from xs to xxl)\n\n---\n\n### Text \u0026 Media (grid)\n\nA text column and a media grid column. The most flexible content element.  \nCType: `bootstrap_textmediagrid`\n\n#### Settings\n\n* _`Presets`_ (select multiple)  \nIn TypoScript `tt_content.bootstrap_textmediagrid.flexform_presets` one or more settings could be grouped and labeled for selection.\n* _`Default order`_ of text- and media-area (select; either `first image` or `first text`)\n* _`Order per each device`_ (select; each device from xs to xxl; either `first image` or `first text`)\n* _`Header position`_ (select; either `above all`, `above text` or `above media area`)\n* Grid for the text- and media-columns:\n    * _`Cols text-column`_ (select; each device from xs to xxl; col* classes)\n    * _`Cols media-column`_ (select; each device from xs to xxl; col* classes)\n    * _`Gutter space x`_ (select; each device from xs to xxl; g-* classes)\n    * _`Gutter space y`_ (select; each device from xs to xxl; g-* classes)\n    * _`Align x`_ (select; each device from xs to xxl; alignment classes)\n    * _`Align y`_ (select; each device from xs to xxl; alignment classes)\n* Text-column:\n    * _`Align self`_ (select; each device from xs to xxl; alignment classes)\n    * _`Inner space`_ (select; each device from xs to xxl; space classes)\n* Media-column:\n    * Use _`masonry grid`_\n    * _`Align self`_ (select; each device from xs to xxl; alignment classes)\n    * _`Inner space`_ (select; each device from xs to xxl; space classes)\n* Grid for the media items:\n    * _`Cols`_ (select; each device from xs to xxl; col* classes)\n    * _`Gutter space x`_ (select; each device from xs to xxl; g-* classes)\n    * _`Gutter space y`_ (select; each device from xs to xxl; g-* classes)\n    * _`Align x`_ (select; each device from xs to xxl; alignment classes)\n    * _`Align y`_ (select; each device from xs to xxl; alignment classes)\n* Border for each media item:\n    * _`Border edge`_ (select; one of the border-{side} classes)\n    * _`Border width`_ (select; one of the border-{size} classes)\n    * _`Border color`_ (select; one of the border-{color} classes)\n    * _`Rounded`_ (select; one of the rounded classes)\n    * _`Shadow`_ (select; one of the shadow classes)\n* _`Image optimizing`_ (produced percentual window width from xs to xxl)\n\n---\n\n### Two columns text\n\nCreate fast two columns text.  \nCType: `bootstrap_twocolumnstext`\n\n#### TypoScript constants\n\n| Key | Default | Desription |\n| --- | ------- | ---------- |\n| `ce_bootstrap_twocolumnstext_row_classes` | `row g-0 g-sm-3 g-md-4` | CSS-classes GRID-ROW |\n| `ce_bootstrap_twocolumnstext_col_classes` | `col-sm-6` | CSS-classes GRID-COL |\n\n---\n\n### Alert\n\nBootstrap alert boxes.  \nCType: `bootstrap_alert`\n\n#### Settings\n\n* _`Header`_ (string)\n* _`Text`_ (multiline string, RTE)\n* _`Alert Color`_ (select; one of the alert-{color} classes)\n* _`Text Color`_ (select; one of the text-{color} classes)\n* _`Background color`_ (select; one of the bg-{color} classes)\n* _`Icon-Set`_  \n    * `Set` (select; required; at this time only bootstrap icons)\n    * `Name` (string; readonly with visible selected icon)\n    * `Position` (select; `top`, `top-left`, `top-center`, `top-right`, `left`, `left-top`, `left-middle`, `left-bottom`, etc.)\n    * `Size` (select; the bootstrap font sizes or just inherit)\n    * `Icon Color` (select; one of the text-{color} classes)\n* Border-Options:\n    * _`Border edge`_ (select; one of the border-{side} classes)\n    * _`Border width`_ (select; one of the border-{size} classes)\n    * _`Border color`_ (select; one of the border-{color} classes)\n    * _`Rounded`_ (select; one of the rounded classes)\n    * _`Shadow`_ (select; one of the shadow classes)\n\n---\n\n### Markdown\n\nJust like the regular text content element - but instead using a rich text editor you use Markdown markup. In frontend it will be transformed to HTML.  \nCType: `bootstrap_markdown`\n\n---\n\n### Bullets\n\nA list in Bootstrap-style.  \nCType: `bullets`\n\n#### Settings (like Typo3)\n\n* `unordered list`\n* `ordered list`\n* `definition list`\n\n---\n\n### Div\n\nJust a line.  \nCType: `div`\n\n#### TypoScript Constants\n\n| Key | Default | Desription |\n| --- | ------- | ---------- |\n| `ce_div_hr_classes` | `bg-dark opacity-75 my-3 my-md-4` | CSS-classes HR-tag |\n\n---\n\n### Header\n\nJust a header.  \nCType: `header`\n\n---\n\n### Table\n\nAdjustable with all the Bootstrap table classes.  \nCType: `table`\n\n---\n\n### Uploads\n\nRealized with Bootstrap card component.  \nThe default Typo3-fields are available.  \nCType: `uploads`\n\n#### TypoScript Constants\n\n| Key | Default | Desription |\n| --- | ------- | ---------- |\n| `ce_uploads_row_classes` | `list-unstyled row g-3 row-cols-1 row-cols-sm-2 row-cols-lg-3 align-items-stretch` | CSS-classes GRID-ROW |\n| `ce_uploads_col_classes` | `col` | CSS-classes GRID-COL |\n| `ce_uploads_card_classes` | `card h-100` | CSS-classes CARD |\n\n---\n\n### Copied `fluid_styled_content` content elements\n\n* HTML  \nCType: `html`\n* List/Plugin  \nCType: `list`\n* Menu*  \nCTypes: \n    * `menu_abstract`\n    * `menu_categorized_content`\n    * `menu_categorized_pages`\n    * `menu_pages`\n    * `menu_recently_updated`\n    * `menu_related_pages`\n    * `menu_section`\n    * `menu_section_pages`\n    * `menu_sitemap`\n    * `menu_sitemap_pages`\n    * `menu_subpages`\n* Shortcut  \nCType: `shortcut`\n* Text  \nCType: `text`\n\n## Navigation\n\n### TypoScript Constants\n\n#### PID\n\n| Key | Default | Desription |\n| --- | ------- | ---------- |\n| `nav_dropdown_excludeUidList` | | Page-UIDs to exclude (excludeUidList) |\n\n#### Regular nav\n\n| Key | Default | Desription |\n| --- | ------- | ---------- |\n`nav_ul_classes` | `list-unstyled` | CSS-classes UL |\n`nav_li_classes` | `nav-item` | CSS-classes LI |\n`nav_link_spacer_classes` | `nav-link spacer` | CSS-classes LINK: Spacer |\n`nav_link_current_classes` | `nav-link active` | CSS-classes LINK: Current |\n`nav_link_active_classes` | `nav-link active` | CSS-classes LINK: Active |\n`nav_link_inactive_classes` | `nav-link inactive` | CSS-classes LINK: Inactive |\n\n#### Dropdown main\n\n| Key | Default | Desription |\n| --- | ------- | ---------- |\n| `nav_dropdown_ul_classes` | `navbar-nav me-auto mb-2 mb-lg-0 w-100 justify-content-end` | CSS-classes UL in level 0 |\n| `nav_dropdown_ul_target_classes` | `dropdown-menu dropdown-menu-dark dropdown-menu-end` | CSS-classes UL target in level 1 containing the children |\n| `nav_dropdown_li_dropdown_classes` | `nav-item` | CSS-classes LI regular (which has no children and it is not in a dropdown) |\n| `nav_dropdown_li_dropdown_toggle_classes` | `nav-item dropdown` | CSS-classes LI toggle (which has children) |\n| `nav_dropdown_li_dropdown_target_classes` | | CSS-classes LI target (which is a child in dropdown) |\n\n#### Dropdown link regular\n\n| Key | Default | Desription |\n| --- | ------- | ---------- |\n| `nav_dropdown_spacer_classes`| `nav-link text-nowrap` | CSS-classes LINK REGULAR: Spacer |\n| `nav_dropdown_current_classes`| `nav-link text-nowrap active` | CSS-classes LINK REGULAR: Current |\n| `nav_dropdown_active_classes`| `nav-link text-nowrap active` | CSS-classes LINK REGULAR: Active |\n| `nav_dropdown_inactive_classes`| `nav-link text-nowrap` | CSS-classes LINK REGULAR: Inactive |\n\n#### Dropdown toggle link/button\n\n| Key | Default | Desription |\n| --- | ------- | ---------- |\n`nav_dropdown_toggle_spacer_classes` | `nav-link text-nowrap dropdown-toggle` | CSS-classes LINK TOGGLE: Spacer in level 0 with children |\n`nav_dropdown_toggle_current_classes` | `nav-link text-nowrap active dropdown-toggle` | CSS-classes LINK TOGGLE: Current in level 0 with children |\n`nav_dropdown_toggle_active_classes` | `nav-link text-nowrap active dropdown-toggle` | CSS-classes LINK TOGGLE: Active in level 0 with children |\n`nav_dropdown_toggle_inactive_classes` | `nav-link text-nowrap dropdown-toggle` | CSS-classes LINK TOGGLE: Inactive in level 0 with children |\n\n#### Dropdown link in dropdown\n\n| Key | Default | Desription |\n| --- | ------- | ---------- |\n| `nav_dropdown_child_spacer_classes` | `dropdown-divider` | CSS-classes LINK CHILD: Spacer in level 1 in dropdown |\n| `nav_dropdown_child_current_classes` | `dropdown-item text-nowrap active` | CSS-classes LINK CHILD: Current in level 1 in dropdown |\n| `nav_dropdown_child_active_classes` | `dropdown-item text-nowrap active` | CSS-classes LINK CHILD: Active in level 1 in dropdown |\n| `nav_dropdown_child_inactive_classes` | `dropdown-item text-nowrap` | CSS-classes LINK CHILD: Inactive in level 1 in dropdown |\n\n## Credits\n\nMany thanks to the people of:\n\n* https://typo3.org  \nThis extension is based on the Typo3 project.\n* https://getbootstrap.com  \nIt implements the Twitter Bootstrap for the Typo3 back- and frontend.\n* https://github.com/twbs/icons  \nFor the icon set Twitter Bootstrap Icons is used.\n* https://masonry.desandro.com + https://github.com/desandro/imagesloaded  \nFor the media grids Masonry can be used. It is also not part of this software. Masonry is also required and will be loaded by composer.\n* https://scottjehl.github.io/picturefill/  \nTo provide pictures to IE11 picturefill is used.\n\nThe world would be a sadder place without them.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flbr-media%2Ftypo3-extension-bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flbr-media%2Ftypo3-extension-bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flbr-media%2Ftypo3-extension-bootstrap/lists"}