Features

• Full configured TypoScript Setup provided as Static Template
• Completely adjustable via TypoScript Constants

• TYPO3 CMS rendering is adjusted to the needs of Bootstrap CSS Framework:

  • Layouts for all Content Elements
  • Section Frames

• Bootstrap specific Content Elements

  • Accordion
  • External Media
  • Carousel
  • List Group
  • Tab
  • Text and Icon
• Individual Page Layouts

• Built-in Less Parser

  • All Variables are configurable via Constant Editor
  • Less support in page.includeCSS property
• Backend Layouts via PageTsConfig

Screenshots

Recommended Apache Modules

• mod_autoindex
• mod_alias
• mod_deflate
• mod_expires
• mod_filter
• mod_mime
• mod_headers
• mod_setenvif
• mod_rewrite

Disable default content rendering extensions

You do not need to have either Fluid Styled Content or CSS Styled Content installed, we have currently marked both extensions 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 these system extensions.

Make sure you have a root page

Create a new page or edit an existing one and set this as root page. You can find this option in the Edit Page mode filed under Behavior > Miscellaneous.

Create a new template on the root page

PageTsConfig

The Bootstrap Package has a lot of PageTsConfig defaults. In some cases it can be useful to deactivate some of them if you do not need them.

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

Bootstrap Package: Basic Constants

The basic settings will provide easy to use and understandable options for that are used mainly for styling and appearance.

page {
    logo {
        file = fileadmin/Theme/Logo.png
        height = 50
        width = 150
        alt =
    }
}

Bootstrap Package: Advanced Constants

The advanced settings should be used only if you really know what you are doing.

Backend Layout Keys

Backend Layout configurations via PageTS have native support in TYPO3 Versions >= 7.4. To make it more easy to upgrade new installations the prefix has been changed in the Bootstrap Package to match the new default that´s available in TYPO3 7.4 and newer versions.

The Prefix for Backend Layouts has been changed from "bootstrap_package" to "pagets". If you have been referring to these values before you need to adapt the new prefix for your own layouts in your TypoScript Configuration.

Please adapt to the new prefix and use the UpdateScript inside the Bootstrap Package extension from the extension manager. This will update all pages in the database and change the prefix from "bootstrap_package" to "pagets".

Note: The update script checks if an update is needed. If there is nothing to do the icon for the Update script will not be shown.

The new Provider in the TYPO3 Core is a port from the Bootstrap Package. That means that there is no need to do any further changes. The configuration stays exactly the same.

page = PAGE
page {
	10 = FLUIDTEMPLATE
	10 {
		templateName = TEXT
		templateName.stdWrap.cObject = CASE
		templateName.stdWrap.cObject {
			...

			bootstrap_package__default_clean = TEXT
			bootstrap_package__default_clean.value = DefaultClean

			...
		}
	}
}

page = PAGE
page {
	10 = FLUIDTEMPLATE
	10 {
		templateName = TEXT
		templateName.stdWrap.cObject = CASE
		templateName.stdWrap.cObject {
			...

			pagets__default_clean = TEXT
			pagets__default_clean.value = DefaultClean

			...
		}
	}
}

Support multilevel tree in subnavigation

Frontend output of the submenu has changed and the 3rd level is now displayed by default. You will need to adapt this change if you are not using the theme that comes with the Bootstrap Package.

<div class="hidden-print hidden-xs hidden-sm" role="complementary">
    <nav class="list-group">
        <a class="list-group-item active" href="#">Link 1</a>
        <a class="list-group-item active" href="#">Link 2</a>
    </nav>
</div>

<nav class="hidden-print hidden-xs hidden-sm" role="complementary">
    <ul class="nav nav-sidebar">
        <li><a href="#">Link 1</a></li>
        <li class="active">
            <a href="#">Link 2</a>
            <ul>
                <li class="active"><a href="#">Link 2.1">Link 2.1</a></li>
                <li><a href="#">Link 2.2">Link 2.2</a></li>
            </ul>
        </li>
    </ul>
</nav>

Drop version number for jQuery in filename

Previously we appended the version number to the jQuery filename, this has lead to missing jQuery versions if files were moved outside the bootstrap_package. We are not removing the version number to prevent jQuery is missing, this makes it also more easy to maintain in the build process. Check your TypoScript setup for possible overrides.

page.includeJSFooterLibs {
    jquery = {$page.includePath.javascript}Libs/jquery-x.xx.xx.min.js
}

page.includeJSFooterLibs {
    jquery = {$page.includePath.javascript}Libs/jquery.min.js
}

Use default Bootstrap markup for navigation toggle

In previous builds Glyphicon icons were used to represent the toggle state of the main menu for smaller screen sizes. Also the toggle js was always loaded in within the main.js javascript file from the Bootstrap Package. This has lead to problems when the icon font was changed or the main javascript file was externally overriden.

