Possible Bug with Bootstrap not working correctly

[gunnery]

Wappler: 3.6.0
OS: Mac

Issue:
When you have anything other than the Bootstrap CDN selected in App Structure, all the layout in App Structure does not display properly, eg modals, titles, section etc.
Additionally when you select BS Cosmo and a few others, nothing happens and no changes are made.

I only found this as a project I am working on uses Cosmo.
See video:

wappler-bootstrap issue

[Teodor]

So what is added in the page head tags when you select these bootswatch themese you are having issues with?

[gunnery]

This is added when I add basic CDN

<script src="../dmxAppConnect/dmxAppConnect.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../dmxAppConnect/dmxBootstrap4TableGenerator/dmxBootstrap4TableGenerator.css" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" integrity="sha256-CutOzxCRucUsn6C6TcEYsauvvYilEniTXldPa6/wu0k=" crossorigin="anonymous"></script>
<script src="../dmxAppConnect/dmxBootstrap4Modal/dmxBootstrap4Modal.js" defer=""></script>
<script src="../dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js" defer=""></script>
<script src="../dmxAppConnect/dmxFormatter/dmxFormatter.js" defer=""></script>
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../dmxAppConnect/dmxDropzone/dmxDropzone.css" />
<script src="../dmxAppConnect/dmxDropzone/dmxDropzone.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxDatePicker/daterangepicker.min.css" />
<script src="../dmxAppConnect/dmxDatePicker/daterangepicker.min.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxDatePicker/dmxDatePicker.css" />
<script src="../dmxAppConnect/dmxDatePicker/dmxDatePicker.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxNotifications/dmxNotifications.css" />
<script src="../dmxAppConnect/dmxNotifications/dmxNotifications.js" defer=""></script>
<script src="../dmxAppConnect/dmxDatastore/dmxDatastore.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxValidator/dmxValidator.css" />
<script src="../dmxAppConnect/dmxValidator/dmxValidator.js" defer=""></script>

When I add Darkly

 <script src="../dmxAppConnect/dmxAppConnect.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../dmxAppConnect/dmxBootstrap4TableGenerator/dmxBootstrap4TableGenerator.css" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" integrity="sha256-CutOzxCRucUsn6C6TcEYsauvvYilEniTXldPa6/wu0k=" crossorigin="anonymous"></script>
<script src="../dmxAppConnect/dmxBootstrap4Modal/dmxBootstrap4Modal.js" defer=""></script>
<script src="../dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js" defer=""></script>
<script src="../dmxAppConnect/dmxFormatter/dmxFormatter.js" defer=""></script>
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../dmxAppConnect/dmxDropzone/dmxDropzone.css" />
<script src="../dmxAppConnect/dmxDropzone/dmxDropzone.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxDatePicker/daterangepicker.min.css" />
<script src="../dmxAppConnect/dmxDatePicker/daterangepicker.min.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxDatePicker/dmxDatePicker.css" />
<script src="../dmxAppConnect/dmxDatePicker/dmxDatePicker.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxNotifications/dmxNotifications.css" />
<script src="../dmxAppConnect/dmxNotifications/dmxNotifications.js" defer=""></script>
<script src="../dmxAppConnect/dmxDatastore/dmxDatastore.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxValidator/dmxValidator.css" />
<script src="../dmxAppConnect/dmxValidator/dmxValidator.js" defer=""></script>

Cosmo is hit and miss, with will add the line sometime but not on other times:

<script src="../dmxAppConnect/dmxAppConnect.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../dmxAppConnect/dmxBootstrap4TableGenerator/dmxBootstrap4TableGenerator.css" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" integrity="sha256-CutOzxCRucUsn6C6TcEYsauvvYilEniTXldPa6/wu0k=" crossorigin="anonymous"></script>
<script src="../dmxAppConnect/dmxBootstrap4Modal/dmxBootstrap4Modal.js" defer=""></script>
<script src="../dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js" defer=""></script>
<script src="../dmxAppConnect/dmxFormatter/dmxFormatter.js" defer=""></script>
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../dmxAppConnect/dmxDropzone/dmxDropzone.css" />
<script src="../dmxAppConnect/dmxDropzone/dmxDropzone.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxDatePicker/daterangepicker.min.css" />
<script src="../dmxAppConnect/dmxDatePicker/daterangepicker.min.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxDatePicker/dmxDatePicker.css" />
<script src="../dmxAppConnect/dmxDatePicker/dmxDatePicker.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxNotifications/dmxNotifications.css" />
<script src="../dmxAppConnect/dmxNotifications/dmxNotifications.js" defer=""></script>
<script src="../dmxAppConnect/dmxDatastore/dmxDatastore.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxValidator/dmxValidator.css" />
<script src="../dmxAppConnect/dmxValidator/dmxValidator.js" defer=""></script>

When ever it is not on basic BS CDN it loses all the structure in App Structure

[gunnery]

for some reason the copy and paste into here did not include the BS link
for cosmo it is

<link rel="stylesheet" href="../bootstrap/4/cosmo/bootstrap.min.css" />

for normal BS local (which works)

<link rel="stylesheet" href="../bootstrap/4/css/bootstrap.min.css" />

and cosmo (does not work and loses format in App Structure

<link rel="stylesheet" href="../bootstrap/4/cosmo/bootstrap.min.css" />

[Teodor]

So the standard bs4 includes work fine - local and cdn, and you are having issues with bootswatch themes only?
Is this issue in design view only or is the site not working/looking properly in your browser?

[gunnery]

the design view seem ok it only in App Structure it loses all format

This is how it should look

This is how it looks when Cosmo or any other boots watch theme is added (as you can see all the Modals etc have gone)

Works fine when you do a custom BS theme.

[George]

Will be fixed in the next update. Bootswatch themes weren’t detected correctly indeed.

[brad]

I just ran into this issue as well. Will wait until Thursday’s update to continue working on site.

[Teodor]

Fixed in Wappler 3.6.1