Trying to create a login page, inserted a container, row(inside), column(inside), display block(inside), form (inside). Now trying to align the form to always be in the centre of the page. I selected the column and tried to set the margin and padding under spacing to auto pulling the outermost left vertical bar but not getting what I require. What am I doing wrong? someone help.
Bootstrap 4 has some great inbuilt functionality for this:
1 Like
<div class="container">
<div class="row">
<div class="col d-flex justify-content-center align-items-center" style="height: 100vh;">
<div style="width: 300px; height: auto;">I AM IN THE CENTER</div>
</div>
</div>
</div>
1 Like
Dave and psweb, thanks for the prompt response which came in minutes, i just put the following
h-100 justify-content-center align-items-center
on the rows tag and it worked. This is my first page on wappler and i am not a developer, infact i have never developed a php page from scratch on my own before, i know very little html so i was a bit scared of touching the wappler generated code. I was hoping you will point me to how to do it using the wappler interface but i am glad i was able to touch the code and it worked. I was actually going through psweb videos on learnwappler.com to build the login page and got stuck at that point. i believe stackoverflow is for hard core developers so i was really scared to use the link dave provided and i actually got the solution from that link. Thanks Guys,but i will be back. LOL
1 Like
Haha stackoverflow can scare the best of us. But there are many fairly simple concepts on there too.
Just do not ask a question on there without showing that you have already tried everything and showing your progress or they will crucify you. Lol.
Once you have your code in place you can always look at the design view panel to see what changes it made which will help show you what you could have done directly in wappler to achieve the same result.
psweb, when do you hope to find little time to continue your tutorial videos on learnwappler.com . The work you have done on that site is what gave me the confidence to try to build a project as a non developer using wappler, their is a lot i still need to learn and your approach of doing a real project step by step and not assuming any step from database to cpanel to using wappler is awesome. please when are you going to continue? your fans are waiting
I am really hoping I will have some time over these holidays to complete it. But I also have some other project ideas in my head too so there should be much more coming.
Thanks Teodor, i actually did, i went through all the pages of the docs, it was useful and i still use it as reference, but nothing comes close to following a real project for nondevelopers like me. The good thing about psweb approach is that it starts with the ending(finished job) which shows you what you are trying to build then step by step you begin the building blocks and the instructor tell you what to do and why its been done. You have a mental picture of where you are, where you are going and why you are doing every little thing. You dont get that in the docs. It also did not start from wappler,it started from database design, cpanel and webserver setup, you learn best practices like naming conventions why its done that way etc he did not go indepth on how the database was designed even though he did touch on it but luckily i have a decent idea of that area. i can pause the video, hear and see exactly what he did when he did it in the sequence and why he did it. i wish someone also can do something like that for using wappler to build a mobile app stepby step.
I simply add a row with three columns and add the login form to the centre column.
That centers horizontally but not vertically too though.
Hi Jayd,
No not at all! Can be a bit picky when questions are not formatted correctly or are repeats (often people post before searching, as I have done), aside from that it is worth signing up there. Don’t be intimidated. 