- 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).
- 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.
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
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
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.
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
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 elementboundary
, string, default:scrollParent
Overflow constraint boundary of the dropdown menureference
, string, default:toggle
Reference element of the dropdown menu. Acceptstoggle
orparent
display
, string, default:dynamic
By default, we use Popper for dynamic positioning. Disable this withstatic
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 pressedfocus
, boolean default:true
Closes the modal when escape key is pressed
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 openkeyboard
, boolean, default:true
Closes the offcanvas when escape key is pressedscroll
, boolean, default:false
Allow body scrolling while offcanvas is open
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 popovercontainer
, 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 presentdelay
, number, default:0
Delay showing and hiding the popover (ms) does not apply to manual trigger typehtml
, boolean, default:true
Insert HTML into the popover. Iffalse
, 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 popoverselector
, 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 iftitle
tag isn't presenttrigger
, string, default:click
How popover is triggered -click
|hover
|focus
|manual
offset
, integer, default:0
Offset of the popover relative to its target.
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.
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:
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 popovercontainer
, 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 iftitle
tag isn't presenttrigger
, string how popover is triggered - hover | focus | manualconstraints
, array An array of constraints - passed through to Popper.offset
, string Offset of the popover relative to its target.
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 toastautohide
, boolean, deafult:true
Auto hide the toastdelay
, number , deafult:5000
Delay hiding the toast (ms)
Thank you!