5. Bootstrap basics

Back to 3. Build your first page layout

5. Bootstrap basics

Learn where Bootstrap comes from and why it shapes responsive layout in Wappler.

Getting started

Start here to enable Bootstrap in your project and learn the Wappler workflow for inserting and configuring components.

Getting started

Project setup + first steps.

Start here

Bootstrap Quick Overview

Quick overview of Bootstrap in Wappler: add the framework, use the grid, drop components, and style with utilities.

Open tour

Bootstrap Integration

Understand Bootstrap framework integration in Wappler: versions, layers, common issues, and how to choose the right setup.

Open tour

Good next steps

Semantic Components

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

Open hub

Starter Blocks

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

Open tour

Starter Pages

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

Open tour

Go to

Bootstrap

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

Open tour

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.

Open tour

Wappler Docs Index

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

Open tour