Joomla! Documentation - User contributions [en]

J4.x:Using Bootstrap Components in Joomla 4

2021-05-03T22:10:13Z

AMurray: /* Example 3: Corousel */ typo correction.

== Introduction ==

=== Bootstrap Components ===

Some of the components described in the Bootstrap documentation use CSS only. For example, the Breadcrumbs component is rendered with CSS and requires no Javascript support. Others respond to user actions such as click or hover, and need Javascript report. The latter are referred to here as Interactive Components. This article explains how to use them in Articles and a Custom Module.

See: [https://getbootstrap.com/docs/5.0/getting-started/introduction/ Bootstrap Documentation]

=== Joomla 4 introduces a modular approach for Interactive Components ===

* What is a modular approach?
* The functionality is broken down into individual components supported by individual files. There is no '''one file''' approach as it was with Bootstrap in Joomla 3. The modular approach is more efficient and offers performance gains (send only the code that is needed instead of delivering everything in case some page will need some component).

=== Using Interactive Components: Coders ===

* Load what you need per case! There are helper functions to set up individual components with appropriate arguments.
* See the list of Bootstrap Interactive Components.

=== Using Interactive Components: Non-Coders ===

* Using components in articles is not so easy because the helper functions cannot be called from an article or standard Custom HTML module. Three possible solutions are suggested later in this tutorial:
** A custom module
** A custom plugin
** A custom module override
* Skip or scan the list of Bootstrap Interactive Components. You won't be using these function calls directly.

== Bootstrap Interactive Components ==

Please note that as of Joomla Beta8-Dev there appear to be some problems with some of these components!

=== Alert ===

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

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

* 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):

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

* 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):

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

* 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):

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

* 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):

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

* 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):

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

* 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 ===

'''Notice: as of Beta8-Dev this component is not present in Joomla!'''

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

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

* 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):

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

* 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):

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

* 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):

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

* 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):

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

* 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):

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

* 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)

=== See Also ===

* '''Accordian''' uses Collapse to display panels of data.
* '''List Group''' can be combined with Tab to display tabbed content.

== Using Bootstrap Components in Articles ==

The HTML mark-up for most components can be included in an article or a module that can itself be included in an article. The snag is that the HTMLHelper call to set up the Javascript support cannot be included there. There are several possible approaches to this problem. Three approaches are suggested here, using a custom Module, using a Plugin or using a Template override.

'''Caution:''' The TinyMCE and JCE editors remove white space on Save and make editing code difficult! The simple solution is to go to the top right of your Administrator screen and select {{rarr|User Menu,Edit Account}} and set the Editor to Code Mirror.

== Approach 1: Using a custom Custom module ==

This is probably the least error prone approach because the Bootstrap component support options are selected with check boxes. The steps involved are as follows:

* Download, install and enable this module: https://github.com/ceford/j4xdemos-mod-custom-bscompos/raw/master/mod_custom_bscompos.zip
* From the Administrator menu go to {{rarr|Content,Site Modules,New}}
* Select '''Custom BS Components'''
* Enter a Title
* Toggle the Editor to plain text mode and paste in or type in the HTML code for the component you want to use.
* In the Options tab scroll down to the list of BS Components and select type of component in this instance of the module. Note that you can select more than one if your using more than one component.
* Select a module Position: either
** a template defined position if you want to use the module in a specific location or
** type in a position if you wish to use the module within a specific article: in the article type in <div>{loadposition whatever}</div>
* Save and go to the site to Test!

=== Selectors ===

For some components Javascript action is triggered by a specific '''class''' in the HTML code. In other components action is triggered by a '''data-bs-whatever''' attribute. The following are the current triggers and may change:

* '''Alert''' triggered by class="alert ..."
* '''Button''' triggered by data-bs-toggle="button"
* '''Carousel''' triggered by data-bs-ride="whatever"
* '''Collapse''' triggered by data-bs-toggle="collapse"
* '''Dropdown''' triggered by data-bs-toggle="dropdown"
* '''Modal''' triggered by data-bs-toggle="modal"
* '''Offcanvas''' triggered by data-bs-toggle="offcanvas"
* '''Popover''' triggered by class="btn ..." or <a ...> tag (could be changed to class="haspopover ...") AND data-bs-toggle="popover"
* '''Scrollspy''' triggered by data-bs-spy="scroll"
* '''Tab''' triggered by data-bs-toggle="tab"
* '''Toast''' triggered by class="toast ..."
* '''Tooltip''' triggered by class="btn ..." or <a ...> tag (could be changed to class="hastooltip ...") AND data-bs-toggle="tooltip"

