Using Bootstrap 4 with Custom Paths
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 4 files are located in a specific vendor folder:
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 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:
