Bootstrap 4 form's column setting

Hello,

I am trying to create Bootstrap 4 form like a screenshot.
06
I would like to make a setting like screenshot for a mobile, and make all these three things in one row for a desktop browser.

Please kindly let me know how to do it.

I could do by this though, I can not go further by myself.


Thanks!

Hello,
Please check the following tutorial:

1 Like

It’s a pity that we have to insert an extra div.col element for each div.form-group element when the latter could house the col class.

2 Likes

Thank you so much, both of you guys!!

I could solve this one.
However, I’ve got another issue.
Please see the screenshot below.

I’m building SPA though, the first screenshot is inside of the page.
(this is which you gave me the advice)

Then, if I displayed the internal page in the main page, it looks like below.

I don’t know what to do next…

It’s not really clear what do you mean by:

Can you explain a little more detailed? If possible also provide a link if there is a problem on the page.

Hi Teodor,

I am working under local environment.
so please see my reply.

My route properties (left side, under Routes on the left) is like this.
Name:home
Path:/
Url:index.html

Route properties(right side, under App structure)
ID:home
Path:/
Url:home.html

When I see index.html on Wappler, I see this which is not supposed to be.

When I see home.html
I see below


This has to be shown on index.html too.

Do you have any thoughts?

Not sure if this ill help, but here is my setup:

Routes:

App Structure:
image

Hi Ben,

I deleted route properties’ Url from App structure as you mentioned, then the internal part was gone…

Thanks,

Sorry, but I am really confused by your explanation.
Is your problem that your page looks differently in the browser and in the Design View of Wappler?

Hi Teodor,

Structure is like this.

index.html (like parent)
-home.html (child)

when I see the design view of index.html(this is not what I want)

when I see the design view of home.html(this is what I want even if I see design view of index.html)

I don’t know why the design changed even in SPA.

Hope you understand my question…

How does your page look in your browser? Is it fine there?
Can you also post a screenshot of the whole Wappler window with your page loaded there?

I attach screenshots here.

I want to see the content of the 2nd one exactly inside of the 1st one.

Thanks,

How does your page look in your browser. Something is not quite right I think, are you sure there is not some CSS included on the main page which styles the child page? It looks to me that this is the case…

this is the browser screen shot.

Yes, it is slightly different

I think I use the same style.css though, still can be there any differences between main page and child page?

I’m sure there is some CSS file included in the index.html page head tags which styles your content like this.
Please check your CSS files and rules.

1 Like

Hello Teodor,

I could find a solution.

Thank you so much!

1 Like