Features 

• Full configured TypoScript Setup provided via Site Sets
• Completely adjustable via Settings
• Responsive image rendering with multiple variants

• Built-in SCSS Parser

  • All SCSS variables are configurable via Settings
  • SCSS support in page.includeCSS property

• Bootstrap specific Content Elements

  • Accordion
  • Card Group
  • Carousel (including Fullscreen and Small variants)
  • External Media
  • Icon Group
  • List Group
  • Panel
  • Social Links
  • Tab
  • Text and Icon
  • Text Columns
  • Text Teaser
  • Timeline
  • Quote

• Various Menu Content Elements

  • Card Menu
  • Thumbnail Menu
  • Section Menu
  • and more

• Multiple Backend Layouts

  • Default, Simple
  • 2 Columns (various variants)
  • 3 Columns
  • Subnavigation Left/Right
  • Special Feature
  • Special Start

Screenshots 

Requirements 

• TYPO3 14.3 or TYPO3 15
• PHP 8.2 or higher

For general TYPO3 system requirements, please refer to the official TYPO3 Installation Guide.

Composer Installation 

Install the Bootstrap Package via Composer by running:

composer require bk2k/bootstrap-package

Classic Installation 

Alternatively, you can install the extension via the TYPO3 Extension Repository (TER).

Conflicting Extensions 

Bootstrap Package provides its own content rendering and conflicts with the core extension fluid_styled_content. This extension is marked as conflicting to avoid misconfiguration.

Next Steps 

After installation, follow the Quick Start guide to configure your site.

Disable default content rendering extension 

You do not need to have Fluid Styled Content installed, we have marked this extension as conflicting to avoid misconfiguration.

If you really know what you are doing, it is safe to use Core content rendering along with Bootstrap Package. But please note that we are adding more content elements that are not supported by this system extension.

Make sure you have a root page 

Create a new page or edit an existing one and set this as root page. This is done by turning on the option Use as Root Page in the Edit Page under Behavior > Miscellaneous.

Add the Bootstrap Package site set 

When you create a root page, TYPO3 automatically creates a site configuration for it. Edit the site and add the "Bootstrap Package: Full Package" set to include all features needed for a quick start.

Features 

Image Variants 

Image variants are used to represent the breakpoints of the design. These variants have to be defined according the definitions in the style sheet. Bootstrap Package defines these variants by default:

lib.contentElement.settings.responsiveimages.variants {
    default {
        breakpoint = 1200
        width = 1100
    }
    large {
        breakpoint = 992
        width = 920
    }
    medium {
        breakpoint = 768
        width = 680
    }
    small {
        breakpoint = 576
        width = 500
    }
    extrasmall {
        breakpoint = unset
        width = 374
    }
}

The breakpoint defines the minimal device width where the width gets applied. Having a device with a width of 1200 pixels or more uses an image width of 1100 pixels, devices of 992 up to 1199 pixels width use an image width of 920 pixels and so on.

For each of these variants the multiplier of size 1x is set to 1, see next section for more about the high-resolution image support:

• default

  • breakpoint
  • width

  • sizes

    • 1x

      • multiplier: 1

Example of changing the default configuration for the default variant.

lib.contentElement.settings.responsiveimages.variants {
    default {
        breakpoint = 1200
        width = 1100
    }

lib.contentElement.settings.responsiveimages.variants {
    default {
        sizes {
            1\.5x {
                multiplier = 1.5
            }
            2x {
                multiplier = 2
            }
        }
    }
}

lib.contentElement.settings.responsiveimages.backendlayout {
    my_layout {                # this is the BE layout
        0 {                    # this is the column to be modified
            multiplier {
                default = 0.75
                large = 0.75
            }
            gutters {
                default = 40
                large = 40
            }
            corrections {
                default = 25
                large = 25
            }
        }
    }
}

lib.contentElement.settings.responsiveimages.contentelements {
    my_content_element {       # this is the content element
        my_custom_property {   # this is a content element specific property, depends on the implementation and is optional
            multiplier {
                default = 0.5
                large = 0.5
                medium = 0.5
            }
            gutters {
                default = 24
                large = 24
                medium = 24
            }
            corrections {
                default = 25
                large = 25
                medium = 25
                small = 50
                extrasmall = 50
            }
        }
    }
}

Crop Variants 

The Bootstrap Package predefines some cropping variants which can easily be changed or extended by your sitepackage.

The following crop variants are defined by default:

• 16:9, for a fixed ratio
• 4:3, for a fixed ratio
• 1:1, for a fixed ratio
• NaN, for a free ration

Pagination 

Paginated content elements — the gallery is the one the package ships — carry the pagination in two query arguments:

paginate[id]

Identifier of the pagination that is being paged. The gallery builds it out of its uid, for example gallery-8793.

paginate[page]

Page number. It is absent on the first page.

One pagination is addressed at a time. Every other paginated element on the page stays on its first page, which is also all a speaking URL can express.

Every pagination link ends in the anchor of the element it pages, so a new page starts at that element instead of at the top of the document.

The site set bootstrap-package/pagination is part of the Full Package and rewrites both arguments into the path:

/gallery/tag-3/gallery-8793/page-2

Without it the arguments stay in the query string and drag a cache hash along:

/gallery/tag-3?paginate%5Bid%5D=gallery-8793&paginate%5Bpage%5D=2&cHash=61450d52

routeEnhancers:
  BootstrapPackagePagination:
    type: Plugin
    namespace: 'paginate'
    routePath: '/{id}/page-{page}'
    static:
      id: true
    requirements:
      id: '[a-z][a-z0-9]*-\d+'
      page: '\d+'
    aspects:
      page:
        type: StaticRangeMapper
        start: '2'
        end: '1000'

routeEnhancers:
  BootstrapPackagePagination:
    requirements:
      id: '[a-z0-9_-]+'

Available Site Sets 

Bootstrap Package provides the following Site Sets:

• Bootstrap Package: Full Package - Includes all sets for a complete setup
• Bootstrap Package: Backend Layouts - Backend layout configurations
• Bootstrap Package: Bootstrap 5 - Bootstrap 5 framework with SCSS variables
• Bootstrap Package: Content Elements - Content element templates and settings
• Bootstrap Package: Cookie Consent - Cookie consent banner integration
• Bootstrap Package: Google Font - Google Fonts integration
• Bootstrap Package: Google Tag Manager - Google Tag Manager integration
• Bootstrap Package: Pagination - Speaking URLs for paginated elements
• Bootstrap Package: RTE - Rich Text Editor configuration
• Bootstrap Package: Skiplink - Accessibility skip links

Sets with Settings 

The following sets provide configurable settings:

• Full Package
• Backend Layouts
• Bootstrap 5
• Content Elements
• Cookie Consent
• Google Font
• Google Tag Manager