Using Bootstrap components Topic is solved
Moderator: ooffick
Forum rules
- Jaydot
- Joomla! Guru
- Posts: 651
- Joined: Sun Jun 04, 2017 12:11 pm
- Location: The Netherlands
- Contact:
Using Bootstrap components
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).
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
Personal website: https://jaydot.nl
- Per Yngve Berg
- Joomla! Master
- Posts: 30814
- Joined: Mon Oct 27, 2008 9:27 pm
- Location: Romerike, Norway
Re: Using Bootstrap components
Is js loaded?
- ceford
- Joomla! Hero
- Posts: 2626
- Joined: Mon Feb 24, 2014 10:38 pm
- Location: Edinburgh, Scotland
- Contact:
Re: Using Bootstrap components
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.
- Jaydot
- Joomla! Guru
- Posts: 651
- Joined: Sun Jun 04, 2017 12:11 pm
- Location: The Netherlands
- Contact:
Re: Using Bootstrap components
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...
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
Personal website: https://jaydot.nl
- ceford
- Joomla! Hero
- Posts: 2626
- Joined: Mon Feb 24, 2014 10:38 pm
- Location: Edinburgh, Scotland
- Contact:
Re: Using Bootstrap components
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:
I don't know how it gets there! It looks like we are back to the other suggestion: is the right js loaded.
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>
- ceford
- Joomla! Hero
- Posts: 2626
- Joined: Mon Feb 24, 2014 10:38 pm
- Location: Edinburgh, Scotland
- Contact:
Re: Using Bootstrap components
To add to this, my admin side modal has this:
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!
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 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!
- Jaydot
- Joomla! Guru
- Posts: 651
- Joined: Sun Jun 04, 2017 12:11 pm
- Location: The Netherlands
- Contact:
Re: Using Bootstrap components
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 )
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
Personal website: https://jaydot.nl
- ceford
- Joomla! Hero
- Posts: 2626
- Joined: Mon Feb 24, 2014 10:38 pm
- Location: Edinburgh, Scotland
- Contact:
Re: Using Bootstrap components
Try this code:
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.
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>'
); ?>
- Per Yngve Berg
- Joomla! Master
- Posts: 30814
- Joined: Mon Oct 27, 2008 9:27 pm
- Location: Romerike, Norway
Re: Using Bootstrap components
Bootstrap 5 is no longer dependant on jQuery.
- ceford
- Joomla! Hero
- Posts: 2626
- Joined: Mon Feb 24, 2014 10:38 pm
- Location: Edinburgh, Scotland
- Contact:
Re: Using Bootstrap components
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?
- Jaydot
- Joomla! Guru
- Posts: 651
- Joined: Sun Jun 04, 2017 12:11 pm
- Location: The Netherlands
- Contact:
Re: Using Bootstrap components
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
Personal website: https://jaydot.nl
- Jaydot
- Joomla! Guru
- Posts: 651
- Joined: Sun Jun 04, 2017 12:11 pm
- Location: The Netherlands
- Contact:
Re: Using Bootstrap components
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
Personal website: https://jaydot.nl
- ceford
- Joomla! Hero
- Posts: 2626
- Joined: Mon Feb 24, 2014 10:38 pm
- Location: Edinburgh, Scotland
- Contact:
Re: Using Bootstrap components
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!
- Jaydot
- Joomla! Guru
- Posts: 651
- Joined: Sun Jun 04, 2017 12:11 pm
- Location: The Netherlands
- Contact:
Re: Using Bootstrap components
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?
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?
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
Personal website: https://jaydot.nl
- Jaydot
- Joomla! Guru
- Posts: 651
- Joined: Sun Jun 04, 2017 12:11 pm
- Location: The Netherlands
- Contact:
Re: Using Bootstrap components
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
Personal website: https://jaydot.nl
- ceford
- Joomla! Hero
- Posts: 2626
- Joined: Mon Feb 24, 2014 10:38 pm
- Location: Edinburgh, Scotland
- Contact:
- Jaydot
- Joomla! Guru
- Posts: 651
- Joined: Sun Jun 04, 2017 12:11 pm
- Location: The Netherlands
- Contact:
Re: Using Bootstrap components
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!
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
Personal website: https://jaydot.nl
- ceford
- Joomla! Hero
- Posts: 2626
- Joined: Mon Feb 24, 2014 10:38 pm
- Location: Edinburgh, Scotland
- Contact:
Re: Using Bootstrap components
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?
- Jaydot
- Joomla! Guru
- Posts: 651
- Joined: Sun Jun 04, 2017 12:11 pm
- Location: The Netherlands
- Contact:
Re: Using Bootstrap components
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!
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
Personal website: https://jaydot.nl
- Per Yngve Berg
- Joomla! Master
- Posts: 30814
- Joined: Mon Oct 27, 2008 9:27 pm
- Location: Romerike, Norway
- ceford
- Joomla! Hero
- Posts: 2626
- Joined: Mon Feb 24, 2014 10:38 pm
- Location: Edinburgh, Scotland
- Contact:
Re: Using Bootstrap components
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!
https://docs.joomla.org/J4.x:Using_Boot ... n_Joomla_4
With that, I think this thread can be marked answered!
- Jaydot
- Joomla! Guru
- Posts: 651
- Joined: Sun Jun 04, 2017 12:11 pm
- Location: The Netherlands
- Contact:
Re: Using Bootstrap components
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
Personal website: https://jaydot.nl
- Per Yngve Berg
- Joomla! Master
- Posts: 30814
- Joined: Mon Oct 27, 2008 9:27 pm
- Location: Romerike, Norway
Re: Using Bootstrap components
select "Accept this answer" on the post.
- Jaydot
- Joomla! Guru
- Posts: 651
- Joined: Sun Jun 04, 2017 12:11 pm
- Location: The Netherlands
- Contact:
Re: Using Bootstrap components
Thanks!
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl
Personal website: https://jaydot.nl
- ceford
- Joomla! Hero
- Posts: 2626
- Joined: Mon Feb 24, 2014 10:38 pm
- Location: Edinburgh, Scotland
- Contact:
Re: Using Bootstrap components
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!
https://docs.joomla.org/J4.x:Using_Boot ... n_Joomla_4
Feedback welcome!