Problems with Bootstrap Design

OS info

  • Operating System : Mac OSX 21.6.0
  • Wappler Version : 5.6.1

Problem description

Bootstrap design is not working but wappler says all frameworks are fine. Tried reinstalling wappler, no luck yet. Any project I create seems become a plain HTML without any bootstrap design.

  1. Inlcuded a video for sample but cannot add a video since I’m a new user

Can you please post some screenshots explaining the issue?
Also, what server model and development environment are you using?

Also, is this a normal thing that should be allowed?

This is what’s happening.

What server model are you using? What dev environment? From your screenshot it seems your target server is not running.

I think it’s running. Node.js with docker

I see an exclamation mark icon next to your target name, so there must be something wrong there. Check the bottom panel for errors.

Not sure how to or where to check?

Can anyone help me? I tried reinstalling all but still the same.

Are these layout pages or partials? I think it has something to do with your setup, not Wappler. As Teodor mentioned, you have a problem with your target set up as indicated by the warning icon in your target.

Can you provide also screenshots of your target set ups?

These are not working whether layout, pages, or partials. I’m not sure why but it is working properly the other 2 days and I did not touch any targets yet. Sorry, I’m still new here and still in trial version. Hoping to maximize my trial version, but its 3 days already and I can’t make it work. :frowning:

No need to be sorry! :wink:

I see you are using the Linux version? Your targets look fine to me. But it still looks like you have a problem with running the local server. I don’t have a Linux box to test on but maybe there is an issue with Linux?

Can you also post screenshots of your platforms and general settings? I think you have two different problems happening. Stick with it!

I’m actually running it i. MacOS intel chip. Will take screenshots. :slight_smile: Thank you

Also have you checked out the videos on the YouTube channel? They show how to properly set up and use node.js.

Yes, I actually followed Hyperbytes’ Wappler 5 Quickstart. But he used SQlite database and Wappler Local Server. I’m trying to use docker with Postgresql. :smiley:

But I think this is not target related. I created a new project with a Wappler Local Server and Node JS and its still the same. With the target indicator just doing fine.

My observation tells me that its because of the bootstrap? When I added styles using CSS, styles from css works but not from bootstrap css.

PS. Even font awesome fonts are not being loaded. Maybe its a bug with frameworks?

Just curious, can you post your form code here? First off, you container should have a row and column in it then the form inside the column. Your Bootstrap structure is wrong to begin with.

I’d like to see your form code to be sure the bootstrap classes are even there. How did you build the form?

Edit: Actually maybe post the code for the entire page. Wrap your code in three ``` so it shows in the forum.

It came from the default wappler block. It seems, frameworks are not being installed?

    <!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="index" appConnect="local" -->
<meta name="ac:route" content="/">
<script is="dmx-flow" id="flow1" type="text/dmx-flow" src=""></script>
<i class="fas fa-address-book"></i>
<div class="container">
    <form id="signup1">
        <div class="row">
            <div class="col-12 col-md-8 col-lg-7 col-xl-5 text-start">
                <div class="row">
                    <div class="col">
                        <h1>Sign Up</h1>
                        <p class="text-h3">Enter your details below.</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col mt-4">
                        <input type="text" id="inp_email" name="email" class="form-control" placeholder="Email">
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col">
                        <input type="password" id="inp_password" name="password" class="form-control" placeholder="Password">
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col">
                        <button id="signup1_submit" class="btn" type="button">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

From my testing, it seems that wappler is not importing required scripts such as font awesome and bootstrap

Those would be on your layout page (main).

Can you post the code from that page? Your content page looks fine.

Also, just to test, in your General Settings, change Links Relative to Site Root to Document. Even though Site Root should work.

1 Like