You’re looking at a real grid
This page uses a simple Bootstrap layout so you can explore structure + Properties without distractions.
Bootstrap Quick Overview
Quick overview of Bootstrap in Wappler: add the framework, use the grid, drop components, and style with utilities.
Getting oriented
Section titled “Getting oriented”You’re looking at a simple Bootstrap layout so you can explore structure and Properties without distractions.
Layout example
Section titled “Layout example”A layout is loaded so we can focus on how Wappler represents Bootstrap structures.
tip: If something is hard to click in the canvas, use App Structure to jump to the exact element.
Selection tip
If something is hard to click on the canvas, use App Structure to select the exact element.
How to follow along
Section titled “How to follow along”This tour uses App Structure selection and the Components picker. Keep these panels visible so you always know what will be inserted where.
tip: If a step feels “off”, click the intended node in App Structure first, then retry the insert.
Keep your panels visible
This tour uses App Structure selection and the Components picker — keep them visible so inserts are predictable.
Recover quickly
If a step feels “off”, select the intended node in App Structure first, then retry the insert.
Bootstrap in Wappler
Section titled “Bootstrap in Wappler”Bootstrap is a popular front-end framework for responsive, mobile-first websites. In Wappler you insert Bootstrap components visually and configure them in Properties (no manual markup required for most tasks).
What You’ll Do
Section titled “What You’ll Do”This quick overview inserts a single Bootstrap Container using the same UI path you use every day (App Structure → right-click → Insert Child → Components Panel).
tip: Keep the App Structure panel visible during inserts; it makes selection and placement predictable.
The everyday workflow
Structure → right-click → Insert Child → Components picker. That’s the core UI path used across Wappler.
What you’ll create
Insert a Bootstrap Container as a safe starting point for responsive layouts.
Orient yourself in top toolbar
Section titled “Orient yourself in top toolbar”Start with the wider context in the top toolbar so the next control makes sense in the full workflow. In the next step, you will focus on Make Sure Bootstrap Is Enabled and see how it fits into this area.
Make Sure Bootstrap Is Enabled
Section titled “Make Sure Bootstrap Is Enabled”If you don’t see Bootstrap components in the Components Panel, enable Bootstrap for your project/page first (Frameworks).
important: If Bootstrap isn’t enabled, searches like “Container” may show different (non-Bootstrap) results.
Grid System (Container → Row → Columns)
Section titled “Grid System (Container → Row → Columns)”Bootstrap uses a 12-column grid system. Layouts are typically built with a Container that holds Rows, and Rows that hold Columns.
App Root
Section titled “App Root”The App Root is a stable insert location (it’s always present, so the tour won’t depend on what you already have on the page).
tip: After insertion, the new element is auto-selected in Structure. Follow-up inserts should use the current selection to avoid drifting into existing layout.
Insert Child picker
Section titled “Insert Child picker”Insert Child opens the Components picker for adding a child under the current selection. This step matters because Insert Child picker is part of the Structure panel, and understanding that context makes the next action easier to repeat in your own project.
Components search
Section titled “Components search”The Components search filters the list so you can quickly find what you want to insert. This step matters because Components search is part of Components Popup Anchor Right, and understanding that context makes the next action easier to repeat in your own project.
tip: If multiple results appear, choose the one under “Bootstrap”.
Insert Container
Section titled “Insert Container”A Bootstrap Container is a common starting point for layout. This step matters because Insert Container is part of Components Popup Anchor Right, and understanding that context makes the next action easier to repeat in your own project.
Container Inserted
Section titled “Container Inserted”You now have a real starting point for Bootstrap layouts. Next you can add a Row and Columns inside it (see the “Layout” tour).
tip: Tip: use Rows for horizontal structure; use spacing utilities (gap/margin/padding) for fine tuning.
Conclusion
Section titled “Conclusion”You now know the core insertion workflow (Structure → Insert Child → Components picker). Next, build a full grid (container → row → columns) and start adding real components.
Before you continue
Section titled “Before you continue”You now know the core insertion workflow (Structure → Insert Child → Components picker).
Next, build a full grid (container → row → columns) and start adding real components.
tip: Tip: if the wrong component appears, clear search and pick the Bootstrap category explicitly.
Build the full grid next
Next, build container → row → columns and start shaping real page structure.
Then add components
Once structure is in place, drop in real UI blocks (cards, navbars) and use utilities for spacing/alignment.
Pick Your Next Tour
Section titled “Pick Your Next Tour”Select a tour to continue.