Skip to content

Instantly share code, notes, and snippets.

@dgrammatiko

dgrammatiko/Bootstrap5-j4.md

Created March 24, 2021 13:21
Show Gist options
  • Save dgrammatiko/efb3de4aa7cab4813a244f93f73cc0fd to your computer and use it in GitHub Desktop.
Save dgrammatiko/efb3de4aa7cab4813a244f93f73cc0fd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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)
@rbuelund
Copy link

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 ?

@dgrammatiko
Copy link
Author

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

@schultz-it-solutions
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment