Typo3 template extension with twitter bootstrap5.
OTHER License
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).
There 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:
Use 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.
After the backend is running you maybe have to setup the sites configuration.
composer require lbr-media/typo3-extension-bootstrap
php vendor/bin/typo3 bootstrap:updatefileadmin
Clear the cache in Install-Tool or with php vendor/bin/typo3 cache:flush
.
Include the following static templates:
Remove the default TypoScript config in setup field.
Now you should be able to call the frontend of the page.
All content elements have extra or modified fields.
Frame class
(select)container-xl
or container-float
.Inner frame class
(select)TCEFORM.tt_content.tx_bootstrap_inner_frame_class.addItems {
my-inner-frame-class = My Label
}
Additional styles
(select multiple)plugin.tx_bootstrap.settings.form.element.AdditionalStyles
.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 = <div class="indent-left-inner">|</div>
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 of all content elements have extra or modified fields.
Header
(multiline string)Header layout
aka Type
(select)h1
to h5
).Layout
(select)display-1
to display-6
, h1
to h6
and lead
.Variant
or Predefined header
(select)plugin.tx_bootstrap.settings.form.element.PredefinedHeader
.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 = <div class="h-fancy border bg-dark text-light rounded">|</div>
innerWrap = <span class="h-fancy-inner">|</span>
additionalClass = mb-0
}
}
Color
(select; one of the text-{color} classes)Position
(select; either start
, center
or end
)Date
(Date)Additional styles
(select multiple)plugin.tx_bootstrap.settings.form.element.AdditionalHeaderStyles
.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 = <em>|</em>
}
30 {
label = -line-through-
value = 30
innerWrap = <del>|</del>
}
}
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)Key | Default | Desription |
---|---|---|
header_pattern |
###TAG_START######HEADER######TAG_END### |
Header pattern |
header_subheader_pattern |
###TAG_START######HEADER###<small class="d-block">###SUBHEADER###</small>###TAG_END### |
Header subheader pattern |
header_date_pattern |
<span class="d-block" datetime="###DATE_DATETIME###">###DATE###</span>###TAG_START######HEADER######TAG_END### |
Header date pattern |
header_subheader_date_pattern |
<span class="d-block" datetime="###DATE_DATETIME###">###DATE###</span>###TAG_START######HEADER###<small class="d-block">###SUBHEADER###</small>###TAG_END### |
Header subheader date pattern |
header_date_datetype |
FULL |
Header date formatSee: https://www.php.net/manual/de/class.intldateformatter.php |
header_date_timetype |
NONE |
Header time format |
header_icon_wrap |
outside |
Header icon wrap.Should the icons be 'outside' the h-tag or 'inside'? |
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.
Keep items open on opening other items
(boolean)Opened on load
(boolean)Bootstrap styled Carousel component with images.
CType: bootstrap_carousel
Animation
(select; either slide
or fade
)Autoplay
(boolean)Color scheme
(select; either light
, dark
)Show controls
(boolean)Show indicators
(boolean)Interval
(int; required; milliseconds)Header
(string)Title
(string)Alternative
(string)Description
(multiline string)Link
(TypoLink)Link text
(string)Crop
(each device from xs to xxl)Bootstrap styled Cards component in a grid system.
CType: bootstrap_cards
Presets
(select multiple)tt_content.bootstrap_cards.flexform_presets
one or more settings could be grouped and labeled for selection.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)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 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)Header
(string)Title
(string)Image
(File reference)Text
(multiline string, RTE)Link
(TypoLink)Link text
(string)Footer
(string)Images and videos in an adjustable grid system. Masonry is also provided.
CType: bootstrap_mediagrid
Presets
(select multiple)tt_content.bootstrap_mediagrid.flexform_presets
one or more settings could be grouped and labeled for selection.masonry grid
(boolean)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 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)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.
Layout
(select; either default
, pills horizontal
or pills vertical
)Navigation alignment
(select; only on horizontal; one of start
, center
, end
, nav fill
, nav justified
)active
(boolean)A content element to create fast a grid with one image and text. Positions, space and alignment is adjustable.
CType: bootstrap_textimage
Presets
(select multiple)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 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)A text which floats a media grid. Full adjustable grid and floating settings. Some presets are available to the editor.
CType: bootstrap_textmediafloat
Presets
(select multiple)tt_content.bootstrap_textmediafloat.flexform_presets
one or more settings could be grouped and labeled for selection.Header position
(above all
or above text
)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)masonry 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 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)A text column and a media grid column. The most flexible content element.
CType: bootstrap_textmediagrid
Presets
(select multiple)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
)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)Align self
(select; each device from xs to xxl; alignment classes)Inner space
(select; each device from xs to xxl; space classes)masonry grid
Align self
(select; each device from xs to xxl; alignment classes)Inner space
(select; each device from xs to xxl; space classes)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 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)Create fast two columns text.
CType: bootstrap_twocolumnstext
Key | Default | Desription |
---|---|---|
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 |
Bootstrap alert boxes.
CType: bootstrap_alert
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 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)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
A list in Bootstrap-style.
CType: bullets
unordered list
ordered list
definition list
Just a line.
CType: div
Key | Default | Desription |
---|---|---|
ce_div_hr_classes |
bg-dark opacity-75 my-3 my-md-4 |
CSS-classes HR-tag |
Just a header.
CType: header
Adjustable with all the Bootstrap table classes.
CType: table
Realized with Bootstrap card component.
The default Typo3-fields are available.
CType: uploads
Key | Default | Desription |
---|---|---|
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 |
fluid_styled_content
content elementshtml
list
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
text
Key | Default | Desription |
---|---|---|
nav_dropdown_excludeUidList |
Page-UIDs to exclude (excludeUidList) |
Key | Default | Desription |
---|---|---|
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 |
Key | Default | Desription |
---|---|---|
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) |
Key | Default | Desription |
---|---|---|
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 |
Key | Default | Desription |
---|---|---|
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 |
Key | Default | Desription |
---|---|---|
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 dropdown |
Many thanks to the people of:
The world would be a sadder place without them.