1. Интерактивные компоненты
2. Подключение иконок Bootstrap

Интерактивные компоненты Bootstrap 5 + Joomla 5

В файле index.php можно включить интерактивность (часть JavaScript) перед закрывающем тегом PHP (открывающий тег <?php закрывающий тег ?>)

Пример:

<?php
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.modal', '.selector', []);
?>

На примере в  файле index.php шаблона Cassiopeia:

<?php

/**
 * @package     Joomla.Site
 * @subpackage  Templates.cassiopeia
 *
 * @copyright   (C) 2017 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Uri\Uri;

/** @var Joomla\CMS\Document\HtmlDocument $this */

$app = Factory::getApplication();
$wa  = $this->getWebAssetManager();

// Browsers support SVG favicons
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']);
$this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']);
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']);

// Detecting Active Variables
$option   = $app->input->getCmd('option', '');
$view     = $app->input->getCmd('view', '');
$layout   = $app->input->getCmd('layout', '');
$task     = $app->input->getCmd('task', '');
$itemid   = $app->input->getCmd('Itemid', '');
$sitename = htmlspecialchars($app->get('sitename'), ENT_QUOTES, 'UTF-8');
$menu     = $app->getMenu()->getActive();
$pageclass = $menu !== null ? $menu->getParams()->get('pageclass_sfx', '') : '';

// Color Theme
$paramsColorName = $this->params->get('colorName', 'colors_standard');
$assetColorName  = 'theme.' . $paramsColorName;
$wa->registerAndUseStyle($assetColorName, 'media/templates/site/cassiopeia/css/global/' . $paramsColorName . '.css');

// Use a font scheme if set in the template style options
$paramsFontScheme = $this->params->get('useFontScheme', false);
$fontStyles       = '';

if ($paramsFontScheme) {
    if (stripos($paramsFontScheme, 'https://') === 0) {
        $this->getPreloadManager()->preconnect('https://fonts.googleapis.com/', ['crossorigin' => 'anonymous']);
        $this->getPreloadManager()->preconnect('https://fonts.gstatic.com/', ['crossorigin' => 'anonymous']);
        $this->getPreloadManager()->preload($paramsFontScheme, ['as' => 'style', 'crossorigin' => 'anonymous']);
        $wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme, [], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'', 'crossorigin' => 'anonymous']);

        if (preg_match_all('/family=([^?:]*):/i', $paramsFontScheme, $matches) > 0) {
            $fontStyles = '--cassiopeia-font-family-body: "' . str_replace('+', ' ', $matches[1][0]) . '", sans-serif;
--cassiopeia-font-family-headings: "' . str_replace('+', ' ', isset($matches[1][1]) ? $matches[1][1] : $matches[1][0]) . '", sans-serif;
--cassiopeia-font-weight-normal: 400;
--cassiopeia-font-weight-headings: 700;';
        }
    } else {
        $wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme, ['version' => 'auto'], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'']);
        $this->getPreloadManager()->preload($wa->getAsset('style', 'fontscheme.current')->getUri() . '?' . $this->getMediaVersion(), ['as' => 'style']);
    }
}

// Enable assets
$wa->usePreset('template.cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
    ->useStyle('template.active.language')
    ->useStyle('template.user')
    ->useScript('template.user')
    ->addInlineStyle(":root {
--hue: 214;
--template-bg-light: #f0f4fb;
--template-text-dark: #495057;
--template-text-light: #ffffff;
--template-link-color: #2a69b8;
--template-special-color: #001B4C;
$fontStyles
}");

// Override 'template.active' asset to set correct ltr/rtl dependency
$wa->registerStyle('template.active', '', [], [], ['template.cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')]);

// Logo file or site title param
if ($this->params->get('logoFile')) {
    $logo = HTMLHelper::_('image', Uri::root(false) . htmlspecialchars($this->params->get('logoFile'), ENT_QUOTES), $sitename, ['loading' => 'eager', 'decoding' => 'async'], false, 0);
} elseif ($this->params->get('siteTitle')) {
    $logo = '<span title="' . $sitename . '">' . htmlspecialchars($this->params->get('siteTitle'), ENT_COMPAT, 'UTF-8') . '</span>';
} else {
    $logo = HTMLHelper::_('image', 'logo.svg', $sitename, ['class' => 'logo d-inline-block', 'loading' => 'eager', 'decoding' => 'async'], true, 0);
}

$hasClass = '';

if ($this->countModules('sidebar-left', true)) {
    $hasClass .= ' has-sidebar-left';
}

if ($this->countModules('sidebar-right', true)) {
    $hasClass .= ' has-sidebar-right';
}

// Container
$wrapper = $this->params->get('fluidContainer') ? 'wrapper-fluid' : 'wrapper-static';

$this->setMetaData('viewport', 'width=device-width, initial-scale=1');

$stickyHeader = $this->params->get('stickyHeader') ? 'position-sticky sticky-top' : '';

// Defer fontawesome for increased performance. Once the page is loaded javascript changes it to a stylesheet.
$wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet');

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.modal', '.selector', []);
?>

 
Accordion (создание аккордеона) - пример
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.startAccordion', '#selector', []);
Alert (сообщения обратной связи) - пример
\Joomla\CMS\HTML\HtmlHelper::_('bootstrap.alert', '.selector');
Button (кнопки) - пример
\Joomla\CMS\HTML\HtmlHelper::_('bootstrap.button', '.selector');
Carousel (слайд-шоу) - пример
\Joomla\CMS\HTML\HtmlHelper::_('bootstrap.carousel', '.selector', []);
Collapse (кнопки отображения и скрытия содержимого) - пример
\Joomla\CMS\HTML\HtmlHelper::_('bootstrap.collapse', '.selector', []);
Dropdown (выпадающие списки ) - пример
\Joomla\CMS\HTML\HtmlHelper::_('bootstrap.dropdown', '.selector', []);
Modal (лайтбокс всплывающее окно) - пример
\Joomla\CMS\HTML\HtmlHelper::_('bootstrap.modal', '.selector', []);
Offcanvas (скрытые боковые панели для навигации) - пример
\Joomla\CMS\HTML\HtmlHelper::_('bootstrap.offcanvas', '.selector', []);
Popover (всплывающие окна) - пример
\Joomla\CMS\HTML\HtmlHelper::_('bootstrap.popover', '.selector', []);
Scrollspy (навигация со скроллом) - пример
\Joomla\CMS\HTML\HtmlHelper::_('bootstrap.scrollspy', '.selector', []);
Tab (базовая навигация) - пример
\Joomla\CMS\HTML\HtmlHelper::_('bootstrap.tab', '.selector', []);
Tooltip (всплывающие подсказки) - пример
\Joomla\CMS\HTML\HtmlHelper::_('bootstrap.tooltip', '.selector', []);
Toast (уведомления с закрытием) - пример
\Joomla\CMS\HTML\HtmlHelper::_('bootstrap.toast', '.selector', []);

Подключение иконок Bootstrap