=== Example 1: Alert ===

Alerts may be used in html code without Javascript support. This is only needed for the dismiss capability. HTML code example:

<pre><div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div></pre>

Example result of including a module in an article:

[[File:using-bootstrap-components-in-joomla-4-alert-demo.png|border|Alert Demo]]

Note that without Javascript support the alert will appear exactly as above but a click on the close button [X] will not dismiss the alert. Also, the alert will appear on every page load.

=== Example 2: Buttons ===

Buttons may be used in HTML code without Javascript support. This is only needed for the sometimes subtle change of style applied to buttons with a change of state, styled active. Bootstrap example code:

<pre><p><button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button></p></pre>
<pre><p><a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a></p></pre>

With this style in the template user.css:
<pre>.btn.btn-primary.active {
background-color: green;
}</pre>

[[File:using-bootstrap-components-in-joomla-4-button-demo.png|border|Button Demo]]

The buttons toggle between blue and green.

=== Example 3: Carousel ===

The Carousel offers a slide show cycling through a series of images or text panes. The following example used images from the Joomla 4 Sample. Bootstrap code:

<source lang="php">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button class="active" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active"><img class="d-block w-100" src="images/sampledata/cassiopeia/nasa1-1200.jpg" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item"><img class="d-block w-100" src="images/sampledata/cassiopeia/nasa2-1200.jpg" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item"><img class="d-block w-100" src="images/sampledata/cassiopeia/nasa3-1200.jpg" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="visually-hidden">Next</span>
</button>
</div>
</source>

Result:

[[File:using-bootstrap-components-in-joomla-4-carousel-demo.jpg|border|Carousel Demo]]

=== Example 4: Collapse ===

Collapse is widely used in Joomla and you may not need to use a module or plugin to trigger action. The click opens a pane with extra information. Example Bootstrap code:

<source lang="php">
<p>
<a class="btn btn-primary" role="button" href="#collapseExample" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseExample"> Link with href </a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
</p>
<div id="collapseExample" class="collapse">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</source>

Result:

[[File:using-bootstrap-components-in-joomla-4-collapse-demo.png|border|Collapse Demo]]

=== Example 5: Dropdown ===

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. Example Bootstrap code:

<source lang="php">
<div class="btn-group">
<button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Action </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</source>
Result:

[[File:using-bootstrap-components-in-joomla-4-dropdown-demo.png|border|Dropdown Demo]]

=== Example 6: Modal ===

The Modal component opens a dialog box in the middle of the screen. There are quite a few options to control the size and content of the modal. See the Bootstrap documentation for more details. Example Bootstrap code:

<source lang="php">
<p><button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button></p>
<div id="exampleModal" class="modal fade" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title">Modal title</h5>
<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
<button class="btn btn-primary" type="button">Save changes</button>
</div>
</div>
</div>
</div>
</source>

Result:

[[File:using-bootstrap-components-in-joomla-4-modal-demo.png|Modal Demo]]

=== Example 7: Offcanvas ===

At the moment this component is not supported in Joomla. Watch this space - coming soon!

=== Example 8: Popover ===

Popovers are like Tooltips but with a Title. They have some accessibility and performance issues so should be used with caution. Example Bootstrap code:

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

Result:

[[File:using-bootstrap-components-in-joomla-4-popover-demo.png|border|Popover Demo]]

=== Example 9: Scrollspy ===

Example code:
<source lang="php">
<div class="row">
<div class="col-4">
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column">
<a class="navbar-brand" href="#">Navbar</a><nav class="nav nav-pills flex-column">
<a class="nav-link active" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Item 2</a>
<a class="nav-link" href="#item-3">Item 3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav>
</div>
<div class="col-8">
<div class="scrollspy-example" tabindex="0" data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0">
<h4 id="item-1">Item 1</h4>
<p>Placeholder content for the scrollspy example. This one relates to item 1. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>Placeholder content for the scrollspy example. This one relates to the item 1-1. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p>
<h5 id="item-1-2">Item 1-2</h5>
<p>Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</p>
<h4 id="item-2">Item 2</h4>
<p>Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.</p>
<h4 id="item-3">Item 3</h4>
<p>Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>Placeholder content for the scrollspy example. This one relates to item 3-2. You're original, cannot be replaced. All night they're playing, your song. California girls we're undeniable. Like a bird without a cage. There is no fear now, let go and just be free, I will love you unconditionally. I can see the writing on the wall. You could travel the world but nothing comes close to the golden coast.</p>
</div>
</div>
</div>
</source>

