I have found that Wappler doesn’t like Bootstrap themes not made in Wappler. Would be good if it was a little more flexible but the designer seems to rely on specific bootstrap basics.
Of course you can use custom Bootstrap 4 themes. All you need is to set up the paths to the js and css files which your theme uses, as explained here:
The template you linked to uses Bootstrap 5 Alpha version, which is not supported by Wappler. Bootstrap 5 will be available once the final version is out, we don’t support alpha/beta versions.
1 Like
We’ve used themes from get bootstrap and creative Tim with wappler projects. It’s works fine for the most part in our experience. Some js components need tweaking for proper working. That’s all.
You can use the css out of the box.
The html layout if you are planning on using it will need some adjusting if it depends on external js libraries.
You also will have to change custom components they nornally use for Wappler AC ones.
This is not a plug&play thing but you can perfectly use them. And there is absolutely no way for Wappler team to make them plug&play for the exact same reason you will normally find that for the same theme there are html, angular and react versions.
2 Likes
Have you found the “App structure” doesn’t show if the DIv structure does not follow a strict bootstrap style?
See the example of a bootstrap 4 template I am using. After following the same instructions provided by @Teodor
This is what you get: It is fine in DOM but the App structure is just unusable.
For the most part that is caused by empty divs. You can try to remove or convert them into sections, flex containers or containers where it make sense and the structure will start to appear correctly.
This is the main reason I opened this FR in the past.
And this is also the reason why I use code view 95% of my time.
2 Likes
So how’s this template structured? Is it using standard Bootstrap 4 elements and classes?
Maybe post a screenshot of code view so we can see the actual code.
1 Like
As correctly pointed out by @JonL it occurs when Div is empty and or include custom styles - no Bootstrap style. Very few pre-designed templates uses pure bootstrap on each div it seems.
1 Like
Of course if you guys know a reliable site where templates work well with Wappler by all means point us in the right direction! 
Well templates not using Bootstrap 4 classes and elements as well as generic HTML code should be edited using the DOM panel, that’s it’s purpose.
App structure shows only the App Connect components and Bootstrap 4 components/elements/structure.
There are many producers of templates out there using standard Bootstrap 4 structure and classes which work perfectly fine with Wappler.
1 Like
This happens only when bootstrap is not recognized. You have probably selected wrong file or not fully followed Teodor’s instructions above.
Great, can you provide some guidelines for us so we can eliminate the ones which wont work, I haven’t found any yet, so must be doing something wrong, or picking the wrong ones??
I think this is also what @PraneetB was asking for.
Yep doing exactly as @Teodor suggested. I don’t think that is the issue it’s that Wappler App Structure relies on pure Bootstrap and appears that the majority of designers base on bootstrap but don’t adhere to it completely.
I don’t think that’s the case. I’ve tested multiple templates from multiple template providers such as https://www.creative-tim.com/ and they worked like a charm, as they are using standard Bootstrap 4 structure / classes / elements.
1 Like
If you have a link to your bootstrap4 theme and state exactly the settings you choose for the custom bootstrap4 paths, we can check what is wrong with it.
Thanks @George I just created an new project again following the instructions and same issues
The template is: https://themeforest.net/item/winku-social-network-toolkit-responsive-template/22363538
Root I set to “winku”
The Custom Bootstrap file location:
Site renders ok in editor its just the App Structure not so good as above.
Cheers!
Your template is barely using any Bootstrap 4 code, from what i see they just use some of the grid classes. Also the Bootstrap 4 CSS is included in a different file than the one you selected.
It’s bundled in the: /css/main.min.css
Same for the js, it’s in the /js/main.min.js
So you saying its not good for Wappler?
I am saying that it’s not using much of the Bootstrap 4 components only some grid classes (container, row, col-*) the rest is just custom HTML/CSS components. The is no a “good” or “bad” for Wappler.
Generic HTML code is perfectly use-able in the DOM panel.
But also, another issues is that you have selected wrong CSS and JS files in the options (your last screenshots).
1 Like