Feeling Lucky
?
[#32841] - [4.0] How to use Bootstrap components in an article.
- Closed
- 24 Mar 2021
- Medium
- Build: Beta8-Dev
- # 32841
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
joomla-cms-bot
- 
Quy
- | Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-03-24 19:47:14 |
| Closed_By | ⇒ | Quy |
Add
HTMLHelper::_('bootstrap.framework');orJHtml::_('bootstrap.framework');whereever you want, e.g. in the templateindex.php.That will load the whole JS. 14 files or so. Juhuu!
Use
JHtml::_('bootstrap.modal');if you just need themodalJS. 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 thecollapsemodule JS and the JS configuration for.navbar-toggle.