Build your first page layout
A beginner-friendly path from Pages Manager to the HTML Editor and Bootstrap basics so you can build your first real page layout.
Build Your First Page Layout
Use this route to get from a project to a recognizable first page. Follow it in order from Pages Manager to the HTML Editor and your first Bootstrap layout.
Build your first page
Section titled “Build your first page”Finish the layout sequence first, then open optional depth only if needed.
Complete in order
Pages Manager
Focused walkthrough of the Pages Manager panel: folder tree, page listing, and the handoff into the HTML Editor.
Starter Pages
Use Pages Manager to create layout, content, partial, and full pages from the new Bootstrap 5 starter catalog.
Design + Code Overview
Explore HTML Editor Design Code: key areas and how they work together.
Insert a component
Learn how to insert a component in the HTML Editor. Use this tour as a quick refresher.
Getting started
Enable Bootstrap in a Wappler project and get oriented: frameworks, templates, and where components and utilities come from.
Bootstrap Layout
Build responsive layouts with containers, rows, and columns, and learn the common Bootstrap grid pitfalls to avoid.
Starter Blocks
See how the latest Bootstrap 5 starter blocks assemble polished pages and why their semantic roles matter after insertion.
Optional depth
Working with Elements
A practical Wappler path for everyday page editing: insert tags, move elements, apply classes, control spacing, and keep responsive images sane.
Semantic Components
Navigate Wappler's Bootstrap 5 semantic role system, from parent shells and sections to the child components that make editing predictable.
Add App Connect to Your Pages
Understand when a page needs App Connect and how to introduce reactive behavior without turning a simple page into unnecessary complexity.
Go to