Bootstrap5-j4.md

Using Bootstrap in Joomla 4

Joomla 4 introduces a modular approach for interactive components

• What is a modular approach?
• The functionality is broken down into individual components, files. There is no one file approach as it was with Bootstrap in Joomla 3. This was done for efficiency and performance gains (send only the code that is needed instead of delivering everything in case some page will need so component).

How to deal with Interactive components

• Load what you need per case! There are helper functions that will help you achieve this and, it is dead easy just call the function with the appropriate arguments.

Alert

Assuming you have the HTML part already in your Layout, you will also need to include the interactivity (the javascript part):

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.alert', '.selector');

• The .selector refers to the CSS selector for the alert. You can call this function multiple times with different CSS selectors
• No extra options available

Button

Assuming you have the HTML part already in your Layout, you will also need to include the interactivity (the javascript part):

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.button', '.selector');

• The .selector refers to the CSS selector for the button. You can call this function multiple times with different CSS selectors
• No extra options available

Carousel

Assuming you have the HTML part already in your Layout, you will also need to include the interactivity (the javascript part):

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

• The .selector refers to the CSS selector for the carousel. You can call this function multiple times with different CSS selectors
• The third argument refers to the options available for carousel

Options for the carousel can be:

• interval, number, default:5000, The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
• keyboard, boolean, default:true Whether the carousel should react to keyboard events.
• pause, string|boolean, hover Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
• slide, string|boolean, default:false Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.

Collapse

Assuming you have the HTML part already in your Layout, you will also need to include the interactivity (the javascript part):

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

• The .selector refers to the CSS selector for the collapse. You can call this function multiple times with different CSS selectors
• The third argument refers to the options available for collapse

Options for the collapse can be:

• parent, string, default:false If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown.
• toggle, boolean default:true Toggles the collapsible element on invocation

Dropdown

Assuming you have the HTML part already in your Layout, you will also need to include the interactivity (the javascript part):

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

• The .selector refers to the CSS selector for the dropdown. You can call this function multiple times with different CSS selectors
• The third argument refers to the options available for dropdown

Options for the collapse can be:

• flip, boolean, default:true Allow Dropdown to flip in case of an overlapping on the reference element
• boundary, string, default:scrollParent Overflow constraint boundary of the dropdown menu
• reference, string, default:toggle Reference element of the dropdown menu. Accepts toggle or parent
• display, string, default:dynamic By default, we use Popper for dynamic positioning. Disable this with static

Modal

Assuming you have the HTML part already in your Layout, you will also need to include the interactivity (the javascript part):

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

• The .selector refers to the CSS selector for the modal. You can call this function multiple times with different CSS selectors
• The third argument refers to the options available for modal

Options for the modal can be:

• backdrop, string|boolean default:true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
• keyboard, boolean default:true Closes the modal when escape key is pressed
• focus, boolean default:true Closes the modal when escape key is pressed

Offcanvas

Assuming you have the HTML part already in your Layout, you will also need to include the interactivity (the javascript part):

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

• The .selector refers to the CSS selector for the offcanvas. You can call this function multiple times with different CSS selectors
• The third argument refers to the options available for offcanvas

Options for the offcanvas can be:

• backdrop, boolean, default:true Apply a backdrop on body while offcanvas is open
• keyboard, boolean, default:true Closes the offcanvas when escape key is pressed
• scroll, boolean, default:false Allow body scrolling while offcanvas is open

Popover

Assuming you have the HTML part already in your Layout, you will also need to include the interactivity (the javascript part):

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

• The .selector refers to the CSS selector for the popover. You can call this function multiple times with different CSS selectors
• The third argument refers to the options available for popover

Options for the popover can be:

• animation, boolean, default:true Apply a CSS fade transition to the popover
• container, string|boolean, default:false Appends the popover to a specific element. Eg.: body
• content, string, default:null Default content value if data-bs-content attribute isn't present
• delay, number, default:0 Delay showing and hiding the popover (ms) does not apply to manual trigger type
• html, boolean, default:true Insert HTML into the popover. If false, innerText property will be used to insert content into the DOM.
• placement, string, default:right How to position the popover - auto | top | bottom | left | right. When auto is specified, it will dynamically reorient the popover
• selector, string, default:false If a selector is provided, popover objects will be delegated to the specified targets.
• template, string, default:null Base HTML to use when creating the popover.
• title, string, default:null Default title value if title tag isn't present
• trigger, string, default:click How popover is triggered - click | hover | focus | manual
• offset, integer, default:0 Offset of the popover relative to its target.

Scrollspy

Assuming you have the HTML part already in your Layout, you will also need to include the interactivity (the javascript part):

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

• The .selector refers to the CSS selector for the scrollspy. You can call this function multiple times with different CSS selectors
• The third argument refers to the options available for scrollspy

