Bootstrap Integration

Bootstrap Integration

Bootstrap is the world’s most popular front-end framework, providing a responsive grid system and a wide range of prebuilt components.

With Wappler’s visual tools, you can build valid Bootstrap pages and generate clean, semantic HTML.

Supported versions

Bootstrap integration starts with knowing which framework versions Wappler can work with in a predictable way. This step explains why version support matters, how it affects available components and settings, and what to confirm first before you spend time building on the wrong foundation.

tip: If you don’t see Bootstrap components in the Components Panel, it’s almost always a framework selection issue (project or page).

Pick the right version

Make sure your project/page uses the same Bootstrap major version your templates/components expect.

If components are missing

Open Frameworks and confirm Bootstrap is enabled for the project and the page.

What this tour covers

You’ll learn:

• Where to set frameworks per project
• Where to include frameworks per page
• Local vs CDN for Bootstrap
• Where the key visual tools are (Layout / Components / Properties)

Project vs page

Project frameworks define what’s available; page frameworks define what’s included on a page.

Visual workflow

Use Layout / Components / Properties together to build and tweak quickly.

Including Bootstrap on your Pages

When starting a new project, Bootstrap 5 is typically added to new pages by default. You can change this and fine-tune it in two places.

Two layers of frameworks

Think of frameworks in two layers:

tip: If a Bootstrap option/variant isn’t available in Properties, double-check the page frameworks and Bootstrap version.

Project frameworks

Controls what frameworks/components are available in Wappler for the whole project.

Page frameworks

Controls what CSS/JS is actually loaded on the current page.

• Project frameworks define what’s available and the defaults for new pages.
• Page frameworks control what’s actually included on a given page.

Common symptoms (and what they mean)

If you run into issues, these quick checks usually resolve them:

important: For troubleshooting, Page Frameworks are the source of truth: they control what the browser actually loads on that page.

Styles look wrong

Check for duplicate CSS or a mismatched Bootstrap major version (4 vs 5).

JS components fail

Confirm the Bootstrap bundle is loaded and data attributes match the version you use.

• Bootstrap components missing in the picker → check Project Frameworks (availability/defaults).
• Page looks unstyled → check Page Frameworks (what’s actually included).
• JS components (modal/offcanvas/dropdown) don’t work → verify the correct Bootstrap JS bundle is included and matches your CSS major version.

Per Project: Frameworks

Per project you can add/remove default frameworks and choose what’s available across your project. This is where you set the default Bootstrap framework for new pages.

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 button and see how it fits into this area.

Screenshot: Orient yourself in top toolbarClick to open the larger image

Project Settings button

The next step opens Project Options and jumps directly to the Frameworks section. This step matters because Project Settings button is part of App Toolbar Project Settings, and understanding that context makes the next action easier to repeat in your own project.

tip: This is where you manage project-wide defaults like Frameworks.

Screenshot: Project Settings buttonClick to open the larger image

Project Options editor

Here you can add or remove default frameworks for your project.

Typical tasks:

• Add Bootstrap
• Choose Bootstrap 4 vs Bootstrap 5
• Add optional Bootswatch themes

tip: Project frameworks define defaults and availability. Page frameworks control what’s actually included on a given page.

Screenshot: Project Options editorClick to open the larger image

Sidebar navigation

Use the sidebar to navigate between different project settings sections.

Screenshot: Sidebar navigationClick to open the larger image

Frameworks section

The Frameworks section is where you manage default frameworks used for your project and for new pages.

tip: If your page already exists, you still need to include Bootstrap per page (next section).

Screenshot: Frameworks sectionClick to open the larger image

Per Page: Frameworks

You can also include Bootstrap per page. This is where you pick the Bootstrap version for the current page and optionally select a Bootswatch theme.

Frameworks example

This tour uses a page with a few Bootstrap components so per-page Frameworks and visual tools have something concrete to work with.

tip: This keeps the focus on frameworks/settings, not on your project’s current page.

Concrete sandbox

Working on a known sample page keeps the focus on frameworks/settings.

Watch what changes

After changing frameworks, re-check the same components for styling and behavior.

