Custom Bootstrap 5 with EJS

Wappler General How To
#1

I am trying to use a custom BS5 theme from Creative Tim: https://www.creative-tim.com/product/material-dashboard.

I transformed index.html into a new layout file:

image
image1629×901 185 KB

Then I created a page using the layout and put the content:

image
image1518×922 185 KB

Page renders correctly, but as seen above, design time the content isn’t displayed correctly:

image
image1530×896 256 KB

How can I reflect actual page in design mode? I’ve already updated custom paths for BS5 in project settings.

Edit: I restarted Wappler and it applied the theme but not loaded icons:

image
image1045×907 144 KB

I think this layout includes are not being loaded:

image
image752×335 61.2 KB

#2

Any help is appreciated!

#3

A couple of rules to follow:

  1. Links to stylesheets and scripts need to be placed in the main layout document.
  2. Bootstrap.css comes before any other stylesheets (cascading).
#4

Thanks for that 2nd rule @ben! Solved an issue I had :+1:

Do you also happen to know how to solve the problem that content pages don’t show correctly in “Design view” in Wappler, while they do look perfect in the browser? The custom bootstrap theme’s css and js as set in the project Framework settings are not loaded there it seems.
Workaround is to include and (re)load the custom theme’s js and css file in the content pages. Same for partials like header in custom theme’s style by the way. Do you have a proper solution or any idea why the custom css file is not loaded properly?

#5

Never mind, restarting Wappler (after spending 2 hours editing layouts, partials and content pages trying to fix it) solved this issue :upside_down_face: :grimacing:

#6

So it actually loads well in the preview of a content page? Mine is not loading the CSS properly at all (also external bootstrap theme) . I’d already given up on this but you’re making me think it might work. Care to share some more details?

#7

Hey @karh,

Yeah I have been strugling with this for a while as well, but got it to work in the end.
If you could share your layout and content page codes I might be able to help…