Two little Bootstrap 5 Design Issues (Custom Switches and Alerts)

[ChristopheA]

Wappler Version : 3.9.7
Operating System : Win 10 Pro
Server Model: NodeJS
Database Type: MariaDB
Hosting Type: Cloud

Expected behavior

1. The design of the Bootstrap 5 Switch component should be showing correctly like that:
   

2. The design of the Bootstrap 5 Alert component should be showing correctly like that:
   

   

Actual behavior

1. Here is how the Custom Switch is showing:
   

2. Here is how the alert is showing:
   

How to reproduce

1. Try to create a Custom Switch in your form.
2. Try to add an Alert in your page.

1. For the Custom Switch, I noticed that Wappler uses “form-control” instead of “form-check”:

Wappler:
<div class="form-control form-switch">
  <input class="form-control-input" type="checkbox" value="" id="checkbox1" name="checkbox1">
  <label class="form-control-label" for="checkbox1">Default switch</label>
</div>

Bootstrap docs:
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

2. For the Alert, I noticed that Wappler is not adding the CSS class “alert-primary” or “alert-secondary” etc.
   Actually it is only adding type="secondary" but it’s not adding it for “primary” and it doesn’t seems to be working…

PS, I’ve fixed it on my project manually.

Thanks!

[ChristopheA]

Oops, just found another thing, the Select input.
The class added by default is “form-control”, but in Bootstrap 5, the right class is “form-select”

Select

With this new class, the little caret at the right is showing correctly.

[Teodor]

This has been fixed in Wappler 4.0.2