Result:

[[File:using-bootstrap-components-in-joomla-4-scrollspy-demo.png|border|Scrollspy Demo]]

Also, some styling is needed in user.css:

<pre>.scrollspy-example {
height: 350px;
overflow-y: scroll;
}</pre>

Snag: the menu does not coordinate well with the content in this example!

=== Example 10: Tab ===

Tabs are often used as navigation elements combined with dropdowns. Bootstrap example code:

<source lang="php">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Active</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" role="button" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" tabindex="-1" href="#" aria-disabled="true">Disabled</a></li>
</ul>
</source>

Result:

[[File:using-bootstrap-components-in-joomla-4-tab-demo.png|border|Tab Demo]]

Remember to check both the Tab and Dropdown options for the dropdown part to work.

=== Example 11: Toast ===

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position. Example Bootstrap code:

<source lang="php">
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img class="rounded me-2" src="..." alt="..." />
<strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
<button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
</source>

Result:

[[File:using-bootstrap-components-in-joomla-4-toast-demo.png|border|Toast Demo]]

Note that the Bootstrap demo that uses a button to show the Toast message needs some extra Javascript. It seems this component needs a coder to make good use of it!

=== Example 12: Tooltip ===

A tooltip is a small piece of text that appears on hover over a button or link element to explain what it is or does. The tooltip can be positioned above or below or to the left or right of the element. If not specified the default position is top. The tooltip will switch to another position if there is insufficient room in the specified position. Example Bootstrap code:

<pre><p><button class="btn btn-secondary" title="Tooltip on left" type="button" data-bs-toggle="tooltip" data-bs-placement="left"> Tooltip on left </button>
<button class="btn btn-secondary" title="Tooltip" type="button" data-bs-toggle="tooltip"> Tooltip </button>
<button class="btn btn-secondary" title="Tooltip on top" type="button" data-bs-toggle="tooltip" data-bs-placement="top"> Tooltip on top </button>
<button class="btn btn-secondary" title="Tooltip on right" type="button" data-bs-toggle="tooltip" data-bs-placement="right"> Tooltip on right </button>
<button class="btn btn-secondary" title="Tooltip on bottom" type="button" data-bs-toggle="tooltip" data-bs-placement="bottom"> Tooltip on bottom </button>
<button class="btn btn-secondary" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>" type="button" data-bs-toggle="tooltip" data-bs-html="true"> Tooltip with HTML </button></p>
<p>Tooltip triggered by class: <button class="btn btn-warning" title="Tooltip Message">Alert!</button></p>
</pre>

Result:

[[File:using-bootstrap-components-in-joomla-4-tooltip-demo.png|border|Tooltip Demo]]

== Approach 2: Using a Content Plugin ==

The steps involved:

* Download, install and enable this plugin: https://github.com/ceford/j4xdemos-plg-bscompos/raw/master/plg_j4xdemos_bscompos.zip
* In the article add the text that the plugin acts on, for example {bscompos modal carousel} will trigger loading of the javascript necessary to support a modal dialog and a carousel. The plugin removes the trigger text and enclosing (now) empty <p></p> tags.
* Include the Bootstrap Component HTML code directly in the article or in a module included in the article. There is example HTML code below for a simple Modal and a Modal containing a Carousel. Note that this will not work if the HTML code is in a module in a template location.
* This will also work for a standard Custom module if the Prepare Content Option is set to Yes.
* Test it!

== Approach 3: Using a Template Override ==

The steps involved:

* Create a mod_custom template override.
* Add a mod_custom module containing the component markup and trigger classes.
* Include the module in an article.

=== The mod_custom template override ===

