[4.0] How to use Bootstrap components in an article.

[ceford]

Steps to reproduce the issue

This question arises from a Forum discussion about using Bootstrap modal and carousel 'components' within an article. The user said:

I've been pasting HTML into modules for years, because it's easier/quicker to type HTML in my offline editor.

That does not work in Joomla 4 because the javascript for those components is not loaded and I don't see an obvious way to provoke loading. A plugin might be needed - but what trigger to uee?

Test: go to https://getbootstrap.com/docs/5.0/components/modal/#live-demo and copy the code there into an article. Click the button in the front end.

Expected result

Modal opens

Actual result

Modal does not open.

System information (as much as possible)

Additional comments

[ReLater]

Add HTMLHelper::_('bootstrap.framework');or JHtml::_('bootstrap.framework'); whereever you want, e.g. in the template index.php.

That will load the whole JS. 14 files or so. Juhuu!

Use JHtml::_('bootstrap.modal');if you just need the modal JS. Only 2 files will be loaded. The BS base file and the modal module JS.

Use JHtml::_('bootstrap.loadCss', true); to load the whole Bootstrap CSS.

Or use the new WebAsset Manager codes. The methods above are a shortcut for that.

Or short: Nothing has changed. If you want Bootstrap you have to load it somewhere. In Joomla 3 nearly everthing needed Boostrap. So it nearly always loaded somehow somewhere Bootstrap.

Any extension has to fire the according lines if it needs that JavaScript like it always was to go sure that the files will be loaded in the template. You can't rely on that in J4.

Cassiopaia isn't a Bootstrap template per se even if it uses many parts from Bootstrap SCSS/css. But you find a line <?php HTMLHelper::_('bootstrap.collapse', '.navbar-toggler'); ?> in index.php. Therefore it only loads the Bootstrap base file and the collapse module JS and the JS configuration for .navbar-toggle.