In Joomla 6, the Web Asset Manager is the standard system for managing CSS and JavaScript.
Instead of hardcoding cssa nd javascript files into your template, you define them in a joomla.asset.json file located in your extension or template's media folder.
media/com_example/joomla.asset.json
Joomla automatically searches for these JSON files in...
- media/vendor
- media/system
- active component
- template folders
Sample joomla.asset.json...
{
"$schema": "https://developer.joomla.org",
"name": "com_example",
"version": "1.0.0",
"assets": [
{
"name": "foobar-style",
"type": "style",
"uri": "com_example/foobar.css"
},
{
"name": "foobar-script",
"type": "script",
"uri": "com_example/foobar.js",
"dependencies": [
"core"
],
"attributes": {
"defer": true
}
}
]
}
Then in your template, component or module php code, we call the assets with the following...
// Get the manager
$wa = $this->getApplication()->getDocument()->getWebAssetManager();
// Use a specific script or style by its unique name
$wa->useScript('foobar-script');
$wa->useStyle('foobar-style');
Calling Bootstrap
In the php file...
// Load the full Bootstrap CSS
$wa->useAsset('style', 'bootstrap.css');
// Load Bootstrap JavaScript components
// It is recommended to only load what you need to keep the site fast
$wa->useAsset('script', 'bootstrap.collapse');
$wa->useAsset('script', 'bootstrap.dropdown');
Example Bootstrap scripts:
bootstrap.alert
bootstrap.button
bootstrap.carousel
bootstrap.collapse
bootstrap.dropdown
bootstrap.modal
bootstrap.offcanvas
bootstrap.popover
bootstrap.scrollspy
bootstrap.tab
bootstrap.toast
bootstrap.tooltip
Bootstrap is already pre-registered in the Joomla Core asset registry. Joomla loads a set of core JSON files automatically from media/system and media/vendor before your template even runs.
You just need to call bootstrap in the php file.