View on GitHub

typo3-extension-bootstrap

Typo3 template extension with twitter bootstrap5.

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).

Install

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:

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 https://get.typo3.org/misc/composer/helper.

After the backend is running you maybe have to setup the sites configuration.

2. Install this package.

composer require lbr-media/typo3-extension-bootstrap

3. Run the command to copy some assets to fileadmin.

php vendor/bin/typo3 bootstrap:updatefileadmin

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

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.

Content elements

All content elements

All content elements have extra or modified fields.

Fields

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
        }
    }
}

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 of all content elements have extra or modified fields.

Fields

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
    }
}

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>
    }
}

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 each item:

Bootstrap styled Carousel component with images.
CType: bootstrap_carousel

Settings:

Image properties:

Cards

Bootstrap styled Cards component in a grid system.
CType: bootstrap_cards

Settings:

Card-item properties:

Media grid

Images and videos in an adjustable grid system. Masonry is also provided.
CType: bootstrap_mediagrid

Settings:

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 each item:

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:

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:

Text & Media (grid)

A text column and a media grid column. The most flexible content element.
CType: bootstrap_textmediagrid

Settings:

Two columns text

Create fast two columns text.
CType: bootstrap_twocolumnstext

Alert

Bootstrap alert boxes.
CType: bootstrap_alert

Settings:

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

A list in Bootstrap-style.
CType: bullets

Settings (like Typo3):

Div

Just a line.
CType: div

Just a header.
CType: header

Table

Adjustable with all the Bootstrap table classes.
CType: table

Uploads

Realized with Bootstrap card component.
The default Typo3-fields are available.
CType: uploads

Copied fluid_styled_content content elements

Credits

Many thanks to the people of:

The world would be a sadder place without them.