Skip to content

Semantic Components

Navigate Wappler's Bootstrap 5 semantic role system, from parent shells and sections to the child components that make editing predictable.

Back to Getting started

Semantic Components

Navigate Wappler's Bootstrap 5 semantic role system, from parent shells and sections to the child components that make editing predictable.

Bootstrap 5 semantic components give Wappler a role-first vocabulary for building sections, shells, cards, and forms. Instead of styling anonymous wrappers, you work with parents like app-shell, content-area, page-section, feature-grid, pricing-card, and login-form, then insert the children each parent is designed to hold.

Semantic components

Learn the role system, then use it through real insertion and starter-block examples.

Start here

Semantic Structure

Explore how Bootstrap 5 semantic parents, sections, cards, and forms fit together in a real page composition.

Cascaded Child Insertion

See how semantic children flow through the Structure panel so each parent narrows the right next building block.

In practice

See how the latest Bootstrap 5 starter blocks assemble polished pages and why their semantic roles matter after insertion.

Use Pages Manager to create layout, content, partial, and full pages from the new Bootstrap 5 starter catalog.

Go to

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

Getting started

Enable Bootstrap in a Wappler project and get oriented: frameworks, templates, and where components and utilities come from.

Wappler Docs Index

Browse Wappler tours by topic and jump into areas like Why Wappler, Learning the Basics, and Wappler's UI.