Beginner Question - Buying/Importing themes

Wappler General How To
#1

Hi all,

If I want to buy a theme from the likes of say WrapBootstrap, can I import this into Wappler and if so, how do I do this?

Many thanks in advance.

#2

If it is bootstrap 4 there is not reason why it would not import. Just open the template page(s) in Wappler and save to your project

1 Like
#3

Just tried a template from https://startbootstrap.com/ and it works perfectly

4 Likes
#4

Hi @Hyperbytes, I have imported a bootstrap theme also. But it seems that Wappler doesn’t recognize all the elements. For instance, I would expect a simple Wappler theme to have code similar to this:

<div class="container">
      <div class="row">
        <div class="col">
          <p>A nice paragraph</p>
        </div>
      </div>

Which would produce an app structure like this:

Knipsel

But instead the bootstrap template is like this:

Knipsel
Knipsel.PNG340Ă—553 14.5 KB

While the code is basically the same:

<div class="container">
    <h1 class="my-4">Welcome to Modern Business</h1>
    <div class="row">
      <div class="col-lg-4 mb-4">

It seems like wappler doesn’t recognize / maps the container, row, and columns. Is there any way to make Wappler and bootstrap themes fully compatible?

#5

@nevil from your screenshot it doesn’t seem you included app connect on your page.

#6

I just tried adding the app connect framework, but still the container/row/column components do not show up in the app structure panel

#7

What if you refresh design view or app structure panel?

#8

I tried refreshing design view and app structure, and also tried saving the page, closing it, and loading it again. But still not working

#9

Please zip and attach your HTML file here, so we can inspect it.

#10

startbootstrap-modern-business-gh-pages.zip (965.4 KB)

I have also tried it with a few other free bootstrap templates, but the same problem remains there.

#11

I’ll check this and will get back to you.

1 Like
#12

You simply need to include Bootstrap 4 from the frameworks menu in Wappler because the current includes from the theme aren’t recognized, so Wappler can’t see that the page is made with bootstrap 4.

So again it isn’t that Wappler doesn’t recognize bootstrap elements, it’s just that it doesn’t sees bootstrap because it has weird includes.

So once you include it the Wappler way it will all show up :slight_smile:

1 Like
#13

Hello, so I am having a similar problem. I’ve installed the bootstrap4 framework, JS and the app connect but still getting a flat layout.
Can I send someone my template to have a look at