Using Bootstrap with Custom Paths

[Teodor]

Often, when using custom Bootstrap 4 templates purchased or downloaded from a template provider you need to use custom include paths for the Bootstrap 4 css and js files. Local and CDN options available in the Frameworks menu are not suitable in such cases.

Using Custom Bootstrap 4 Paths

First you need to setup your project and place all the template files in the site root. You can see that the Bootstrap files for this specific template are located in a specific vendor folder. Of course, these can be in different folders for different templates you download from the internet:

Then open the Project Settings:

Open the Frameworks menu:

By default Bootstrap 4 local is added to your project, but we want to change this. Click the Add New Framework button:

Open the Bootstrap 4 category and select Bootstrap 4 custom:

You will see the Bootstrap 4 local include has been replaced with the custom option. Select it and click the Framework Options button:

The Framework options dialog appears. Here you can select the paths to the Bootstrap 4 js and css files for your specific template. Click the select path for the js include:

Browse to the custom path and select the js file used for your template:

Do the same for the css include:

Browse to the custom path and select the css file for your template:

Click Save:

And then Save the Project Settings:

You can load an HTML page from your project folder and the Bootstrap 4 includes will be recognized by Wappler:

The only thing left is to add the App Connect framework to the page, so you can enjoy the great features it offers. Click the Add Framework button:

And add App Connect:

And you are done. You can use your template and edit it in Wappler:

[webmaster]

This is amazing thank you!

What happens if I am already using a BS template and have linked all the files of that template to the main layout page which I am using in NodeJS. Should I remove all the scripts, and links to JS, and CSS files which I put manually and use the framework options dialog as shown above? or should I keep them?

[JonL]

Is there any difference between doing this and compiling any theme and placing the files where Wappler expects them to be?

Just want to know to see if I should change anything in my project.

What are today’s and expected future advantages of using this method?

[Teodor]

@JonL

Is there any difference between doing this and compiling any theme and placing the files where Wappler expects them to be?

No

The advantages are that you just use your template’s files locations as they are and Wappler won’t change the paths automatically or insert its own includes when using the custom paths options.

[Dave]

@Teodor

Wappler won’t change the paths automatically or insert its own includes when using the custom paths options.

Already this has made my life so much easier thanks again all at Wappler!

[Emiel]

Thanks for this tutorial @Teodor and great feature!

Although it’s all pretty clear, I am just wondering how one knows which css and js files to select, because for both only one can be set in the custom bootstrap settings modal. In other words:
You select bootstrap.bundle.min.js (not bootstrap.min.js) and bootstrap.min.css (not one of the 5 other css files in the css folder) in this tutorial. How do you know these are the right ones to select? And can the other ones just be ignored or should these be included in another way (layout files for NodeJS for example)?

And can this method be used for all kinds of custom themes and UI kits (i.e. MDB and Material UI Kit) as long as they are built with BS4 elements/modules only?

Thanks for your reply in advance!

[Teodor]

@Emiel

How do you know these are the right ones to select?

Well this depends per template. It can be different and field can be naked differently for different templates.
It’s better to check your template docs to see which files do you need.

[Emiel]

I see, but still not sure how to implement it properly when multiple css/js scripts are required.
Could you for example take a look at these UI kit docs? Since there’s only one css file that’s an easy choice and for js I would go for the assets/js/core/bootstrap-material-design.min.js file. But how are all other js files implemented then?

[Teodor]

Well from what i see in their examples the BS4 js file is: bootstrap-material-design.min.js

[Emiel]

Yes, I think so too. But how are the other js files included then? Or can these be ignored and will they be loaded/included by the main BS4 js?

@Emiel

How do you know these are the right ones to select? And can the other ones just be ignored or should these be included in another way (layout files for NodeJS for example)?

Sorry, just trying to understand how to implement this properly without missing scripts and functionalities. Thanks for your reply.

[Teodor]

It’s up to you to include any additional js files / libraries used … the tutorial explains how to point to the custom location of Bootstrap 4 CSS and JS file, so that they can be properly inserted and so that you can edit the site using the visual tools in App Structure.

[Emiel]

@Teodor

It’s up to you to include any additional js files / libraries used

Okay, I understand now that this is the only and optional way to include the other scripts, apart from the custom location settings of BS4 CSS/JS files. Thanks for explaining!

[Emiel]

I am quite sure the answer will be negative but still asking to be sure:
It isn’t possible to edit the custom path bootstrap css through the theme manager, right?

I am asking because I think it’s quite annoying and confusing that component style color swatches don’t match with the custom/uploaded theme colors in the component’s properties settings menu:

(The custom theme’s primary color used in the project from this screenshot is not blue for example.)

[Teodor]

It’s currently not possible. The dropdown shows the standard Bootstrap 4 colors.

[Emiel]

Okay already thought so, but thanks for the quick reply

Do you think this might be possible in an upcoming update?
Would be nice if a custom (pre-built) theme’s settings could be managed with the Theme Manager too.

[oog]

I purchased Folio them from getbootstrap.com. this ist bootstrap 5, no jquery, SASS and gulp theme. The theme contains no bootstrap.min.css file. So setting custom paths, can I set .scss file instead of .css? The theme contains under /assets/vendor/bootstrap/bootstrap.css a file.

[Teodor]

@oog

So setting custom paths, can I set .scss file instead of .css?

No you can’t do this.

@oog

The theme contains under /assets/vendor/bootstrap/bootstrap.css a file

You need to select the css file which comes with your theme. It is different for different themes out there, so better check the documentation.

[oog]

OK, I was wondering, because I did this before. For some reason and after a short walk and a guess it magically worked! However something, without any intermediate change, made it working gg. But thanks for your answer. It is a great community here.