Instead of adapting the custom markup to your theme the default bootstrap markup is now in use, so its working now also out of the box also if the custom theme from the Bootstrap Package is not included. The toggle state is now solved via a CSS class toggle and a bit of custom css in the Bootstrap Package theme. The JavaScript toggle functionality has been move into a single file so it can be easily turned of if you do not need it.

<button class="navbar-toggle navbar-toggle-menu" type="button" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="glyphicon glyphicon-list"></span>
    <span class="sr-only">Toggle navigation</span>
</button>

<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

page.includeJSFooterlibs {
    #### Toggle collapsed CSS class on the navbar toggle button
    bootstrap_navbartoggle = {$page.includePath.javascript}Libs/bootstrap.navbartoggle.min.js
}

Custom Lightbox JavaScript has been moved

In order to make the package more modular we removed the main.js file in favor of single files for each functionality so it can be added or removed more easily.

page.includeJSFooterlibs {
    #### Basic lightbox implementation for bootstrap
    bootstrap_lightbox = {$page.includePath.javascript}Libs/bootstrap.lightbox.min.js
}

LESS files have been moved private to public

The resources folder in TYPO3 extensions is protected by default that made it impossible to make real usage of CSS SourceMaps. The files have been moved to Resources/Public, please ensure that your update your references to these files.

EXT:bootstrap_package/Resources/Private/Less/

EXT:bootstrap_package/Resources/Public/Less/

Corrected calculation of relative paths in build in LESS parser

Calculation of relative paths in less should now be resolved correctly. The wired relative paths you have to set before will no longer be working and you need to set the constants now relative from the LESS file that is parsed.

plugin.bootstrap_package {
    settings.less {
        icon-font-path = "../../../../../typo3conf/ext/bootstrap_package/Resources/Public/Fonts/"
    }
}

plugin.bootstrap_package {
    settings.less {
        icon-font-path = "../../Fonts/"
    }
}

Template Fallbacks

We enabled fallbacks for page templates, so you can extend the package without the need to copy all the templates if you want to change parts of the templates.

page.10 {
    file.stdWrap.cObject = CASE
    file.stdWrap.cObject {

        key.data = levelfield:-1, backend_layout_next_level, slide
        key.override.field = backend_layout

        bootstrap_package__default_clean = TEXT
        bootstrap_package__default_clean.value = {$page.fluidtemplate.templateRootPath}DefaultClean.html
        bootstrap_package__default_clean.insertData = 1

        ...

    }
    partialRootPath = {$page.fluidtemplate.partialRootPath}
    layoutRootPath = {$page.fluidtemplate.layoutRootPath}
}

page.10 {
    templateName = TEXT
    templateName.stdWrap.cObject = CASE
    templateName.stdWrap.cObject {

        key.data = levelfield:-1, backend_layout_next_level, slide
        key.override.field = backend_layout

        bootstrap_package__default_clean = TEXT
        bootstrap_package__default_clean.value = DefaultClean

        ...

    }
    templateRootPaths {
        0 = EXT:bootstrap_package/Resources/Private/Templates/Page/
        1 = {$page.fluidtemplate.templateRootPath}
    }
    partialRootPaths {
        0 = EXT:bootstrap_package/Resources/Private/Partials/Page/
        1 = {$page.fluidtemplate.partialRootPath}
    }
    layoutRootPaths {
        0 = EXT:bootstrap_package/Resources/Private/Layouts/Page/
        1 = {$page.fluidtemplate.layoutRootPath}
    }
}

Deprecated fallbacks

Fallbacks for deprecated backendlayout keys have been removed, use the alternatives instead.

Removed Templates

bootstrap_package__default_subnavigation
bootstrap_package__default_subnavigation_2_columns

Alternatives Templates

bootstrap_package__default_subnavigation_right
bootstrap_package__default_subnavigation_right_2_columns

Support for EXT:THEMES removed

Through lack of resources we removed the support for ext:themes. It is not planned to support ext:themes in the future again.

Bug reporting

Please open an issue at GitHub and describe your problem.

Clean code

We check the source code according to the our Coding Guidelines. To reformat the code automatically, you can use PHP CS Fixer as follows:

composer cgl

Local environment

The extension comes with a ready to use DDEV Local configuration. Type ddev start in the extension root folder to start the Docker container.

ddev launch will open the browser and head to the testing website. You can use ddev launch typo3 to get directly to the backend.

Build the frontend files

When you change any of the SCSS files, the combined and minified versions of the CSS have to be rebuild.

You can run them like this:

cd Build
npm ci
npm run build

Then commit any changes to files in folder Resources/Public/Css. If you ommit any of these steps the pipeline of the automatic checks fails for "build-frontend".

License

This project is released under the terms of the MIT license.

Slack

You can connect directly with us on Slack, the preferred instant communication platform of TYPO3 CMS developers. If you already have access to the TYPO3 Slack platform join the #bootstrap-package channel. If you don't have access yet, you can register at my.typo3.org.

X =

If you have any questions about this project or just want to talk: Send a tweet @benjaminkott.