Use custom paths when layout matters
Choose this when a downloaded template or shared vendor folder already defines where Bootstrap CSS and JS must live, and changing that structure would break the original package.
Custom Bootstrap Paths
Use custom Bootstrap framework paths to load your own build or theme while keeping Wappler components compatible.
Custom Bootstrap Paths
Section titled “Custom Bootstrap Paths”When using downloaded/purchased Bootstrap templates, the Bootstrap CSS/JS often lives in a template-specific folder (for example a vendor folder). In that case the normal Local/CDN framework options may not match your template paths.
Advanced workflow
Section titled “Advanced workflow”Treat Custom Bootstrap Paths as an advanced workflow for projects that already ship with their own Bootstrap files. It is most useful when you import a commercial template, keep assets in a vendor folder, or need Wappler to point at a custom build without breaking component compatibility.
caution: Make sure your Bootstrap CSS and JS versions match. A mismatched JS bundle can break components like Modals and Offcanvas.
Stay on defaults when you can
If Wappler controls the framework include, the normal Local or CDN setup is easier to maintain, easier to upgrade, and less likely to drift from the framework version your components expect.
Template imports with a pre-built Bootstrap bundle
Custom include locations (vendor folder, CDN mirror, etc.)
Keeping Wappler components working with your own theme/build
When to use this (and when not to)
Section titled “When to use this (and when not to)”Use Custom Paths when you must keep the template’s original vendor file layout. If you control your project structure, Local/CDN frameworks are simpler and easier to maintain.
tip: Goal: make the framework include paths match the files that actually ship with your template.
Use when paths must match
Great for imported templates where vendor files must stay in specific folders.
Avoid if you can
If you control the structure, Local/CDN is easier to maintain and upgrade later.
Project Settings → Frameworks
Section titled “Project Settings → Frameworks”Configure your project frameworks so Wappler can recognize your template’s Bootstrap includes.
Orient yourself in top toolbar
Section titled “Orient yourself in top toolbar”Start with the wider context in the top toolbar so the next control makes sense in the full workflow. In the next step, you will focus on Project Settings and see how it fits into this area.
Project Settings
Section titled “Project Settings”Project Settings is where the Frameworks configuration lives. This step matters because Project Settings is part of App Toolbar Project Settings, and understanding that context makes the next action easier to repeat in your own project.
Orient yourself in Project Options Section
Section titled “Orient yourself in Project Options Section”Start with the wider context in Project Options Section so the next control makes sense in the full workflow. In the next step, you will focus on Frameworks section and see how it fits into this area.
Frameworks section
Section titled “Frameworks section”The “Frameworks” section (left sidebar) controls the project’s included CSS/JS frameworks. This step matters because Frameworks section is part of Project Options Section Frameworks, and understanding that context makes the next action easier to repeat in your own project.
Add “Bootstrap 4 custom”
Section titled “Add “Bootstrap 4 custom””In Frameworks, add “Bootstrap 4 custom” (replacing the default Bootstrap 4 local include). Then open Framework Options and set the JS and CSS paths to your template’s files (for example under a vendor folder).
tip: Local/CDN options are convenient, but template imports often require this custom option to match the actual file locations.
Verify the include paths early
If the paths are wrong, components may still render, but interactive behavior (collapse/offcanvas/modal) will break—test right away.
Add the custom framework entry in Frameworks
Set CSS + JS paths to your template/vendor files
Test JS components (modal/offcanvas) immediately
Save Project Settings
Section titled “Save Project Settings”Save the Framework Options dialog, then Save Project Options so the project frameworks are updated.
important: After changing paths, reload your template page to confirm the includes are recognized.
Wrap-up
Section titled “Wrap-up”Custom Bootstrap Paths are for template imports where the CSS/JS live in vendor folders and the default Local/CDN options don’t match. Keep versions consistent to avoid JS component breakage.
Sanity check
Section titled “Sanity check”After configuring paths, verify:
- The page loads Bootstrap CSS (styles apply)
- The JS bundle matches the CSS major version
- JS components (modal/offcanvas/dropdown) behave correctly
CSS + JS version match
A mismatched JS bundle is a common cause of broken components.
Test one interactive component
Try a dropdown/modal/offcanvas to confirm the bundle is loaded and compatible.
Next steps
Section titled “Next steps”Continue with a related tour or return to the Bootstrap tours index.