Adding bottom margin to a row breaks the row class - NodeJS Bootstrap 5

[mgaussie]

======== TEMPLATE BUG FORM ========

Wappler Version : 3.8.2
Operating System : Mac
Server Model: NodeJS
Database Type: MySql
Hosting Type: Docker Local

Expected behavior

What do you think should happen?

I want to add some margin to a row that is within a container.

Actual behavior

What actually happens?

The row class still appears within the code view, but dissappears from the app structure on the right hand side.

How to Reproduce

Create a blank content page, brand new project within a layout page.
Add Main > Container > Row > Column.
Add a margin to the bottom of the row.
Inspect the app structure view.

[Teodor]

What is the row code you see in code view after adding the margin-bottom?

[mgaussie]

<div class="row mb-1 ms-0 me-0 pt-3 pb-3">
            <div class="col">
                <h4 class="fw-bold">Welcome</h4>
            </div>
        </div>

Applying margin-right, margin-left and margin-top all work fine.

[mgaussie]

Bump. Please fix this.

Also noting - including a negative margin top doesn’t do anything.

[Teodor]

@mgaussie

Also noting - including a negative margin top doesn’t do anything.

Looking at the Bootstrap 5 docs, the negative margins are disabled by default. So you need to enable them first:

Spacing

maybe we can improve this, by adding this variable as an option in the Theme Manager or in its advanced section @George

[mgaussie]

Ok, thanks. I’d say then that negative margins need to be excluded from the UI then - or when used, they are automatically enabled by Wappler.

[Teodor]

This has been fixed in Wappler 4.3.1