How to apply bootstrap?

Wappler General How To
#1

Hi. I am following youtube tutorial step-by-step.


During watching video, the screen in the youtube and my screen is different.
on youtube, it looks some style is (automatically) apply already, but mine is not.
I didn’t miss any stage.
This is on you tube screen,
image
image1260×713 130 KB

and this is mine. no color, no table style…etc.

image
image1845×1079 78.3 KB

Can you help me?
Thanks in advance.

#2

Hi,

If you click this button in the top right, just above the tree, you’ll be able to add Bootstrap

Screenshot 2024-04-01 at 21.49.35
Screenshot 2024-04-01 at 21.49.352616×1084 376 KB

#3

Hi. @Digo
I did it. But it looks the same as before.
the video created in 2022. I think… because of updated?
how the form aligned well and center in the video without applying anything. but mine is just raw design.
But thanks.

#4
  • What does the layout page look like?
  • Are the content pages linked to the layout page?
  • Does the layout page load Bootstrap?
#5

You need to apply it on your main template, not on register.ejs

#6

Hi. @Apple
How can i do that? there was no stage in the video that applying CSS in main template…
however, I guess… below is what you may talking about. if not, could you please guide me?

image
image1956×626 25.7 KB

But still it looks like

image
image862×451 14.3 KB

Thanks.

#7

Very similar to @ Digo instructions

  1. Select your main/base template
    image
    image730×968 31.4 KB
  2. See screenshot:
    image
    image772×594 11.8 KB
  3. See screenshot:
    image
    image1548×1000 143 KB
#8

Hi. @Apple
Thanks.
I did it. but the same. um… is this normal?
image

or did I do something wrong?

Thanks.

#9

Click “App Structure”

You’re welcome!

#10

Hi. @Apple

I am sorry for asking basic things,
this is what my setup. i wonder what setting I missed, it is different in the video… so i am asking.

image
image2554×1538 161 KB

#11

It’s ok! Though I personally lack the time to assist further, someone else will help you :slight_smile:

When you create a new page, you have this:

image
image1594×640 32.3 KB

The page should be based on a base layout (in my screenshot called “main”). If I go to the layouts folder, I can find it there:

image
image730×968 34.1 KB

That “main.ejs” page is the one where you add Bootstrap, following the instructions I mentioned earlier

#12

I checked Primary blue button style, but it doesn’t changed.
how to fix?

image
image1838×1029 83.7 KB

#13

Looks like you still have not added bootstrap to your layout page

#14

I guess that you are ignoring these important questions. So, onto another tack.

The impression that I get, is that you have not followed @Hyperbytes’ playlist from the start. Therefore, there is no layout page that services the content page.

I do not want to confuse you, by pointing to a playlist that I am working on. But this video may offer some clarification.

1 Like
#15

Hi. @ben
Thank you so much for your guide. I will check it for sure. :slight_smile:

#16

Hi. @Hyperbytes
Thanks for the comments. yes. I think so. But I will check the video @ben recommended.