This article shows how we use Bootstrap 5 in our modules for Joomla 5.
Joomla 5 comes with Bootstrap 5, but not all the Bootstrap js is activated. If you need to use these Bootstrap scripts - one way to do this is using webassets.
Create a Media Folder
Create a media folder with js and css subfolders.
Write your module mod_mymodule.css and mod_mymodule.js code and store them in their respective folders.
joomla.asset.json File
Create a joomla.asset.json file and also store it in the media folder. See sample below.
Here we are invoking the bootstrap dropdown script for use in in our module. Often it is the bootstrap carousel script. These scripts are already packaged with Joomla5 and can be found in the media/vendor folder.
Note the "attributes": {"type": "module" }
part - otherwise you module will override your template css.
{
"$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
"name": "mod_organic_menu",
"version": "CVS: 5.0.1",
"license": "GNU General Public License version 2 or later; see LICENSE.txt",
"assets": [
{
"name": "mod_mymenu",
"type": "style",
"uri": "mod_mymenu/mod_mymenu.css",
"attributes": {"type": "module" }
},
{
"name" : "bootstrap",
"description": "Bootstrap 5 CSS",
"type": "style",
"uri": "vendor/bootstrap/bootstrap.min.css",
"attributes": {"type": "module" }
},
{
"name": "bootstrap.dropdown",
"type": "script",
"uri": "vendor/bootstrap/dropdown.min.js",
"dependencies": ["core"],
"attributes": { "type": "module" },
"package": "bootstrap",
"version": "5.3.2"
},
{
"name" : "bootstrap",
"description" : "Bootstrap 5 preset",
"type": "preset",
"dependencies": [
"bootstrap.dropdown#script",
"bootstrap#style"
]
}
]
}
Manifest File (XML)
In your Joomla module manifest xml file, add these lines so that your media files will be installed in the correct media folder on the server ...
<media destination="mod_mymodule" folder="media">
<folder>css</folder>
<folder>js</folder>
<filename>joomla.asset.json</filename>
</media>
Default.php Template file
In the module tmpl default.php file, add these lines
$doc = Factory::getApplication()->getDocument();
$wa = $doc->getWebAssetManager();
$wa->getRegistry()->addExtensionRegistryFile('mod_mymodule');
// Import CSS
$wa->useStyle('mod_mymodule');
// Load up Bootstrap
$wa->usePreset ( 'bootstrap' ) ;
References:
Joomla5 Docs Web Asset Manager:
https://manual.joomla.org/docs/general-concepts/web-asset-manager/#stage-1-registering-assets