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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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.
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
Section titled “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
Section titled “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
Section titled “Column: Child content”Real UI goes inside columns. Style and configure the actual content elements (text, buttons, cards) inside the column.
Wrap-up
Section titled “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
Section titled “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
Section titled “Next steps”Continue with a related tour or go back to the Bootstrap tours index.