Wappler documentation

Bootstrap

Build Bootstrap pages in Wappler: add the framework, use the grid, drop components, and style with utilities and generators.

Open in Wappler

Use this hub when you are building with Bootstrap in Wappler. Start with setup and first steps, then move into semantic components, utilities, categories, and reference.

Start here

Getting startedEnable Bootstrap in a Wappler project and get oriented: frameworks, templates, and where components and utilities come from.Browse path Semantic ComponentsNavigate Wappler's Bootstrap 5 semantic role system, from parent shells and sections to the child components that make editing predictable.Browse path Utilities (common properties)Use Bootstrap utilities to quickly style layout and UI: spacing, colors, borders, text, and display/flex helpers.Browse path

Categories

Inspect and adapt Bootstrap starter blocksChoose a starter layout, edit its actual children and distinguish sample content from a working application feature.View guide ComponentsBrowse Bootstrap components in Wappler and jump into focused tours for each component type.Browse path GeneratorsBootstrap generators in Wappler: use scaffolding tools to build forms, tables, and UI patterns faster.Browse path NavigationBuild responsive navigation UIs in Wappler using Nav, Navbar, and collapse/toggler patterns.Browse path ContentBootstrap content basics: style tables, images, and description lists for clean, readable layouts.Browse path

Reference hubs

Web components and Bootstrap 5Find settings for App Connect components, HTML elements, Bootstrap 5 layouts and starter blocks.Browse path Component referenceChoose the component library, then look up its settings, bindings and actions.Browse path

Deep dives

Bootstrap LayoutBuild responsive layouts with containers, rows, and columns, and learn the common Bootstrap grid pitfalls to avoid.View guide Semantic StructureExplore how Bootstrap 5 semantic parents, sections, cards, and forms fit together in a real page composition.View guide Cascaded Child InsertionSee how semantic children flow through the Structure panel so each parent narrows the right next building block.View guide Bootstrap 4 → 5 MigrationMigrate from Bootstrap 4 to 5: review key differences, update components, and follow a safe migration order.View guide Custom Bootstrap PathsUse custom Bootstrap framework paths to load your own build or theme while keeping Wappler components compatible.View guide

Theme customization

Theme ManagerExplore Theme Manager: Theme Manager tours and Design Framework.View guide Theme Manager (Bootstrap 5)Explore Theme Manager (Bootstrap 5): Confirm Bootstrap 5 is selected and Preview and validate.View guide Theme Manager (Advanced)Explore Theme Manager (Advanced): Switch to Advanced and Preview, then build/upload.View guide