[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.

[dgrammatiko]

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

PLEASE DO NOT DO THAT! Don't use HTMLHelper::_('bootstrap.framework');!

Instead read this: https://gist.github.com/dgrammatiko/efb3de4aa7cab4813a244f93f73cc0fd

[dgrammatiko]

@ceford One more thing, for validating my work on the Bootstrap pull request I had a dummy component https://github.com/dgrammatiko/bs5/tree/main/test_component
You're more than welcome to fork (bring fix anything that is broken, is abandoned for some time) and publish it as a guide in some Joomla org repo, etc so others have an easier path...

[ceford]

Thanks for that. I had just passed the bad solution back to the Forum but have now put in a link to your explanation. One problem: the original question came from a non-coder who just wants to paste html into an article or module. So where is the best place to insert those HTMLHelper lines. I could put your content into an item in the Joomla 4 Tutorials Project.

[dgrammatiko]

Any layout (of an extension, module, plugin or JLayout) is the ideal candidate for loading static assets. Actually, Joomla loads static assets (js,css) exclusively in layout files, something that should become the norm at some point as it increases interop and allows front end devs to do their job (hidden calls inside some extension logic is a nightmare in case you need to override that asset). Hopefully the link I shared above in some form will end up in the official documentation

[ReLater]

PLEASE DO NOT DO THAT! Don't use HTMLHelper::_('bootstrap.framework');!

I had just passed the bad solution back

The question in issue(!) not forum was: A non PHP coder wants to test HTML snippets from Bpootstrap. So my answer was completely correct and not bad. You can afterwards work with the data-bs-* attributes in HTML and all is fine.

But an extension developer should use the professor lines.

So where is the best place to insert those HTMLHelper lines. I could put your content into an item in the Joomla 4 Tutorials Project.

A simple solution could be.

• Create a module override, e.g. html/mod_custom/bootstrapModal.php.
• Enter your PHP Bootstrap HTMLHelper line(s) for modals in that PHP file.
• Load this custom module with layout bootstrapModal and module style none on pages where needed. Advanced Module Manager can help to avoid too many loadings on pages where not needed.

BTW: In many cases you don't need this extra Joomla 4 configuration (JS) because HTML and data-bs-* attributes are sufficient if you use the according bootstrap CSS. But I don't know if Joomla 4 has castrated BS JS somehow too make it more complicated than it must be ;-) In other words: Bootstrap finds it's dropdown allown and doesn't need asdditional JS selector configuration shit for that.

[dgrammatiko]

So my answer was completely correct and not bad.

It is bad in terms that the bootstrap.framework is already deprecated and will be removed, so better to preach what will be more sustainable instead 😉

[ceford]

I spent most of today putting together a tutorial which includes the documentation provided by @dgrammatiko and suggests a solution along the lines outlined by @ReLater, which I have only just read. There are some problems, or misunderstanding on my part. It is here: https://docs.joomla.org/J4.x:Using_Bootstrap_in_Joomla_4 For example, Offcanvas seems to be absent from Joomla. I am worried that the tutorial might lead novices astray. I will change it if needs be.

[brianteeman]

off canvas was only introduced in beta3 of bootstrap about 48hours ago

[dgrammatiko]

Offcanvas seems to be absent

Should be available with the latest nightly build, the PR #32827 just landed a few hours ago (worst case scenario, tomorrow's build).

FWIW although the idea of using modules to solve the problem of the article seems doable fundamentally is wrong, you need to use a plugin type content and there either check what interactive component you need or use a combo with some custom fields (a multi-select field can indicate which bootstrap components to load). The custom field approach should be more performant (depending of course on the length of the actual article, etc). My 2c here

[ceford]

Thanks for the feedback. I have created a plugin to look for trigger text in the article as an alternative to using a mod_custom override. I also appreciate that it would be best to use a custom field - looking at that next. The mod_custom override still seems valid if users want to put bs component code in a module. Advanced Module Manager was mentioned but I don't know what that is and I don't know how to trigger a plugin from a module. It seems a new type of custom HTML module is required. Tutorial revised to reflect all this so far.

[ceford]

A custom field of checkboxes does not work - the field content appears as text in the article and it looks like that content is already generated so the onPrepareContent trigger comes too late to use the data but remove it from the output.

[ceford]

I created a custom Custom HTML module with check boxes to select which Bootstrap components to load support for. This is really simple for (non-coding) users and can be used in a module position or within an article. And there can be any number of instances for different purposes.

I improved and extended the tutorial to provide example usage of all of the Interactive Components. One thing I was uncertain about was whether to use .btn and a tag selectors for Tooltips (and Popovers), or use .hastooltip, or rely on data-bs-toggle="tooltip".

Tutorial: https://docs.joomla.org/J4.x:Using_Bootstrap_Components_in_Joomla_4

[ceford]

I think the Tutorial is a good enough answer for now.

[sakiss]

@dgrammatiko @ceford Any idea how to load the bootstrap spinners component?

[ceford]

I would read the Bootstrap docs - it is a html/css only component - no javascript needed.

[dgrammatiko]

Spinners are a css/html thing, so I guess copy/pasting the markup from their docs should just work

[sakiss]

Unfortunately not.
I tried that in the backend and seems like the respective css is missing.