* In the Administrator interface go to {{rarr|System, Site Templates, Cassiopeia Details and Files}}.
* Select {{rarr|Create Overrides, mod_custom, default.php}}.
* On the line following defined('_JEXEC') or die; add the following code:
<pre>$module_class = $params->get('moduleclass_sfx');
if (!empty($module_class))
{
$classes = explode(' ', $module_class);
foreach ($classes as $class)
{
switch ($class)
{
case 'bs-alert':
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.alert', '.alert');
break;
case 'bs-button':
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.button', '.btn');
break;
case 'bs-carousel':
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.carousel', '.selector', []);
break;
case 'bs-collapse':
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.collapse', '.selector', []);
break;
case 'bs-dropdown':
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.dropdown', '.selector', []);
break;
case 'bs-modal':
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.modal', '.selector', []);
break;
case 'bs-offcanvas':
// Not Found
//\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.offcanvas', '.btn', []);
break;
case 'bs-popover':
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.popover', '.btn', []);
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.popover', 'a', []);
break;
case 'bs-scrollspy':
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.scrollspy', '.selector', []);
break;
case 'bs-tab':
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.tab', '.selector', []);
break;
case 'bs-tooltip':
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.tooltip', '.btn', []);
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.tooltip', 'a', []);
break;
case 'bs-toast':
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.toast', '.selector', []);
break;
default:
// do nothing
}
}
}
</pre>
This code searches for class names set in mod_custom and makes the HTMLHelper call to set up the Javascript support. Note that the last item in each call is a selector that may or may not be used to trigger action. Many of the components are triggered by data attributes in the mark-up and they do not use the selectors here. For some, the selector is needed. For example, it makes sense to use the '''.btn''' class and the '''a''' tag to trigger Tooltips.

=== A mod_custom Module for a Modal Component ===

* Go to {{rarr|Content, Site Modules, New}}.
* Select the '''Custom''' module.
* Fill out the form:
** Title: Demo Modal
** In the Position field type in '''demomodal''' for use in an article;
** Module Content: Toggle Editor for plain text entry.
** Paste in the following code from the Bootstrap documentation:

<source lang="php">
<h2>Modal</h2>

<p><button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button></p>

<div id="exampleModal" class="modal fade" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title">Modal title</h5>
<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
<button class="btn btn-primary" type="button">Save changes</button>
</div>
</div>
</div>
</div>
</source>

** Select the Advanced tab and in the Module Class field enter '''bs-modal'''
** Optional: set Ttitle to Hide to use the H2 in the pasted code.
** Save and Close (do not worry that the modal looks all wrong in the editor).

=== Create an Article and Menu Item ===
* Create a new article, Demo Modal, and in plain text entry mode set the content to <pre><div>{loadposition demomodal}</div></pre>
* Create a Single Article menu item.
* Test it:
[[File:Demomodal.png|none|Bootstrap Modal in an Article]]

=== A Modal Component containing a Carousel ===

* Create a new Custom module with a new Title: Demo Modal Carousel
* Position: demomodalcarousel
* {{rarr|Advance tab, Module Class}}: bs-modal bs-carousel
* Module Custom content in plain text:

<source lang="php">
<h2>Modal with Carousel</h2>
<div class="mod-custom custom">

<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button>
</div>
<div id="exampleModal" class="modal fade" style="display: none;" tabindex="-1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button class="active" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/sampledata/cassiopeia/nasa1-1200.jpg" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/sampledata/cassiopeia/nasa2-1200.jpg" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/sampledata/cassiopeia/nasa3-1200.jpg" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div></source>
* Create a new Article with <div>{loadposition demomodalcarousel}</div> in the content.
* Create a new single article menu item: Demo Modal Carousel
* Test it:
[[File:Demomodalcarousel.png|Demo Modal containing a Carousel]]

