Bootstrap content not working with latest versions about dnn-theme-bootstrap4-instant HOT 13 CLOSED

Please upgrade to DNN 9.6.1 (Fixed many reported issues by updating jQuery to 3.5.1 and fixed an issue with search results page rendering due to jQuery 3.5.0 breaking changes.)

from dnn-theme-bootstrap4-instant.

from dnn-theme-bootstrap4-instant.

@SirAjZellweger could you check this? It could just be a temporary bug with dnn 9.6 fixed in 9.6.1, but it could also be that we need to enhance something so it works with old and new jquery

from dnn-theme-bootstrap4-instant.

Just fyi: from what we see the issue is that the standard CSS we build for the theme is optimized for the current need, and doesn't include all possible Bootstrap parts. Including all by default slows down the page and of course gets punished by Google PageSpeed.
If you need them, you need to activate the Bootstrap Modules like this one: https://github.com/2sic/dnn-theme-bootstrap4-instant/blob/master/src/scss/theme.scss#L43

@SirAjZellweger will create a checklist how to go about this.

from dnn-theme-bootstrap4-instant.

You could make these inclusions modular with a simple setting.

from dnn-theme-bootstrap4-instant.

@existenze I assume you mean a setting somewhere in DNN. That wouldn't work, since changing it means Webpack must run SASS again. So we can't just do this in a UI.

from dnn-theme-bootstrap4-instant.

from dnn-theme-bootstrap4-instant.

Since that mechanism with the imports is very Bootstrap Standard, we believe it's better to stick to that. Otherwise we add another layer of complexity.

from dnn-theme-bootstrap4-instant.

from dnn-theme-bootstrap4-instant.

BTW, you have these two lines in the src/scss/_variables.scss

@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/mixins";

The "mixins" folder exists, but the "functions" one does not.

from dnn-theme-bootstrap4-instant.

@SirAjZellweger could you check?

from dnn-theme-bootstrap4-instant.

BTW, you have these two lines in the src/scss/_variables.scss

@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/mixins";

The "mixins" folder exists, but the "functions" one does not.

These two lines import the following scss files:

• https://github.com/twbs/bootstrap/blob/master/scss/_functions.scss
• https://github.com/twbs/bootstrap/blob/master/scss/_mixins.scss

from dnn-theme-bootstrap4-instant.

@existenze Just fyi: the import statement imports the files mentioned above, not the folders. So the folders are not relevant.

@SirAjZellweger created a checklist for future people looking for this: https://azing.org/2sxc/r/27gI3jSt

from dnn-theme-bootstrap4-instant.