How to Organize Page Layout

Wappler General Need Help
1

Hi, I am new to Wapler coming from things like Wordpress and Bubble where the page layout was usually done for you. So, I am not sure when and where to use the elements for designing a layout (Header, Main, Section, Footer, Container, Row).

I had been just using containers for everything like shown at https://docs.wappler.io/t/bootstrap-4-layout-basics/2905 but am not sure if/when to use the other options.

Looking at https://www.w3schools.com/html/html_layout.asp I see the header and nav bar are separate, but I was just putting my nav bar in my header, should my nav bar be in the navigation element and does that then go inside the header or after it?

For main, am I supposed to put one on each page view and then put all the further elements into it? Or is it something I do in the layouts?

For sections, are they meant to separate major parts of the page or used more for things like each heading?

Containers are just divs for when you need to group things right?

In things like the header and footer should I use containers or sections?

Aside is used for things like sidebars right?

Rows and Footers are easy enough to understand.

Sorry this post is a bit of a mess, but I look forward to any help.

2

Hi Eric, welcome to Wappler.

Generally, with Bootstrap, the rule to follow is:

Containers -> Rows -> Columns -> Content.

The actual Bootstrap Documentation may be of some help for you.

Please feel free to ask more specific questions on exactly what you are trying to achieve. Good luck!

3

Hi, thanks for the link. My main question right now is are you supposed to use the navigation, main, and section element or can you just do everything with containers? I’ve been watching the tutorials from Hyperbytes and he is just containers and the header element so far.

4

Sections just help you keep. things organized. They really have no effect to design.

Navbars already have a container set up for you. So for nav bars you can just add your navbar. You don’t have to put it in a section.

5

Thanks for all your help, one last question to make sure. Is it fine to have my layout like this?

image
and then just use all containers on the page views?

6

If I understand you correctly, then yes you are on the right track. Your containers on your page views will also rows and columns to layout your content elements.

7

Friendly reminder, you can paste your images directly in the text area of this forum, for better reading :slight_smile:

PS: Welcome to Wappler!

2 Likes
8

Welcome to the world of HTML.

To answer the question: partially right.

Have a look at

While there, have a look at the other HTML elements listed in the sidebar.