Element using Bootstrap CSS Grid doesn't appears at app structure

I’m using CSS Grid from boostrap, enabled in advanced variables, but every div using .grid style fades aways.


although it apears here:

Hi @brcomdiego,
The way Wappler’s App Structure panel tree-UI works is a bit weird. It only understands certain classes and elements, and only those are shown.
If you wish to see the complete DOM, there is the DOM panel in the same area that you can use.
Clicking on elements there also shows properties in the bottom section, but fewer options.

1 Like

The App Structure is not a DOM tree, it does not show every HTML element on the page. The App Structure shows the App Connect components only.
If you need access to all HTML elements on the page, then switch to DOM tree.

1 Like

To add to the other replies, be careful when using CSS Grid with Bootstarap, as the Bootstrap documentation states:

Heads up—our CSS Grid system is experimental and opt-in as of v5.1.0! We included it in our documentation’s CSS to demonstrate it for you, but it’s disabled by default. Keep reading to learn how to enable it in your projects.

I have experimented with CSS Grid and found that it has no advantage over using the normal Bootstrap grid system. In fact, it has made it more difficult because it is not facilitated by Wappler.

3 Likes

Thank you so much, guys, it helped a lot. :slight_smile: