Using Bootstrap components Topic is solved

Be informed that this forum is not an official support forum for Joomla! 4.0. Any issues regarding Joomla! 4.0 must be reported at https://issues.joomla.org/.

Joomla 4.0 is still in Beta stage. This forum should be used for sharing information about Joomla! 4.0.

Moderator: ooffick

Forum rules
Locked
User avatar
Jaydot
Joomla! Guru
Joomla! Guru
Posts: 651
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Using Bootstrap components

Post by Jaydot » Tue Mar 23, 2021 4:41 pm

Since J4 comes with Bootstrap 5, I thought I'd try making a gallery with images that open in a modal on click, using Bootstrap components.
I first made this locally, and it worked flawlessly (wrote the HTML in my editor, and ran it in a browser).

Then I copied the entire HTML into a module. And it no longer works.
When I look at the page source it's all there, but clicking an image does nothing at all.

Can someone help me troubleshoot this?
(it's on devspace.jaydot.nl).
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 31140
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: Using Bootstrap components

Post by Per Yngve Berg » Tue Mar 23, 2021 4:45 pm

Is js loaded?

User avatar
ceford
Joomla! Hero
Joomla! Hero
Posts: 2813
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Using Bootstrap components

Post by ceford » Tue Mar 23, 2021 6:29 pm

I think the trouble is that you have the div id="gallery" set up to trigger the modal but it is completely covered by the four dogs that have a link but that targets my-carous. The gallery is there and actually works. You can uncheck opacity:0 and display:none to see it. Try a simple modal trigger button as in the Bootstrap docs: https://getbootstrap.com/docs/5.0/compo ... #live-demo and then go back to dogs when the modal works.

User avatar
Jaydot
Joomla! Guru
Joomla! Guru
Posts: 651
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: Using Bootstrap components

Post by Jaydot » Tue Mar 23, 2021 8:35 pm

ceford wrote: Tue Mar 23, 2021 6:29 pmI think the trouble is...
Thanks for thinking along!
I replaced the gallery with the button, but it's still not working.
The "data-bs-toggle" is supposed to remove the opacity:0 and set the modal to display:block (you can actually see it doing that in my local experiment), so I get the feeling the toggle is being ignored...

Per Yngve Berg wrote: Tue Mar 23, 2021 4:45 pmIs js loaded?
So I wonder if Per is right, and the Bootstrap JS is not loading, or not loading completely, or loading another version?

In my local experiment, the Bootstap JS comes directly from https://cdn.jsdelivr.net/npm/bootstrap@ ... dle.min.js
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

User avatar
ceford
Joomla! Hero
Joomla! Hero
Posts: 2813
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Using Bootstrap components

Post by ceford » Wed Mar 24, 2021 2:58 am

The source is not showing the cdn link. There are links to media/vendor js items. The only place I have a modal is in the admin template where I see this amongst the js resources:

Code: Select all

<script src="/j4ops/media/vendor/bootstrap/js/modal.es6.js?5.0.0-beta1" type="module" data-asset-name="bootstrap.modal" data-asset-dependencies="bootstrap.es5"></script>
I don't know how it gets there! It looks like we are back to the other suggestion: is the right js loaded.

User avatar
ceford
Joomla! Hero
Joomla! Hero
Posts: 2813
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Using Bootstrap components

Post by ceford » Wed Mar 24, 2021 8:19 am

To add to this, my admin side modal has this:

Code: Select all

<?php echo HTMLHelper::_(
	'bootstrap.renderModal',
	'modal-box', // selector
	array( // options
		'modal-dialog-scrollable' => true,
		'title'  => 'Test Title',
		'footer' => '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>',
	),
	'<div id="modal-body">Content set by ajax.</div>'
); ?>
And the source comes out with the appropriate content. I use a trigger and some javascript to fetch content with an ajax call and then set the title and body. There is a modal layout file, which I override.

And you could look at libraries/src/HTML/Helpers/Bootstrap.php for the modal call - you will see the useScript statement. I have a feeling I am doing it wrong too, but it works!

User avatar
Jaydot
Joomla! Guru
Joomla! Guru
Posts: 651
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: Using Bootstrap components

Post by Jaydot » Wed Mar 24, 2021 10:35 am

Hi.
Thank you!
I'm afraid you've caught me out: I can do HTML and CSS, but the reason I use a CMS is simply that I cannot code. I can't write javascript and don't even know what ajax is. And while I don't like using Bootstrap for layout, I do like using their utilities. They let me do clever things without any coding :). I've used the Modal before, it was already there in Bootstrap 2.

I can see that J4 is loading Bootstrap 5 beta2, but I wonder if the following has anything to do with the toggle not working (from the BS docs site):
Bootstrap is dependent on jQuery and Popper, these are defined as peerDependencies...

In the Inspector-tool Sources for my local HTML page, I can see popperjs is loaded. I don't see it in the Sources for the webpage.

(I have put my temporarily put my local HTML page online, so you can compare the two:
https://jaydot.nl/parkinglot/mybootslid ... lider.html )
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

User avatar
ceford
Joomla! Hero
Joomla! Hero
Posts: 2813
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Using Bootstrap components

Post by ceford » Wed Mar 24, 2021 12:43 pm

Try this code:

Code: Select all

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-box">
  Launch demo modal
</button>

<?php HTMLHelper::_('bootstrap.carousel', 'my-carous'); ?>

<?php echo HTMLHelper::_(
	'bootstrap.renderModal',
	'modal-box', // selector
	array( // options
		'modal-dialog-scrollable' => true,
		'title'  => 'Test Title',
		'footer' => '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>',
	),
	'<div id="modal-body">
		<div id="my-carous" class="carousel slide carousel-fade" data-bs-touch="false" data-bs-interval="false">
			<div class="carousel-inner">
				<div class="carousel-item active"><img class="d-block w-100" src="/images/bootslider/tara-lg.jpg" alt="First slide"></div>
				<div class="carousel-item"><img class="d-block w-100" src="/images/bootslider/cadi-lg.jpg" alt="Second slide"></div>
				<div class="carousel-item"><img class="d-block w-100" src="/images/bootslider/macy-lg.jpg" alt="Third slide"></div>
				<div class="carousel-item"><img class="d-block w-100" src="/images/bootslider/gola-lg.jpg" alt="Fourth slide"></div>
			</div>
			<a class="carousel-control-prev" href="#my-carous" role="button" data-bs-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
			</a>
			<a class="carousel-control-next" href="#my-carous" role="button" data-bs-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
			</a>
		</div>
	</div>'
); ?>
You will see that you need to call HTMLHelper twice. First to load the carousel javascript and then the modal javascript. Notice I have used 'modal-box' where you have 'my-modal'. Choose whatever you prefer, so long as the id is unique.

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 31140
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: Using Bootstrap components

Post by Per Yngve Berg » Wed Mar 24, 2021 2:47 pm

Bootstrap 5 is no longer dependant on jQuery.

User avatar
ceford
Joomla! Hero
Joomla! Hero
Posts: 2813
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Using Bootstrap components

Post by ceford » Wed Mar 24, 2021 3:43 pm

Since my last message it has occurred to me that you are probably pasting html into an article. If so, I think that is not going to work for modals or carousels in J4. You will need a custom plugin. Can you clarify how you are creating your tests?

User avatar
Jaydot
Joomla! Guru
Joomla! Guru
Posts: 651
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: Using Bootstrap components

Post by Jaydot » Wed Mar 24, 2021 4:46 pm

ceford wrote: Wed Mar 24, 2021 3:43 pmIf so, I think that is not going to work...
Thanks, but why on earth not? I've been pasting HTML into modules for years, because it's easier/quicker to type HTML in my offline editor.
Surely the whole point of Bootstrap components is that you do not need any custom plugins to use them?
Last edited by Jaydot on Wed Mar 24, 2021 4:54 pm, edited 1 time in total.
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

User avatar
Jaydot
Joomla! Guru
Joomla! Guru
Posts: 651
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: Using Bootstrap components

Post by Jaydot » Wed Mar 24, 2021 4:51 pm

Per Yngve Berg wrote: Wed Mar 24, 2021 2:47 pmBootstrap 5 is no longer dependant on jQuery.
Oops, you're right. I must have gotten that quote from the BS4 docs (once you're in de docs page, you can no longer see which version you're in, unless you remember to check the URL).
Popper is required though.
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

User avatar
ceford
Joomla! Hero
Joomla! Hero
Posts: 2813
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Using Bootstrap components

Post by ceford » Wed Mar 24, 2021 6:38 pm

Jaydot wrote: Wed Mar 24, 2021 4:46 pm
ceford wrote: Wed Mar 24, 2021 3:43 pmIf so, I think that is not going to work...
Thanks, but why on earth not? I've been pasting HTML into modules for years, because it's easier/quicker to type HTML in my offline editor.
Surely the whole point of Bootstrap components is that you do not need any custom plugins to use them?
Because pasting the pure Bootstrap code into the article does not trigger loading of the required Javascript file. I have asked a question about this on the Issue Tracker - the experts do tend to notice items reported there. I will come back if there is a simple answer.

Ironically, I have been working with a fork of the Cassiopeia template and I am using the cdn links as in the Bootstrap documentation rather than the Joomla css and js. And that does work by pasting the modal code into an article!

User avatar
Jaydot
Joomla! Guru
Joomla! Guru
Posts: 651
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: Using Bootstrap components

Post by Jaydot » Wed Mar 24, 2021 8:15 pm

Thanks for pushing it to the issue tracker. I saw the answer.
But what I don't understand then: if you look at the Sources tab in the Inspector - see screenshot - collapse.js and carousel.js are loaded. The data-bs-toggle="collapse" is used in the (Cassiopeia) navbar, so that makes sense.
But how does it know that carousel.js needs to be loaded too?
brave_Io5Zv2NQQO.png
You do not have the required permissions to view the files attached to this post.
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

User avatar
Jaydot
Joomla! Guru
Joomla! Guru
Posts: 651
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: Using Bootstrap components

Post by Jaydot » Wed Mar 24, 2021 8:17 pm

ceford wrote: Wed Mar 24, 2021 6:38 pm...fork of the Cassiopeia template and I am using the cdn links...
I'd never dare to do that. Doesn't it cause conflicts??
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

User avatar
ceford
Joomla! Hero
Joomla! Hero
Posts: 2813
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Using Bootstrap components

Post by ceford » Wed Mar 24, 2021 8:37 pm

Scrub what I just posted. Read this:

https://gist.github.com/dgrammatiko/efb ... 93f73cc0fd

User avatar
Jaydot
Joomla! Guru
Joomla! Guru
Posts: 651
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: Using Bootstrap components

Post by Jaydot » Wed Mar 24, 2021 8:57 pm

Wow! Solved! Thank you very much!

Just one last stupid question: where do I "include the interactivity"?? :-[
As a line of PHP inside the module where I need it? Or in the index.php?

Edit: put it in the index.php.

My dogs are now popping right up in a modal!

Thanks again!
Last edited by Jaydot on Wed Mar 24, 2021 9:37 pm, edited 1 time in total.
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

User avatar
ceford
Joomla! Hero
Joomla! Hero
Posts: 2813
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Using Bootstrap components

Post by ceford » Wed Mar 24, 2021 9:31 pm

Jaydot wrote: Wed Mar 24, 2021 8:57 pm Wow! Solved! Thank you very much!

Just one last stupid question: where do I "include the interactivity"?? :-[
As a line of PHP inside the module where I need it? Or in the index.php?
It is not a stupid question. I have just asked the same question of a greater expert. I think the answer may lie in creating template overrides. Can you confirm whether you are entering the Bootstrap html code in an article or a module. If a module, which one?

User avatar
Jaydot
Joomla! Guru
Joomla! Guru
Posts: 651
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: Using Bootstrap components

Post by Jaydot » Wed Mar 24, 2021 9:41 pm

Ah, I was editing my reply as you posted.
My Bootstrap HTML is in a custom type module (and it's working beautifully, now).
And I put the "interactivity" in the template's index.php.
I usually work with a duplicate of the template anyway - or is there a way to create an override for adding an extra line of php to the index.php?

I really appreciate all the time and effort you put into this!
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 31140
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: Using Bootstrap components

Post by Per Yngve Berg » Thu Mar 25, 2021 8:27 am

For the html wrapping a module, use a custom module Chrome.

https://docs.joomla.org/Module_chrome

User avatar
ceford
Joomla! Hero
Joomla! Hero
Posts: 2813
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Using Bootstrap components

Post by ceford » Fri Mar 26, 2021 3:07 pm

After some useful discussion with experts I have composed a tutorial on alternative methods of using Bootstrap Components in Articles, one involving a custom plugin, also provided. The tutorial is here:

https://docs.joomla.org/J4.x:Using_Boot ... n_Joomla_4

With that, I think this thread can be marked answered!

User avatar
Jaydot
Joomla! Guru
Joomla! Guru
Posts: 651
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: Using Bootstrap components

Post by Jaydot » Fri Mar 26, 2021 4:56 pm

ceford wrote: Fri Mar 26, 2021 3:07 pm...I have composed a tutorial...
Brilliant!
I have now moved my dogs into a custom module (with template override) and added it to an article on my test website. Once again, it's working beautifully.
I should have known how to override the default.php, but I never knew you could do that with a custom module. Learn something new every day :).
Thank you!
Yes, this topic can certainly be marked as solved - I know how to add the green checkmark to this post, but I believe you have to be a mod to mark the whole topic as solved...
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 31140
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: Using Bootstrap components

Post by Per Yngve Berg » Fri Mar 26, 2021 5:09 pm

select "Accept this answer" on the post.

User avatar
Jaydot
Joomla! Guru
Joomla! Guru
Posts: 651
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: Using Bootstrap components

Post by Jaydot » Fri Mar 26, 2021 5:29 pm

Per Yngve Berg wrote: Fri Mar 26, 2021 5:09 pmselect "Accept this answer" on the post
Thanks!
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

User avatar
ceford
Joomla! Hero
Joomla! Hero
Posts: 2813
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Using Bootstrap components

Post by ceford » Sat Mar 27, 2021 5:49 pm

I revised the tutorial, created a custom html module that supports Bootstrap components - I think the best solution - and created examples for most of the components:

https://docs.joomla.org/J4.x:Using_Boot ... n_Joomla_4

Feedback welcome!


Locked

Return to “Joomla! 4 Related”