Options for the Scrollspy can be:

• offset number Pixels to offset from top when calculating position of scroll.
• method string Finds which section the spied element is in.
• target string Specifies element to apply Scrollspy plugin.

Tab

Assuming you have the HTML part already in your Layout, you will also need to include the interactivity (the javascript part):

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

• The .selector refers to the CSS selector for the tab. You can call this function multiple times with different CSS selectors
• The third argument refers to the options available for tab

Options for the Tab can be:

Tooltip

Assuming you have the HTML part already in your Layout, you will also need to include the interactivity (the javascript part):

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

• The .selector refers to the CSS selector for the tooltip. You can call this function multiple times with different CSS selectors
• The third argument refers to the options available for tooltip

Options for the tooltip can be:

• animation, boolean apply a css fade transition to the popover
• container, string|boolean Appends the popover to a specific element: { container: body }
• delay, number|object delay showing and hiding the popover (ms) - does not apply to manual trigger type If a number is supplied, delay is applied to both hide/show Object structure is: delay: { show: 500, hide: 100 }
• html, boolean Insert HTML into the popover. If false, jQuery's text method will be used to insert content into the dom.
• placement, string|function how to position the popover - top | bottom | left | right
• selector string If a selector is provided, popover objects will be delegated to the specified targets.
• template, string Base HTML to use when creating the popover.
• title, string|function default title value if title tag isn't present
• trigger, string how popover is triggered - hover | focus | manual
• constraints, array An array of constraints - passed through to Popper.
• offset, string Offset of the popover relative to its target.

Toast

Assuming you have the HTML part already in your Layout, you will also need to include the interactivity (the javascript part):

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

• The .selector refers to the CSS selector for the toast. You can call this function multiple times with different CSS selectors
• The third argument refers to the options available for toast

Options for the toast can be:

• animation, boolean, deafult:true Apply a CSS fade transition to the toast
• autohide, boolean, deafult:true Auto hide the toast
• delay, number , deafult:5000 Delay hiding the toast (ms)

Thank you!

It's great!
thanks for the work you've done

@dgrammatiko
And what about this method of using assets? Is it relevant for bootstrap?

$wa = Factory::getDocument()->getWebAssetManager();
$wa->useScript('keepalive')->useScript('form.validate');

Is it relevant for bootstrap?

Yes, you can use this way to load any of the bootstrap scripts. The syntax is also very similar to the HTMLHelper, eg:

// HTMLHelper way:
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.toast');

// Web Assets way:
$wa = Factory::getDocument()->getWebAssetManager();
$wa->useScript('bootstrap.toast');

So the only thing is missing in Web Assets that you cannot provide additional selector class?

So the only thing is missing in Web Assets that you cannot provide additional selector class?

The HTMLHelper can have arguments (selector, options) thus you can use it without the need of data-*
The W-A just loads the script (so will work only for components that have all the options as data-*

That's what I thought. Thank you one more time for useful information 👍

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.alert', '.selector');

In which file would this need to be added?

Inside the layout that you want to have the alert. Fwiw Joomla already loads another alert so maybe would be easier to reuse that one: https://joomla-projects.github.io/custom-elements/#/alert

Thanks for this. I'm using it to try and debug why I can't get toast, popover, tabs and tooltips to work. Even tried the bootstrap 5 test component that you wrote.

@brianteeman care to share some code? (you can use Skype/twitter/fb/...)

Edit: So I tried the popup and you're right the example component doesn't work anymore. I think at some point we changed the HTMLHelper methods to always require a selector and the code in that component doesn't reflect that. Adding selector to both the button and the helper method call should fix that:

HTMLHelper::_('bootstrap.popover', '#bs-popover');

<div class="bd-example">
  <button id="bs-popover" type="button" class="btn btn-lg btn-danger" title="" data-bs-content="And here's some amazing content. It's very engaging. Right?" data-bs-original-title="Popover title">Click to toggle popover</button>
</div>

An alternative is to use the WAM and control the interactive component through data attributes (most of them are already there):

Factory::getDocument()->getWebAssetManager()->useScript('bootstrap.popover');

If I have a form with three radio type inputs in a group in a view - how would use the above to toggle the buttons ? In Bootstrap 2.3 I used data-toggle="buttons-radio" - but what now in Bootstrap 5 and Joomla 4 ?
What I need is a little like this https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=radio-button-groups - but it does not seem to work in Joomla 4 ?

@rbuelund you don't need any js for this case, check: https://codepen.io/dgrammatiko/pen/ExQwagV

regarding TAB js call: as far as I found out, the call needs to be " 'bootstrap.tab' ", rather than "'bootstrap.tabs'" (plural)

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

you might want to update the respective paragraph here