So I want to find the best structure of my app in terms of Main, Container, Header and Sections.
As I understand it reading around on the internet:
Container - a BS4 div which the whole page’s content should be wrapped in. Should only be one per page.
Main - to contain the main content of the page, and exclude navigation and repeated items.
Section - a section of content, so to be within Main.
Header - the first part of a page (so including the nav etc) or first part of a Section (so including h1 tag for example)
So I would expect my page structure to be:
container
header with row/col
main
section1 with header, row/col
section2 with header, row/col
However, Wappler won’t let me put a Main inside a Container.
Am I missing something here? Or shall I just let go of the idea of using a Main?
The container is just a <div> with a custom class. You can have as many divs as you need on your page. You can re-use the same class (in this case .container) as many times as you need on your page.
Well yes, that is true from an HTML perspective, but the article is saying that in order the best manage the BS4 layout system then you should have just one container…
Sorry but this isn't true, really I don't know who wrote the article, but if this is said there - he's not familiar with HTML semantics (Bootstrap 4 is just using standard HTML elements)
Bootstrap 4 is nothing more than a library of components. It's the same thing if you create 100 components yourself and reuse them on the page. Nobody can tell you how many times to include a div, or a button on your pages.
I'd suggest to stick to the offuicial Bootstrap 4 docs and their examples: Examples · Bootstrap where you can clearly see they are using multiple containers.
Sorry, this (limiting the usage of the class .container) just makes no sense to me
I.e. you nest the containers where you need bootstrap 4 strucutre.
