Diagnose layout issues quickly
Most “broken grid” problems come down to container/row/column nesting or conflicting spacing utilities—check those first.
Bootstrap Layout
Build responsive layouts with containers, rows, and columns, and learn the common Bootstrap grid pitfalls to avoid.
Introduction
In this tour we’ll review the key Bootstrap layout primitives (container → row → columns) and what matters in Properties. Then we’ll finish with a quick “common pitfalls” checklist.
Container
Layout is mostly about choosing the right parents (container → row → columns). Containers set the page width and align content.
tip: Start with a container, then add rows, then columns.
Orient yourself in Properties panel
Start with the wider context in the Properties panel so the next control makes sense in the full workflow. In the next step, you will focus on Container: Type and see how it fits into this area.
Container: Type
In Properties, use Type to switch between a fixed container and a fluid container. This step matters because Container: Type is part of Selection Panels Properties Containertype, and understanding that context makes the next action easier to repeat in your own project.
tip: If your layout feels too wide/narrow, start by checking container vs container-fluid.
Container: ID
Use ID for stable hooks (testing/JS) and deterministic selection. This step matters because Container: ID is part of Selection Panels Properties Theid, and understanding that context makes the next action easier to repeat in your own project.
Row
Rows group columns and define gutters between them. This step matters because Row is part of Design View, and understanding that context makes the next action easier to repeat in your own project.
tip: Rows are about grouping and gutters; columns are where you define widths.
Row: Columns preset
Use the Columns presets to quickly generate a common column layout. This step matters because Row: Columns preset is part of Selection Panels Properties Rowcols, and understanding that context makes the next action easier to repeat in your own project.
Column
Columns define responsive widths (for example, full width on mobile and split on desktop). This step matters because Column is part of Design View, and understanding that context makes the next action easier to repeat in your own project.
tip: Mobile-first: start with col-12, then override at md/lg/xl only when needed.
Column: Child content
Real UI goes inside columns. Style and configure the actual content elements (text, buttons, cards) inside the column.
Wrap-up
Bootstrap layout is about the hierarchy: container → row → columns. Get that right first, then use utilities to fine-tune spacing and alignment.
Common pitfalls
Use this checklist when the grid looks wrong or spacing feels inconsistent.
tip: Tip: design mobile-first; add md/lg overrides only when needed.
Row nested inside another row (missing a column)
Columns are not direct children of a row
Gutters (g-*) vs padding (p-*) mixed unintentionally
Too many breakpoint-specific widths fighting each other
Next steps
Continue with a related tour or go back to the Bootstrap tours index.