Bootstrap 5 custom has duplicate script tags

Wappler General
#1

Wappler Version : 4.4.0
Operating System : MacOS Big Sur
Server Model: NodeJS
Database Type: None
Hosting Type: Docker

How to reproduce

Create a Blank project, and then select Bootstrap 5 custom framework. The following script tag is added:
<script src="bootstrap/5/js/bootstrap.min.js"></script>

After you save the file, the following script tag is also added:
<script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>

I believe the contents of these Javascript files are equal, therefore only one script tag should be kept.

#2

So do you actually select your bootstrap files custom location?

#3

No, I modify the CSS in the assets folder directly. Is there a better way?

Edit: (I dropped Bootswatch’s CSS there)

#4

I don’t understand what you mean. There is one way of using custom Bootstrap paths.

#5

Definitely I haven’t followed that, I just clicked the following button and added Bootstrap 5 custom:

(screenshot is from the documentation)

imagem
imagem1380×784 212 KB

So, after following the link you gave me I have Bootstrap 5 custom in Project settings - what do I do with the Add Framework button? Looks like it always reverts to Bootstrap 5 local. I’m doing that on main.ejs btw

(and the duplicate script tags still appear)

#6

Well … select Bootstrap Custom on your page.

#7

I had to re-create the project and re-do the steps above. For some weird reason Bootstrap Custom was reverting to Local and generating the duplicate tags previously mentioned.

And also it’s not clear in the documentation if one should select Bootstrap Custom on main.ejs, or just the individual pages they’re working on (e.g.: index.ejs). Right now my main.ejs is using “Bootstrap local” (as set by default) and index.ejs is using “Bootstrap custom” (set by me). Can you clear my doubt?

Actually, I just discovered if I select “Bootstrap custom” on main.ejs it reverts to Bootstrap local and the duplicate tags start appearing (after saving the file). I managed to undo this by clicking the Undo button on Wappler till the beginning, but how does one would solve this problem without the Undo functionality and aside from re-creating the project?

#8

Bootstrap custom is only used for sites/pages which are not using the Wappler’s Bootstrap includes but some custom template with Bootstrap files placed at some custom locations. You set it as explained in the doc I sent link to for all the pages you need.
You can’t just select Bootstrap custom without defining the template specific files.

#9

I’m using a custom CSS downloaded from Bootswatch. The only template specific file here is the bootstrap.min.css itself.

Isn’t “Bootstrap 5 custom” the appropriate option here? Please note I cannot use your built-in Bootswatch themes because of another bug, hence I’m manually downloading and overriding the bootstrap.min.css located in the public/bootstrap/5 folder.

Assuming a Blank project, I go to project settings and select Bootstrap 5 custom, with the default JS/CSS locations and then I override the bootstrap.min.css with the one I downloaded from Bootswatch.

I then have two options:

  • I go to main.ejs and select Bootstrap 5 custom, which leads to that weird revert to Bootstrap 5 local and “duplicate” script tags
  • Or I go to index.ejs and select Bootstrap 5 custom, leaving main.ejs untouched regarding the Bootstrap framework

What’s the correct approach?

#10

No, it’s not …
Bootstrap custom is only used when you want to point to files, located in different than the default bootstrap file locations.
In your case (just replacing existing bootstrap files at the default locations) you just use Bootstrap Local.