<noinclude>
[[Category:Tutorials{{#translation:}}]]
[[Category:Plugin Development{{#translation:}}]]
[[Category:Development{{#translation:}}]]
[[Category:Joomla!_4.x{{#translation:}}]]
</noinclude>

Enabling user's registration approval by admins

2021-05-03T21:46:02Z

AMurray: change "J! 3.1" badge to 3.x

{{version|2.5,3.x}}

A new feature added to the user registration process in {{JVer|2.5}} and newer is the New User's Approval by Administrators, where a user will only be able to login after an administrator approves and activates the account.

To enable it set User Activation to "Admin".

This new feature required a slight change to the parameters set in the Users Manager. The User Activation parameter now has 3 options (as opposed to 2 options in Joomla! 1.5.x) and the options can be chosen from a select list box instead of the previous radio buttons.

'''The options are:'''
* '''None''' - No activation is needed. The user may login right after finishing the registration.
* '''Self''' - The user will receive an e-mail message containing a link with a token to activate their account.
* '''Admin''' - It is necessary that an administrator approves the account. Here is how the process goes:
** After registering the new user receives an e-mail message containing a link with a token to verify their e-mail address;
** After the user's e-mail address has been verified, all users with the Receive System Messages option enabled will receive an e-mail message notifying them that a user has verified their e-mail address and requests that their account be activated. That email message will contain a link with a token to activate the account;
** Once an administrator has activated the account, the user will receive an e-mail message notifying them that they may now login. '''Note: {{JVer|3.x}} the email is only sent to the users if the site Administrator activates the account from the front-end of the site not from the Joomla Administrator
'''
This feature was a product of many suggestions made by users in the Administration Forum [http://forum.joomla.org/viewtopic.php?f=431&t=259464].

<noinclude>[[Category:Joomla! 2.5]] [[Category:Version 1.6 FAQ]] [[Category:Version 1.7 FAQ]] [[Category:Version 2.5 FAQ]] [[Category:User Management]] [[Category:Tutorials]]</noinclude>

Enabling user's registration approval by admins

2021-05-03T21:43:20Z

AMurray: added Joomla 3.x badge

{{version|2.5,3.1}}

A new feature added to the user registration process in {{JVer|2.5}} and newer is the New User's Approval by Administrators, where a user will only be able to login after an administrator approves and activates the account.

To enable it set User Activation to "Admin".

This new feature required a slight change to the parameters set in the Users Manager. The User Activation parameter now has 3 options (as opposed to 2 options in Joomla! 1.5.x) and the options can be chosen from a select list box instead of the previous radio buttons.

'''The options are:'''
* '''None''' - No activation is needed. The user may login right after finishing the registration.
* '''Self''' - The user will receive an e-mail message containing a link with a token to activate their account.
* '''Admin''' - It is necessary that an administrator approves the account. Here is how the process goes:
** After registering the new user receives an e-mail message containing a link with a token to verify their e-mail address;
** After the user's e-mail address has been verified, all users with the Receive System Messages option enabled will receive an e-mail message notifying them that a user has verified their e-mail address and requests that their account be activated. That email message will contain a link with a token to activate the account;
** Once an administrator has activated the account, the user will receive an e-mail message notifying them that they may now login. '''Note: {{JVer|3.x}} the email is only sent to the users if the site Administrator activates the account from the front-end of the site not from the Joomla Administrator
'''
This feature was a product of many suggestions made by users in the Administration Forum [http://forum.joomla.org/viewtopic.php?f=431&t=259464].

<noinclude>[[Category:Joomla! 2.5]] [[Category:Version 1.6 FAQ]] [[Category:Version 1.7 FAQ]] [[Category:Version 2.5 FAQ]] [[Category:User Management]] [[Category:Tutorials]]</noinclude>

Enabling user's registration approval by admins

2021-05-03T21:38:17Z

AMurray: added a note that the email from admin-activation works only for front-end activation not from administrator.

{{version|2.5,3.1}}

A new feature added to the user registration process in {{JVer|2.5}} and newer is the New User's Approval by Administrators, where a user will only be able to login after an administrator approves and activates the account.

To enable it set User Activation to "Admin".

This new feature required a slight change to the parameters set in the Users Manager. The User Activation parameter now has 3 options (as opposed to 2 options in Joomla! 1.5.x) and the options can be chosen from a select list box instead of the previous radio buttons.

'''The options are:'''
* '''None''' - No activation is needed. The user may login right after finishing the registration.
* '''Self''' - The user will receive an e-mail message containing a link with a token to activate their account.
* '''Admin''' - It is necessary that an administrator approves the account. Here is how the process goes:
** After registering the new user receives an e-mail message containing a link with a token to verify their e-mail address;
** After the user's e-mail address has been verified, all users with the Receive System Messages option enabled will receive an e-mail message notifying them that a user has verified their e-mail address and requests that their account be activated. That email message will contain a link with a token to activate the account;
** Once an administrator has activated the account, the user will receive an e-mail message notifying them that they may now login. '''Note: the email is only sent to the users if the site Admininstrator activates the account from the front-end of the site not from the Joomla Administrator
'''
This feature was a product of many suggestions made by users in the Administration Forum [http://forum.joomla.org/viewtopic.php?f=431&t=259464].

<noinclude>[[Category:Joomla! 2.5]] [[Category:Version 1.6 FAQ]] [[Category:Version 1.7 FAQ]] [[Category:Version 2.5 FAQ]] [[Category:User Management]] [[Category:Tutorials]]</noinclude>

J3.x:Two Factor Authentication

2020-08-16T04:48:09Z

AMurray: Trouble shooting section added 16 Aug 2020

<noinclude><languages /></noinclude>
<noinclude>{{Joomla version|version=3.2|time=and after|}}
{{-}}
{{Top portal heading|color=white-bkgd|icon=lock|icon-color=#5091cd|size=3x|text-color=#333|title=<translate>
Two-Factor Authentication</translate>}}</noinclude>
<translate>
Joomla! was the first major CMS to implement Two-Factor Authentication. This adds a single-use code received on your smartphone or a Yubikey to your existing passwords to make your site extra hacker-proof.</translate>

<div class="row">
<div class="large-6 large-centered columns">
<div class="video-container">
{{#widget:YouTube|id=NbG6eehASW8}}
</div>
</div>
</div>

<translate>
Traditionally, when you want to log in to a website, you have to provide your username and your password in order to identify yourself to the system.</translate>
<translate>
The biggest problem with this approach is your username and password can be stolen or guessed. For example, if your computer is infested with malware or you try to access your site from an untrusted network, such as a public WiFi hotspot, it is possible someone could intercept your username and password. This means they can log into your site as you. Because your username and password is compromised, your site can now be hacked.</translate>

<translate>
In order to prevent that, Joomla! 3.2.0 and later versions, come with a built-in Two-Factor Authentication system that secures your site login with a secondary, single use secret code. This is called [[wp:Two-factor authentication|Two-Factor Authentication]] or shortened to 2FA. </translate>

<translate>
==Enable Two-Factor Authentication== 
</translate>
<translate>
The very first time you’re installing Joomla! 3.2 or higher, and access your backend, you’ll see a notice about post-installation messages.</translate>

[[Image:Joomla-two-factor-authentication-post-installation-<translate>
en</translate>.png]]

<translate>
Click on the ''Review Messages'' button, you’ll see a screen which indicates that Two-Factor Authentication is Available.</translate>
<translate>
Click on the ''Enable Two-Factor Authentication'' button.</translate>

[[Image:Joomla-two-factor-authentication-enable-<translate>
en</translate>.png]]

<translate>
To set up the Two-Factor Authentication, go to the User Manager, edit a User and go to the Two-Factor Authentication Tab:</translate>

[[Image:Joomla-two-factor-authentication-tab-<translate>
en</translate>.png]]

<translate>

If the Two-Factor Authentication Tab does not appear, it is possible that the associated plugin is not enabled. In that case go to the Plugin Manager and find the Two Factor plugins. There are normally two - one for Google Authenticator and the other for Yubikey. Enable those that you intend to use. Then return to the User Manager and try again.

==Authentication Methods== 
===Google Authenticator===
</translate>
<translate>
[[wikipedia:Google_Authenticator|Google Authenticator]] is an application for smartphones and desktops created by Google which allows you to generate a six digit security password which changes every 30 seconds. In order to log in to your site, you’ll need to use your username, your password and the six digit security code which changes every thirty seconds.</translate>

<translate>
You can enable Two-Factor Authentication for the Frontend, the Backend or for Both. This can be set up in the plug-in ''Two-Factor Authentication – Google Authenticator''.</translate>

<translate>
This provides extra protection against hackers trying to log in to your account. Even if they were able to get hold of your credentials they have a maximum 30s to hack your site. This is usually not practical for hackers. In this way, the Two-Factor Authentication prevents your site against unauthorized access.</translate>

<translate>
Setting up the Two-Factor Authentication with Google Authenticator is actually really easy.</translate>

<translate>
====Step 1 – Get Google Authenticator==== 
</translate>
<translate>
Download and Install Google Authenticator on your smartphone or desktop.</translate>

[[Image:Joomla-Google-Authenticator-download-<translate>
en</translate>.png]]

<translate>
====Step 2 - Set up==== 
</translate>
<translate>
You can see a QR Code to scan with a mobile phone with the application of Google Authenticator installed.</translate>

[[Image:Joomla-Google-Authenticator-setup-<translate>
en</translate>.png]]

<translate>
====Step 3 - Activate Two-Factor Authentication==== 
</translate>
<translate>
Go to the Activate Two-Factor Authenticator field and enter the six digit security code you can see on the screen of your smartphone device. Then click on ''Save & Close''.</translate>

[[Image:Joomla-Google-Authenticator-activate-<translate>
en</translate>.png]]

<translate>
Now, your site access is protected by Two-Factor Authentication. Log out from your backend, you’ll see that instead of asking for the username and password only, Joomla! is asking for a secret key. The Secret Key is the six digit password you can see on your Google Authenticator screen.</translate>

[[Image:Joomla-Google-Authenticator-login-<translate>
en</translate>.png]]

<translate>
If you don’t enter the secret code or a random one, you won’t be able to login. This is what will happen to a hacker who tries to access your backend, since they don’t have the correct secret key.</translate>

<translate>

===Yubikey=== 
</translate>
<translate>
This feature allows you to use a Yubikey secure hardware token for Two-Factor Authentication. In addition to your username and password you will also need to insert your Yubikey into your computer's USB port, click inside the Secret Key area of the site's login area and touch Yubikey's gold disk. If you have an NFC-equipped Android smartphone you can just approach a compatible Yubikey token (Yubikey Neo) to the NFC reader to copy the secret code to the device's clipboard. The secret code generated by your Yubikey is unique to your device and changes constantly. This provides extra protection against hackers logging in to your account even if they were able to get hold of your password.</translate>

<translate>
You can enable Two-Factor Authentication for the Frontend, the Backend or for Both. This can be set up in the plug-in ''Two-Factor Authentication – Yubikey''.</translate>

[[Image:Joomla-two-factor-authentication-Yubikey-<translate>
en</translate>.png]]

<translate>
==== See Also ==== 
*See also: [[S:MyLanguage/Backup_Basics_for_a_Joomla!_Web_Site|Backup Basics for a Joomla! Web Site]]

===Troubleshooting===
If you are trying to save your two-factor settings and you see an error about invalid password or username, please refer to https://forum.joomla.org/viewtopic.php?f=708&t=981565. It is just necessary to remove the pre-populated password in your user profile form, and password not required unless you are changing it while editing your profile to set up the two-factor authentication.
====Contributor==== 
</translate>
* Nicholas Dionysopoulos
* Andrew Murray
__NOTOC__
<noinclude>
<translate>

[[Category:Joomla! 3.x]]
[[Category:Joomla! 3.2]]
[[Category:Security]]
[[Category:Tutorials]]
</translate>
</noinclude>

Administrator (Application)

2020-06-20T06:30:54Z

AMurray:

<noinclude><languages /></noinclude>
{{Joomla version|version=3.0|time=and after}}
<translate>
The '''Administrator''' application, also known as the ''Back-end'', ''Admin Panel'' or ''Control Panel'', is the interface where [[S:MyLanguage/Administrator (User)|administrators]] and other site officials with appropriate privileges can manipulate the look of a Joomla! powered web [[S:MyLanguage/Site (Application)|site]]. There are many tasks which can be done with the administrator interface. You can set up how your web site looks with the [[S:MyLanguage/J3.x:To_access_the_Template_Manager|Template Manager]] or completely change a web site's look by [[S:MyLanguage/J3.x:Installing_a_template|changing the template]] to another [[S:MyLanguage/Template|template]]. You can also add new [[S:MyLanguage/Extension|extensions]] such as [[S:MyLanguage/Component|components]], [[S:MyLanguage/Language|languages]], [[S:MyLanguage/Module|modules]], and [[S:MyLanguage/Plugin|plugins]]. Many of these are found on the [http://extensions.joomla.org/ Joomla! Extension Directory (JED)].</translate>

<translate>==Logging In and Out of the Administrator (Application)== </translate>
{{:J3.x:Logging in or out of the Administrator back-end/<translate>
en</translate>}}

<noinclude><translate>
[[Category:Application]][[Category:Glossary]][[Category:Landing Pages]]</translate></noinclude>

Administrator (Application)

2020-06-20T06:26:34Z

AMurray: