I have tried repeatedly to add modal on bootstrap 5 and the page will not take it. I have no idea why I cannot do this. I have other sites with bootstrap 4 that do load, but not 5. Any help on this?
Page I am trying to load onto is http://sandahia.com/team.html
Appreciate the help!
Can you provide more information like screenshots and steps you are taking to do it? What do you mean by will not take it?
The reason that this will not work is the fact that you are linking to 2 versions of Bootstrap, namely v2.3.2 (line 34) and v5.1.3 (line 38).
As well, you do not have the Bootstrap JavaScript file atteched.
Solution: remove both of the above mentioned links and use Wappler to create the links for you.
As a side note: There are links to many other CSS and JS files that are not relevant to this page. These files may interfere with what you are trying to do. I suggest that you remove the unused CSS and JS as much as possible.
thank you Ben, but in this case and others I have always setup my bootstrap as custom using the built in bootstrap.css file (pointing to it in the settings) and in turn it always lists both of them and never had an issue with it in the past. I obviously will do as you suggested and let you know - thank you.
<script src="bootstrap/4/js/popper.min.js"></script>
<script src="bootstrap/4/js/bootstrap.min.js"></script>
==================
<script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
if those are missing add them to the bottom of body as @ben said base on the version you want.
Not sure i understand what you did exactly, but you can’t have 2 different versions of the Bootstrap framework on your pages. Even if it worked it’s not correct and not allowed and it probably worked by chance.
You need to include the bootstrap framework as explained by Ben and remove the references to the old version from your pages.
1 Like
Again thank you Ben but manually deleting the files and adding them back in again doesn’t work. I try adding bootstrap5 locally and it will not put the css line in the header. When I manually add the css line back in, the settings automatically switch to bootstrap5 custom. Let alone the javascript will not add back in on its own, after using the settings. The aforementioned settings I was referring to on the custom is attached, which seems to prevail
After you set these in project settings did you go onto the head page and click the button Ben shows in the screenshot to add frameworks? Seen as the page already exists might have to do it manually on the page level aswell
Open your page, open the frameworks menu, deselect what is selected for bootstrap 5 and then add bootstrap 5 custom. The two files you selected will be added on the page.
1 Like
Teodor and everyone else I sincerely appreciate all the help, but is becoming frustrated. I did as instructed - removed the bootstrap - removed the javascript and no matter how many times I go back to the install framework on the page it will not add bootstrap or the java to the page despite it does show that bootstrap 5 custom has been selected on the frameworks page as I am showing all below…??
Well maybe just manually add it at the bottom of the page then.
I’ll try and add the js manually at the bottom, but it doesn’t even add in the bootstrap css at the top either.
Maybe there’s something broken on this page, because of the different bootstrap includes.
How about just try to create a new blank html page in your project. Do the includes get added there?
Thank you Teodor, on a blank page it does work. so will have to try and reconstruct the page. Obviously something there stopping this - Thank you and everyone else very much as always.