Extension:Bootstrap

MediaWiki extensions manual

Bootstrap Release status: stable
Implementation	Skin
Description	Provides the Bootstrap 4 web front-end framework
Author(s)	Stephan Gambke (F.trotttalk)
Maintainer(s)	Professional Wiki
Latest version	4.6.2 (2023-06-06)
Compatibility policy	Master maintains backward compatibility.
MediaWiki	1.29+
PHP	5.6+
Database changes	No
Composer	mediawiki/bootstrap
Hooks used SetupAfterCache
Licence	GNU General Public License 3.0 or later
Download	GitHub: project page git repository URL commit history Note: No localisation updates are provided by translatewiki.net . README on GitHub Changelog on GitHub

The Bootstrap extension provides the Bootstrap 4 (documentation) web front-end framework to MediaWiki. It can be activated directly or used from skins or extensions.

Installation

See the installation instructions for information on how to install this extension.

Usage

Within a skin

Use \Bootstrap\BootstrapManager::getInstance() to get the singleton managing the Bootstrap framework.

With the returned object,

• add Bootstrap modules using addBootstrapModule(), addCoreBootstrapModules(), and addAllBootstrapModules()
• set SCSS variables using setScssVariable() and setScssVariables()
• add style files using addStyleFile()
• add cache trigger files using addCacheTriggerFile()

Finally to add the Bootstrap styles and javascript to the page use $out->addModuleStyles( 'ext.bootstrap.styles' ) for styles and $out->addModules( 'ext.bootstrap.scripts' ) for scripts.

For an example on how to include Bootstrap styles in a skin have a look at the Chameleon skin.

Standalone

To simply enable Bootstrap styles on all pages add the following code to your "LocalSettings.php" file:

$wgHooks['SetupAfterCache'][] = function(){
	\Bootstrap\BootstrapManager::getInstance()->addAllBootstrapModules();
	return true;
};


$wgHooks['ParserAfterParse'][]=function( Parser &$parser, &$text, StripState &$stripState ){
	$parser->getOutput()->addModuleStyles( ['ext.bootstrap.styles'] );
	$parser->getOutput()->addModules( ['ext.bootstrap.scripts'] );
	return true;
};

Known issues

Effect on Universal Language Selector

If you have the Universal Language Selector (ULS) extension installed, installing the Bootstrap extension will make the ULS's dropdown-menu look disordered and break its search bar (screenshot on GitHub). However, this can be fixed by adding the following code to MediaWiki:Common.css:

.uls-language-list {
        display: block;
}

.uls-search {
        display: block;
}

See also

Websites

• the Bootstrap framework homepage
• the SASS/SCSS homepage
• the Bootstrap for MediaWiki wiki

Skins and Extensions

• the Chameleon skin that uses this extension
• the Medik skin that also uses Bootstrap
• the BootstrapComponents extension that uses this extension and lets editors utilize its potential inside wiki markup

Blog post

• Enhance Your MediaWiki with Bootstrap — Blog post about improving your wiki by integrating it with Bootstrap and its components; published January 20, 2024