Hi,
Where can I find a listing of Bootstrap components to add to my page as I am building out items. For instance when I insert a Nav component I would think I should be able to insert Bootstrap components like Buttons, Pills, Navbars etc etc. I do not see any available Bootstrap components when either working directly on the page in Component Edit Mode or via the App Structure Panel. Do I recall correctly that these types of components were previously available in earlier versions?
Thanks.
Is Bootstrap added to your page?
Have you uploaded it to your server? Are you getting any errors on the page? Maybe try using a CDN version?
For reference, my element selector looks like this…
I find that using the quick view menus limits my choices a lot. The ‘More’ option is not available in all situations such as I see in your screenshot.
I turn off the quick view menus in my Wappler settings.
I have tremendous Element Selector Envy. That’s a fine looking list of elements! Ha!
I may have the settings confused in the project settings, I will see if I can get that working tomorrow. Thank You.
Yeah, to get all the elements turn off quick view.
The greatest feature of Wappler is the fact that it makes sure that you adhere to the rules of Bootstrap. These rules are very simple as in
- container
- row
- column
- content
- column
- row
This means that, if you have constructed the code properly as in
<div class="container">
<div class="row">
<div class="col">
<div class="nav w-100"></div>
</div>
</div>
</div>
You will get the following items that you can place inside the navigation bar
I 
Wappler!
Thanks Ben,
Regarding the point on Containers, Is it necessary or recommended to have multiple containers per page, for instance to match my to-level HTML elements: Header, Navigation, Main, Aside, Article, Section Footer or simply have 1 Container per page at the very start of the document?
Thanks.
It depends on the layout and design, there are no rules except for the one that I showed previously.
Ideally, one container per page will suffice.
However, my preference is to have a container for each division on my page. What I mean is, imagine the following layout:
Header
Main
Footer
Then each of these semantic divisions would have its own container. This allows me to apply a background colour to the division that stretches the full width of the browser.
Notice that an <aside> HTML element represents a portion of a document whose content is only indirectly related to the document’s main content. Asides are frequently presented as sidebars or call-out boxes.
1 Like