Skip to content

Bootstrap

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

Back to Getting started

Bootstrap

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

Choose a Bootstrap guide to start. Most guides are hands-on and will insert real components using the normal UI workflow.

Start here

Getting started

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

Utilities (common properties)

Use Bootstrap utilities to quickly style layout and UI: spacing, colors, borders, text, and display/flex helpers.

Categories

Browse Bootstrap components in Wappler and jump into focused tours for each component type.

Bootstrap generators in Wappler: use scaffolding tools to build forms, tables, and UI patterns faster.

Build responsive navigation UIs in Wappler using Nav, Navbar, and collapse/toggler patterns.

Bootstrap content basics: style tables, images, and description lists for clean, readable layouts.

Deep dives

Bootstrap Layout

Build responsive layouts with containers, rows, and columns, and learn the common Bootstrap grid pitfalls to avoid.

Bootstrap 4 → 5 Migration

Migrate from Bootstrap 4 to 5: review key differences, update components, and follow a safe migration order.

Custom Bootstrap Paths

Use custom Bootstrap framework paths to load your own build or theme while keeping Wappler components compatible.

Go to

Wappler Docs Index

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

Browse HTML Editor tours: Quick Overview, Design + Code, and Page Panels.