PHPackages lbr-media/typo3-extension-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. lbr-media/typo3-extension-bootstrap ActiveTypo3-cms-extension[Templating & Views](/categories/templating) lbr-media/typo3-extension-bootstrap =================================== Typo3 template extension with Twitter Bootstrap 5 package. 12.0.0(3y ago)159[3 issues](https://github.com/lbr-media/typo3-extension-bootstrap/issues)[4 PRs](https://github.com/lbr-media/typo3-extension-bootstrap/pulls)1GPL-2.0-or-laterPHPPHP >=8.1.0 Since Feb 28Pushed 3y ago1 watchersCompare [ Source](https://github.com/lbr-media/typo3-extension-bootstrap)[ Packagist](https://packagist.org/packages/lbr-media/typo3-extension-bootstrap)[ Docs](https://github.com/lbr-media/typo3-extension-bootstrap)[ RSS](/packages/lbr-media-typo3-extension-bootstrap/feed)WikiDiscussions main Synced today READMEChangelog (10)Dependencies (17)Versions (25)Used By (1) typo3 extension: bootstrap ========================== [](#typo3-extension-bootstrap) Typo3 template extension with Twitter Bootstrap 5 package. Provides page templates and many content elements modified or build for Bootstrap 5. The basis of the content elements is fluid\_styled\_content (many are copied from this extension). Table of contents ----------------- [](#table-of-contents) - [typo3 extension: bootstrap](#typo3-extension-bootstrap) - [Table of contents](#table-of-contents) - [Install](#install) - [1. Install typo3 as usual with composer.](#1-install-typo3-as-usual-with-composer) - [2. Install this package.](#2-install-this-package) - [3. Run the command to copy some assets to fileadmin.](#3-run-the-command-to-copy-some-assets-to-fileadmin) - [4. Clear the cache](#4-clear-the-cache) - [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) - [Content elements](#content-elements) - [All content elements](#all-content-elements) - [Fields](#fields) - [All headers](#all-headers) - [Fields](#fields-1) - [TypoScript constants](#typoscript-constants) - [Accordion](#accordion) - [Settings for all items:](#settings-for-all-items) - [Settings each item:](#settings-each-item) - [Carousel](#carousel) - [Settings:](#settings) - [Image properties:](#image-properties) - [Cards](#cards) - [Settings](#settings-1) - [Card-item properties](#card-item-properties) - [Media grid](#media-grid) - [Settings](#settings-2) - [Tabulator](#tabulator) - [Settings for all items](#settings-for-all-items-1) - [Settings each item](#settings-each-item-1) - [Text + Image](#text--image) - [Settings](#settings-3) - [Text & Media (float)](#text--media-float) - [Settings](#settings-4) - [Text & Media (grid)](#text--media-grid) - [Settings](#settings-5) - [Two columns text](#two-columns-text) - [TypoScript constants](#typoscript-constants-1) - [Alert](#alert) - [Settings](#settings-6) - [Markdown](#markdown) - [Bullets](#bullets) - [Settings (like Typo3)](#settings-like-typo3) - [Div](#div) - [TypoScript Constants](#typoscript-constants-2) - [Header](#header) - [Table](#table) - [Uploads](#uploads) - [TypoScript Constants](#typoscript-constants-3) - [Copied `fluid_styled_content` content elements](#copied-fluid_styled_content-content-elements) - [Navigation](#navigation) - [TypoScript Constants](#typoscript-constants-4) - [PID](#pid) - [Regular nav](#regular-nav) - [Dropdown main](#dropdown-main) - [Dropdown link regular](#dropdown-link-regular) - [Dropdown toggle link/button](#dropdown-toggle-linkbutton) - [Dropdown link in dropdown](#dropdown-link-in-dropdown) - [Credits](#credits) Install ------- [](#install) There is a basic package at 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: ### 1. Install typo3 as usual with composer. [](#1-install-typo3-as-usual-with-composer) Use `composer create-project "typo3/cms-base-distribution:^11.5" my-new-project` or check the composer helper at . After the backend is running you maybe have to setup the sites configuration. ### 2. Install this package. [](#2-install-this-package) `composer require lbr-media/typo3-extension-bootstrap` ### 3. Run the command to copy some assets to fileadmin. [](#3-run-the-command-to-copy-some-assets-to-fileadmin) `php vendor/bin/typo3 bootstrap:updatefileadmin` ### 4. Clear the cache [](#4-clear-the-cache) Clear the cache in Install-Tool or with `php vendor/bin/typo3 cache:flush`. ### 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) Include the following static templates: - General (bootstrap) - Content elements (bootstrap) - Additional Styles (bootstrap) Remove the default TypoScript config in setup field. Now you should be able to call the frontend of the page. Content elements ---------------- [](#content-elements) ### All content elements [](#all-content-elements) All content elements have extra or modified fields. #### Fields [](#fields) - *`Frame class`* (select) Here you'll find the Bootstrap container\* classes like `container-xl` or `container-float`. - *`Inner frame class`* (select) Like the frame class but will create an inner div around the content when a value is selected. Example: ``` TCEFORM.tt_content.tx_bootstrap_inner_frame_class.addItems { my-inner-frame-class = My Label } ``` - *`Additional styles`* (select multiple) Many styles are selectable for one content element. Use this to configure modifications like indents, etc. In TypoScript several styles can be configured. You'll find them with the key `plugin.tx_bootstrap.settings.form.element.AdditionalStyles`. Each variant has these properties: - `label` (string; required) - `value` (int; required; used for reference) - `outerWrap` (string) - `innerWrap` (string) - `additionalClass` (string) - `additionalAttributes` (array; key value pairs) - `additionalOuterClass` (string) - `additionalOuterAttributes` (array; key value pairs) Example: ``` plugin.tx_bootstrap.settings.form.element.AdditionalStyles { 10 { label = Indent left value = 10 innerWrap = | additionalClass = indent-left additionalAttributes { data-render = indent-left } } } ``` - *`Color`* (select; one of the text-{color} classes) - *`Background color`* (select; one of the bg-{color} classes) - *`Space before`* (select; one of the space\_before\_class') - *`Space after`* (select; one of the space\_after\_class') The 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. Adjust to your needs: ``` plugin.tx_bootstrap.settings.form.element { SpaceBeforeClassReplacements { extra-small = mt-3 small = mt-4 medium = mt-5 large = mt-6 extra-large = mt-7 } SpaceAfterClassReplacements { extra-small = mb-3 small = mb-4 medium = mb-5 large = mb-6 extra-large = mb-7 } } ``` --- ### All headers [](#all-headers) All headers of all content elements have extra or modified fields. #### Fields [](#fields-1) - *`Header`* (multiline string) - *`Header layout`* aka *`Type`* (select) The tag that will be generated (`h1` to `h5`). - *`Layout`* (select) The basic css-class that will be used for the tag. The default Bootstrap classes from `display-1` to `display-6`, `h1` to `h6` and `lead`. - *`Variant`* or *`Predefined header`* (select) Only one variant is selectable for one headline. Use this to produce some variants of headers. In TypoScript several variants can be configured. You'll find them with the key `plugin.tx_bootstrap.settings.form.element.PredefinedHeader`. Each variant has these properties: - `label` (string; required) - `value` (int; required; used for reference) - `outerWrap` (string) - `innerWrap` (string) - `additionalClass` (string) Example: ``` plugin.tx_bootstrap.settings.form.element.PredefinedHeader { 10 { label = My fancy headline value = 10 outerWrap = | innerWrap = | additionalClass = mb-0 } } ``` - *`Color`* (select; one of the text-{color} classes) - *`Position`* (select; either `start`, `center` or `end`) - *`Date`* (Date) - *`Additional styles`* (select multiple) Many styles are selectable for one headline. Use this to configure modifications like uppercase, no space below, etc. In TypoScript several styles can be configured. You'll find them with the key `plugin.tx_bootstrap.settings.form.element.AdditionalHeaderStyles`. Each variant has these properties: - `label` (string; required) - `value` (int; required; used for reference) - `outerWrap` (string) - `innerWrap` (string) - `additionalClass` (string) Example: ``` plugin.tx_bootstrap.settings.form.element.AdditionalHeaderStyles { 10 { label = VERSAL value = 10 additionalClass = text-uppercase } 20 { label = italic value = 20 innerWrap = | } 30 { label = -line-through- value = 30 innerWrap = | } } ``` - *`Link`* (TypoLink) - *`Subheader`* (string) - *`File icon`* - `Icon` (File reference) - `Size` (select; the bootstrap font sizes or just inherit) - `Alignment` (select; each device from xs to xxl; `top`, `top-left`, `top-center`, `top-right`, `left`, `left-top`, `left-middle`, `left-bottom`, etc.) - *`Icon-Set`* - `Set` (select; required; at this time only bootstrap icons) - `Name` (string; readonly with visible selected icon) - `Alignment` (select; each device from xs to xxl; `top`, `top-left`, `top-center`, `top-right`, `left`, `left-top`, `left-middle`, `left-bottom`, etc.) - `Size` (select; the bootstrap font sizes or just inherit) - `Color` (select; one of the text-{color} classes) #### TypoScript constants [](#typoscript-constants) KeyDefaultDesription`header_pattern``###TAG_START######HEADER######TAG_END###`Header pattern`header_subheader_pattern``###TAG_START######HEADER######SUBHEADER######TAG_END###`Header subheader pattern`header_date_pattern``###DATE######TAG_START######HEADER######TAG_END###`Header date pattern`header_subheader_date_pattern``###DATE######TAG_START######HEADER######SUBHEADER######TAG_END###`Header subheader date pattern`header_date_datetype``FULL`Header date format See: `header_date_timetype``NONE`Header time format`header_icon_wrap``outside`Header icon wrap. Should the icons be 'outside' the h-tag or 'inside'?--- ### Accordion [](#accordion) Bootstrap styled Accordion component. CType: `bootstrap_accordion` One accordion content element has one or many accordion items. Each accordion item may have one or many `Text & media (grid)` content elements. #### Settings for all items: [](#settings-for-all-items) - *`Keep items open on opening other items`* (boolean) #### Settings each item: [](#settings-each-item) - *`Opened on load`* (boolean) --- ### Carousel [](#carousel) Bootstrap styled Carousel component with images. CType: `bootstrap_carousel` #### Settings: [](#settings) - *`Animation`* (select; either `slide` or `fade`) - *`Autoplay`* (boolean) - *`Color scheme`* (select; either `light`, `dark`) - *`Show controls`* (boolean) - *`Show indicators`* (boolean) - *`Interval`* (int; required; milliseconds) #### Image properties: [](#image-properties) - *`Header`* (string) - *`Title`* (string) - *`Alternative`* (string) - *`Description`* (multiline string) - *`Link`* (TypoLink) - *`Link text`* (string) - *`Crop`* (each device from xs to xxl) --- ### Cards [](#cards) Bootstrap styled Cards component in a grid system. CType: `bootstrap_cards` #### Settings [](#settings-1) - *`Presets`* (select multiple) In TypoScript `tt_content.bootstrap_cards.flexform_presets` one or more settings could be grouped and labeled for selection. - Grid: - *`Cols`* (select; each device from xs to xxl; col\* classes) - *`Gutter space x`* (select; each device from xs to xxl; g-\* classes) - *`Gutter space y`* (select; each device from xs to xxl; g-\* classes) - *`Align x`* (select; each device from xs to xxl; alignment classes) - *`Align y`* (select; each device from xs to xxl; alignment classes) - Cards: - *`Image position`* (select; one of `above`, `below`, `start`, `end`) - *`Background color`* (select; one of the bg-{color} classes) - *`Text color`* (select; one of the text-{color} classes) - Border-Options: - *`Border edge`* (select; one of the border-{side} classes) - *`Border width`* (select; one of the border-{size} classes) - *`Border color`* (select; one of the border-{color} classes) - *`Rounded`* (select; one of the rounded classes) - *`Shadow`* (select; one of the shadow classes) - *`Button color/style`* (select; one of the btn-{color} and btn-outline-{color} classes) - *`Image optimizing`* (produced percentual window width from xs to xxl) #### Card-item properties [](#card-item-properties) - *`Header`* (string) - *`Title`* (string) - *`Image`* (File reference) - *`Text`* (multiline string, RTE) - *`Link`* (TypoLink) - *`Link text`* (string) - *`Footer`* (string) --- ### Media grid [](#media-grid) Images and videos in an adjustable grid system. Masonry is also provided. CType: `bootstrap_mediagrid` #### Settings [](#settings-2) - *`Presets`* (select multiple) In TypoScript `tt_content.bootstrap_mediagrid.flexform_presets` one or more settings could be grouped and labeled for selection. - Use *`masonry grid`* (boolean) - Grid: - *`Cols`* (select; each device from xs to xxl; col\* classes) - *`Gutter space x`* (select; each device from xs to xxl; g-\* classes) - *`Gutter space y`* (select; each device from xs to xxl; g-\* classes) - *`Align x`* (select; each device from xs to xxl; alignment classes) - *`Align y`* (select; each device from xs to xxl; alignment classes) - Border for each media item: - *`Border edge`* (select; one of the border-{side} classes) - *`Border width`* (select; one of the border-{size} classes) - *`Border color`* (select; one of the border-{color} classes) - *`Rounded`* (select; one of the rounded classes) - *`Shadow`* (select; one of the shadow classes) - *`Image optimizing`* (produced percentual window width from xs to xxl) --- ### Tabulator [](#tabulator) Bootstrap styled Tabulator component. CType: `bootstrap_tabs` One tabulator content element has one or many tabulator items. Each tabulator item may have one or many `Text & media (grid)` content elements. #### Settings for all items [](#settings-for-all-items-1) - *`Layout`* (select; either `default`, `pills horizontal` or `pills vertical`) - *`Navigation alignment`* (select; only on horizontal; one of `start`, `center`, `end`, `nav fill`, `nav justified`) #### Settings each item [](#settings-each-item-1) - *`active`* (boolean) Only one can be active. The first found with active state is used. If no one is active, the first item is marked as active. --- ### Text + Image [](#text--image) A content element to create fast a grid with one image and text. Positions, space and alignment is adjustable. CType: `bootstrap_textimage` #### Settings [](#settings-3) - *`Presets`* (select multiple) In TypoScript `tt_content.bootstrap_textimage.flexform_presets` one or more settings could be grouped and labeled for selection. - *`Order`* (select; either `first image` or `first text`) - *`Image alignment`* (select; either `top` or `bottom`) - *`Text alignment`* (select; either `top` or `bottom`) - *`Header position`* (select; either `above all`, `above text` or `above image`) - *`Space between`* text and image (select; each device from xs to xxl; g-\* classes) - Border for the image: - *`Border edge`* (select; one of the border-{side} classes) - *`Border width`* (select; one of the border-{size} classes) - *`Border color`* (select; one of the border-{color} classes) - *`Rounded`* (select; one of the rounded classes) - *`Shadow`* (select; one of the shadow classes) --- ### Text & Media (float) [](#text--media-float) A text which floats a media grid. Full adjustable grid and floating settings. Some presets are available to the editor. CType: `bootstrap_textmediafloat` #### Settings [](#settings-4) - *`Presets`* (select multiple) In TypoScript `tt_content.bootstrap_textmediafloat.flexform_presets` one or more settings could be grouped and labeled for selection. - *`Header position`* (`above all` or `above text`) - Media area: - *`Position`* (select; each device from xs to xxl; either `centered above text`, `left` or `right`) - *`Width`* (select; each device from xs to xxl; additional float classes) - *`Space x`* (select; each device from xs to xxl; space classes) - *`Space y`* (select; each device from xs to xxl; space classes) - Use *`masonry grid`* - Grid for the media items: - *`Cols`* (select; each device from xs to xxl; col\* classes) - *`Gutter space x`* (select; each device from xs to xxl; g-\* classes) - *`Gutter space y`* (select; each device from xs to xxl; g-\* classes) - *`Align x`* (select; each device from xs to xxl; alignment classes) - *`Align y`* (select; each device from xs to xxl; alignment classes) - Border for each media item: - *`Border edge`* (select; one of the border-{side} classes) - *`Border width`* (select; one of the border-{size} classes) - *`Border color`* (select; one of the border-{color} classes) - *`Rounded`* (select; one of the rounded classes) - *`Shadow`* (select; one of the shadow classes) - *`Image optimizing`* (produced percentual window width from xs to xxl) --- ### Text & Media (grid) [](#text--media-grid) A text column and a media grid column. The most flexible content element. CType: `bootstrap_textmediagrid` #### Settings [](#settings-5) - *`Presets`* (select multiple) In TypoScript `tt_content.bootstrap_textmediagrid.flexform_presets` one or more settings could be grouped and labeled for selection. - *`Default order`* of text- and media-area (select; either `first image` or `first text`) - *`Order per each device`* (select; each device from xs to xxl; either `first image` or `first text`) - *`Header position`* (select; either `above all`, `above text` or `above media area`) - Grid for the text- and media-columns: - *`Cols text-column`* (select; each device from xs to xxl; col\* classes) - *`Cols media-column`* (select; each device from xs to xxl; col\* classes) - *`Gutter space x`* (select; each device from xs to xxl; g-\* classes) - *`Gutter space y`* (select; each device from xs to xxl; g-\* classes) - *`Align x`* (select; each device from xs to xxl; alignment classes) - *`Align y`* (select; each device from xs to xxl; alignment classes) - Text-column: - *`Align self`* (select; each device from xs to xxl; alignment classes) - *`Inner space`* (select; each device from xs to xxl; space classes) - Media-column: - Use *`masonry grid`* - *`Align self`* (select; each device from xs to xxl; alignment classes) - *`Inner space`* (select; each device from xs to xxl; space classes) - Grid for the media items: - *`Cols`* (select; each device from xs to xxl; col\* classes) - *`Gutter space x`* (select; each device from xs to xxl; g-\* classes) - *`Gutter space y`* (select; each device from xs to xxl; g-\* classes) - *`Align x`* (select; each device from xs to xxl; alignment classes) - *`Align y`* (select; each device from xs to xxl; alignment classes) - Border for each media item: - *`Border edge`* (select; one of the border-{side} classes) - *`Border width`* (select; one of the border-{size} classes) - *`Border color`* (select; one of the border-{color} classes) - *`Rounded`* (select; one of the rounded classes) - *`Shadow`* (select; one of the shadow classes) - *`Image optimizing`* (produced percentual window width from xs to xxl) --- ### Two columns text [](#two-columns-text) Create fast two columns text. CType: `bootstrap_twocolumnstext` #### TypoScript constants [](#typoscript-constants-1) KeyDefaultDesription`ce_bootstrap_twocolumnstext_row_classes``row g-0 g-sm-3 g-md-4`CSS-classes GRID-ROW`ce_bootstrap_twocolumnstext_col_classes``col-sm-6`CSS-classes GRID-COL--- ### Alert [](#alert) Bootstrap alert boxes. CType: `bootstrap_alert` #### Settings [](#settings-6) - *`Header`* (string) - *`Text`* (multiline string, RTE) - *`Alert Color`* (select; one of the alert-{color} classes) - *`Text Color`* (select; one of the text-{color} classes) - *`Background color`* (select; one of the bg-{color} classes) - *`Icon-Set`* - `Set` (select; required; at this time only bootstrap icons) - `Name` (string; readonly with visible selected icon) - `Position` (select; `top`, `top-left`, `top-center`, `top-right`, `left`, `left-top`, `left-middle`, `left-bottom`, etc.) - `Size` (select; the bootstrap font sizes or just inherit) - `Icon Color` (select; one of the text-{color} classes) - Border-Options: - *`Border edge`* (select; one of the border-{side} classes) - *`Border width`* (select; one of the border-{size} classes) - *`Border color`* (select; one of the border-{color} classes) - *`Rounded`* (select; one of the rounded classes) - *`Shadow`* (select; one of the shadow classes) --- ### Markdown [](#markdown) Just 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. CType: `bootstrap_markdown` --- ### Bullets [](#bullets) A list in Bootstrap-style. CType: `bullets` #### Settings (like Typo3) [](#settings-like-typo3) - `unordered list` - `ordered list` - `definition list` --- ### Div [](#div) Just a line. CType: `div` #### TypoScript Constants [](#typoscript-constants-2) KeyDefaultDesription`ce_div_hr_classes``bg-dark opacity-75 my-3 my-md-4`CSS-classes HR-tag--- ### Header [](#header) Just a header. CType: `header` --- ### Table [](#table) Adjustable with all the Bootstrap table classes. CType: `table` --- ### Uploads [](#uploads) Realized with Bootstrap card component. The default Typo3-fields are available. CType: `uploads` #### TypoScript Constants [](#typoscript-constants-3) KeyDefaultDesription`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`ce_uploads_col_classes``col`CSS-classes GRID-COL`ce_uploads_card_classes``card h-100`CSS-classes CARD--- ### Copied `fluid_styled_content` content elements [](#copied-fluid_styled_content-content-elements) - HTML CType: `html` - List/Plugin CType: `list` - Menu\* CTypes: - `menu_abstract` - `menu_categorized_content` - `menu_categorized_pages` - `menu_pages` - `menu_recently_updated` - `menu_related_pages` - `menu_section` - `menu_section_pages` - `menu_sitemap` - `menu_sitemap_pages` - `menu_subpages` - Shortcut CType: `shortcut` - Text CType: `text` Navigation ---------- [](#navigation) ### TypoScript Constants [](#typoscript-constants-4) #### PID [](#pid) KeyDefaultDesription`nav_dropdown_excludeUidList`Page-UIDs to exclude (excludeUidList)#### Regular nav [](#regular-nav) KeyDefaultDesription`nav_ul_classes``list-unstyled`CSS-classes UL`nav_li_classes``nav-item`CSS-classes LI`nav_link_spacer_classes``nav-link spacer`CSS-classes LINK: Spacer`nav_link_current_classes``nav-link active`CSS-classes LINK: Current`nav_link_active_classes``nav-link active`CSS-classes LINK: Active`nav_link_inactive_classes``nav-link inactive`CSS-classes LINK: Inactive#### Dropdown main [](#dropdown-main) KeyDefaultDesription`nav_dropdown_ul_classes``navbar-nav me-auto mb-2 mb-lg-0 w-100 justify-content-end`CSS-classes UL in level 0`nav_dropdown_ul_target_classes``dropdown-menu dropdown-menu-dark dropdown-menu-end`CSS-classes UL target in level 1 containing the children`nav_dropdown_li_dropdown_classes``nav-item`CSS-classes LI regular (which has no children and it is not in a dropdown)`nav_dropdown_li_dropdown_toggle_classes``nav-item dropdown`CSS-classes LI toggle (which has children)`nav_dropdown_li_dropdown_target_classes`CSS-classes LI target (which is a child in dropdown)#### Dropdown link regular [](#dropdown-link-regular) KeyDefaultDesription`nav_dropdown_spacer_classes``nav-link text-nowrap`CSS-classes LINK REGULAR: Spacer`nav_dropdown_current_classes``nav-link text-nowrap active`CSS-classes LINK REGULAR: Current`nav_dropdown_active_classes``nav-link text-nowrap active`CSS-classes LINK REGULAR: Active`nav_dropdown_inactive_classes``nav-link text-nowrap`CSS-classes LINK REGULAR: Inactive#### Dropdown toggle link/button [](#dropdown-toggle-linkbutton) KeyDefaultDesription`nav_dropdown_toggle_spacer_classes``nav-link text-nowrap dropdown-toggle`CSS-classes LINK TOGGLE: Spacer in level 0 with children`nav_dropdown_toggle_current_classes``nav-link text-nowrap active dropdown-toggle`CSS-classes LINK TOGGLE: Current in level 0 with children`nav_dropdown_toggle_active_classes``nav-link text-nowrap active dropdown-toggle`CSS-classes LINK TOGGLE: Active in level 0 with children`nav_dropdown_toggle_inactive_classes``nav-link text-nowrap dropdown-toggle`CSS-classes LINK TOGGLE: Inactive in level 0 with children#### Dropdown link in dropdown [](#dropdown-link-in-dropdown) KeyDefaultDesription`nav_dropdown_child_spacer_classes``dropdown-divider`CSS-classes LINK CHILD: Spacer in level 1 in dropdown`nav_dropdown_child_current_classes``dropdown-item text-nowrap active`CSS-classes LINK CHILD: Current in level 1 in dropdown`nav_dropdown_child_active_classes``dropdown-item text-nowrap active`CSS-classes LINK CHILD: Active in level 1 in dropdown`nav_dropdown_child_inactive_classes``dropdown-item text-nowrap`CSS-classes LINK CHILD: Inactive in level 1 in dropdownCredits ------- [](#credits) Many thanks to the people of: - This extension is based on the Typo3 project. - It implements the Twitter Bootstrap for the Typo3 back- and frontend. - For the icon set Twitter Bootstrap Icons is used. - + For 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. - To provide pictures to IE11 picturefill is used. The world would be a sadder place without them. ### Health Score 25 — LowBetter than 35% of packages Maintenance0 Infrequent updates — may be unmaintained Popularity10 Limited adoption so far Community9 Small or concentrated contributor base Maturity68 Established project with proven stability Bus Factor1 Top contributor holds 100% 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 ~12 days Recently: every ~41 days Total 19 Last Release 1362d ago Major Versions 1.0.23 → 12.0.02022-10-10 PHP version history (2 changes)1.0.7PHP >=7.4.1 12.0.0PHP >=8.1.0 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/15161027?v=4)[Marcel](/maintainers/sunixzs)[@sunixzs](https://github.com/sunixzs) --- Top Contributors [![sunixzs](https://avatars.githubusercontent.com/u/15161027?v=4)](https://github.com/sunixzs "sunixzs (234 commits)") --- Tags bootstrapbootstrap5bootstrap5-templatephptypo3typo3-extension ### Embed Badge ![Health badge](/badges/lbr-media-typo3-extension-bootstrap/health.svg) ``` [![Health](https://phpackages.com/badges/lbr-media-typo3-extension-bootstrap/health.svg)](https://phpackages.com/packages/lbr-media-typo3-extension-bootstrap) ``` ### Alternatives [netresearch/rte-ckeditor-image Image support in CKEditor for the TYPO3 ecosystem - by Netresearch 611.1M8](/packages/netresearch-rte-ckeditor-image)[friendsoftypo3/content-blocks TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML 103519.9k53](/packages/friendsoftypo3-content-blocks)[typo3/cms-base-distribution TYPO3 CMS Base Distribution 19643.2k81](/packages/typo3-cms-base-distribution)[pagemachine/typo3-formlog Form log for TYPO3 23238.6k8](/packages/pagemachine-typo3-formlog)[yoast-seo-for-typo3/yoast_seo Yoast SEO for TYPO3 511.7M9](/packages/yoast-seo-for-typo3-yoast-seo)[eliashaeussler/typo3-warming Warming - Warms up Frontend caches based on an XML sitemap. Cache warmup can be triggered via TYPO3 backend or using a console command. Supports multiple languages and custom crawler implementations. 22260.2k](/packages/eliashaeussler-typo3-warming) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)