Hi all,
I have a heavy admin dashboard to be created in Wappler. Rather than starting from scratch and considering I’m not a designer, I was looking out for templates for Bootstrap and it seems the bootstrap store has many great looking themes already. The one that I’m seriously looking at is this one:
Would there be any issue using them in Wappler? How do you go about it? Is there something I should keep in mind?
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.
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.
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.
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.
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.
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.
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.
…anyway didn’t want to hijack @PraneetB question 
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.
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?