Page frameworks control inclusion

Use the page-level Frameworks button to include Bootstrap on this page and choose:

• Bootstrap 4 or Bootstrap 5
• Optional Bootswatch theme
• Local vs CDN

tip: If you’re using a purchased template with vendor folders, local/CDN aren’t enough — use “Custom Bootstrap Paths” (advanced) instead.

Switch back to the page

The next step returns to the current page in Design view before opening the page-level Frameworks picker.

Orient yourself in Structure panel

Start with the wider context in the Structure panel so the next control makes sense in the full workflow. In the next step, you will focus on Page frameworks button and see how it fits into this area.

Screenshot: Orient yourself in Structure panelClick to open the larger image

Page frameworks button

The next step opens the page-level Frameworks picker from the current page so you can choose the actual Bootstrap include for this page.

Screenshot: Page frameworks buttonClick to open the larger image

Frameworks picker

The Frameworks picker uses the same UI as the Components picker, with a left menu for filtering what can be included.

Screenshot: Frameworks pickerClick to open the larger image

Bootstrap includes

Filtering the picker to Bootstrap shows the framework includes and optional themes you can add for this page.

Screenshot: Bootstrap includesClick to open the larger image

Local vs CDN

You can include a local version of Bootstrap or one hosted on a CDN (Content Delivery Network). Both are valid — choose based on your workflow and deployment needs.

When to use each

Local:

• Files are stored in your project and served from your own server
• Useful for offline development or full control

CDN:

• Files are served from fast global servers close to visitors
• Often improves loading times and caching across sites

tip: You can switch between Local and CDN later from the Frameworks settings.

Local = full control

Best when you need offline dev or predictable assets under version control.

CDN = fast defaults

Great for caching and quick setup; still verify versions match your needs.

Close the Frameworks picker

The next step closes the picker so you can continue.

Keep moving

Close the picker and return to the editor flow for the next step.

If something changed

If your page suddenly looks different, re-check what Bootstrap version is included.

Visual Tools

Wappler makes working with Bootstrap easy — no need to look up classes in the documentation. Everything you need to build Bootstrap websites is available visually.

Layout tools

Build your Bootstrap layout visually using the layout builder tools.

Start with the standard structure:

• Container
• Row
• Columns

tip: You can resize column widths visually per breakpoint using the handles in the Design canvas.

Screenshot: Layout toolsClick to open the larger image

Components

Add components to your pages visually using the smart context panel. It suggests only the components that are suitable for your current selection.

Typical flow:

• Select an element in Structure or in the canvas
• Open the Components picker
• Insert a Bootstrap component appropriate for that selection

tip: If the picker doesn’t show Bootstrap components, re-check project + page frameworks.

Screenshot: ComponentsClick to open the larger image

Properties Inspector

Use the Properties Inspector (Selection Panels) to style selected elements and configure Bootstrap options visually.

Examples:

• Variants
• Spacing (margins/padding)
• Borders and colors
• Component behavior

tip: If you don’t see the Properties panel, open it from the Selection Panels area.

Screenshot: Properties InspectorClick to open the larger image

Continue with the next tours

Use these focused tours next:

Conclusion

With Bootstrap integrated you can start building responsive layouts and adding components visually in Wappler.

Quick checklist:

• Project frameworks: Bootstrap available by default
• Page frameworks: Bootstrap included on the page
• Pick Local vs CDN
• Use Layout / Components / Properties to build faster

tip: If something looks wrong visually, verify the included Bootstrap version and whether the page is using Local/CDN as intended.

You’re ready to build

Start with Layout for structure, then add Components and tune with Properties.

If you get stuck

Most issues are caused by missing/duplicate includes or version mismatches.

Wrap-up

You’ve connected Bootstrap to your project and learned where to control project vs page frameworks. Next, build confidence with hands-on tours.

Recommended next tours

Pick a focused tour based on what you want to build next.

Done

You can return to the Bootstrap tours index to pick another topic anytime.

Keep exploring

Pick another Bootstrap topic to practice building faster with Wappler.

Back to the hub

Return to the Bootstrap index to browse all related tours.