| name | bootstrap-layout |
| description | This skill should be used when the user asks about Bootstrap grid system, Bootstrap containers, Bootstrap breakpoints, Bootstrap columns, Bootstrap rows, Bootstrap gutters, Bootstrap responsive layout, Bootstrap CSS Grid, Bootstrap z-index, Bootstrap row-cols, Bootstrap offset classes, Bootstrap column ordering, how to create responsive layouts with Bootstrap, how to use Bootstrap grid, Bootstrap column sizing, Bootstrap auto-layout columns, or needs help with Bootstrap page layout and responsiveness. |
Bootstrap 5.3 Layout System
Bootstrap's layout system is built on flexbox and provides a powerful 12-column grid for creating responsive layouts. This skill covers containers, the grid system, breakpoints, and layout utilities.
Breakpoints
Bootstrap's responsive design uses six default breakpoints:
| Breakpoint | Class infix | Dimensions |
|---|
| Extra small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |
Breakpoints apply at the specified width and up (mobile-first).
Containers
Containers are the fundamental building block for layouts.
Container Types
<div class="container">...</div>
<div class="container-fluid">...</div>
<div class="container-sm">100% until sm, then fixed</div>
<div class="container-md">100% until md, then fixed</div>
<div class="container-lg">100% until lg, then fixed</div>
<div class="container-xl">100% until xl, then fixed</div>
<div class="container-xxl">100% until xxl, then fixed</div>
Container Max-Widths
| xs
<576px | sm
≥576px | md
≥768px | lg
≥992px | xl
≥1200px | xxl
≥1400px |
|---|
.container | 100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md | 100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid | 100% | 100% | 100% | 100% | 100% | 100% |
Grid System
The grid uses a series of containers, rows, and columns.
Basic Structure
<div class="container">
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
</div>
Equal-Width Columns
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row">
<div class="col">1 of 3</div>
<div class="col">2 of 3</div>
<div class="col">3 of 3</div>
</div>
Specific Column Widths
Use .col-{number} for specific widths (1-12):
<div class="row">
<div class="col-8">8 columns wide</div>
<div class="col-4">4 columns wide</div>
</div>
<div class="row">
<div class="col-3">3 columns</div>
<div class="col-6">6 columns</div>
<div class="col-3">3 columns</div>
</div>
Responsive Columns
Combine breakpoint infixes for responsive behavior:
<div class="row">
<div class="col-12 col-md-6">Left on md+</div>
<div class="col-12 col-md-6">Right on md+</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-lg-4">Responsive column</div>
</div>
Auto-Layout Columns
<div class="row">
<div class="col">Auto</div>
<div class="col-6">6 columns</div>
<div class="col">Auto</div>
</div>
<div class="row justify-content-center">
<div class="col-auto">Variable width content</div>
</div>
Row Columns
Control the number of columns per row:
<div class="row row-cols-2">
<div class="col">Item 1</div>
<div class="col">Item 2</div>
<div class="col">Item 3</div>
<div class="col">Item 4</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
<div class="col">Item</div>
</div>
Gutters
Gutters are the gaps between columns. Default is 1.5rem (24px).
Horizontal Gutters (gx-*)
<div class="row gx-5">
<div class="col">Wide horizontal gutters</div>
<div class="col">Wide horizontal gutters</div>
</div>
Vertical Gutters (gy-*)
<div class="row gy-4">
<div class="col-6">Vertical gutter when wrapping</div>
<div class="col-6">Vertical gutter when wrapping</div>
<div class="col-6">Vertical gutter when wrapping</div>
</div>
Both Gutters (g-*)
<div class="row g-3">
<div class="col-6">Equal gutters</div>
<div class="col-6">Equal gutters</div>
</div>
<div class="row g-0">
<div class="col">No gutters</div>
<div class="col">No gutters</div>
</div>
Responsive Gutters
<div class="row g-2 g-md-4 g-lg-5">
<div class="col">Responsive gutters</div>
</div>
Column Alignment
Vertical Alignment
<div class="row align-items-start">...</div>
<div class="row align-items-center">...</div>
<div class="row align-items-end">...</div>
<div class="row">
<div class="col align-self-start">Top</div>
<div class="col align-self-center">Middle</div>
<div class="col align-self-end">Bottom</div>
</div>
Horizontal Alignment
<div class="row justify-content-start">...</div>
<div class="row justify-content-center">...</div>
<div class="row justify-content-end">...</div>
<div class="row justify-content-around">...</div>
<div class="row justify-content-between">...</div>
<div class="row justify-content-evenly">...</div>
Column Ordering
Order Classes
<div class="row">
<div class="col order-3">First in DOM, last visually</div>
<div class="col order-2">Second</div>
<div class="col order-1">Third in DOM, first visually</div>
</div>
<div class="row">
<div class="col order-md-2">Second on md+</div>
<div class="col order-md-1">First on md+</div>
</div>
Offset Classes
<div class="row">
<div class="col-md-4 offset-md-4">Centered column</div>
</div>
<div class="row">
<div class="col-md-4 ms-auto">Pushed right</div>
</div>
Nesting
Columns can be nested:
<div class="row">
<div class="col-9">
Level 1
<div class="row">
<div class="col-6">Level 2</div>
<div class="col-6">Level 2</div>
</div>
</div>
</div>
Advanced Grid Behaviors
Column Wrapping
When more than 12 columns are placed within a single row, the extra columns wrap onto a new line as one unit:
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4 (wraps to new line since 9 + 4 = 13 > 12)</div>
<div class="col-6">.col-6 (continues on the new line)</div>
</div>
Column Breaks
Force columns to a new line by inserting a full-width element:
<div class="row">
<div class="col-6">Column 1</div>
<div class="col-6">Column 2</div>
<div class="w-100"></div>
<div class="col-6">Column 3 (on new line)</div>
<div class="col-6">Column 4 (on new line)</div>
</div>
Apply breaks at specific breakpoints using display utilities:
<div class="row">
<div class="col-6 col-sm-4">Column 1</div>
<div class="col-6 col-sm-4">Column 2</div>
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">Column 3</div>
</div>
Standalone Column Classes
Use .col-* classes outside a .row to give elements a specific width. When used outside a row, column padding is omitted:
<div class="col-3 p-3 mb-2">
.col-3: width of 25%
</div>
<div class="col-sm-9 p-3">
.col-sm-9: width of 75% above sm breakpoint
</div>
Combine with float utilities for responsive floated images:
<div class="clearfix">
<img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
<p>Text wraps around the floated image...</p>
</div>
Handling Gutter Overflow
Large gutters (like .gx-5) can cause horizontal overflow. Two solutions:
Add matching padding to the container:
<div class="container px-4">
<div class="row gx-5">
<div class="col">Column with large gutter</div>
<div class="col">Column with large gutter</div>
</div>
</div>
Or use an overflow-hidden wrapper:
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">Column with large gutter</div>
<div class="col">Column with large gutter</div>
</div>
</div>
CSS Grid (Alternative)
Note: Bootstrap's CSS Grid system is experimental and opt-in as of v5.1.0. It's disabled by default and requires enabling in your Sass configuration.
Bootstrap 5.3 also supports CSS Grid:
<div class="grid">
<div class="g-col-6">Half width</div>
<div class="g-col-6">Half width</div>
</div>
<div class="grid" style="--bs-columns: 3;">
<div class="g-col-1">1/3</div>
<div class="g-col-2">2/3</div>
</div>
Z-Index Utilities
Bootstrap provides z-index utility classes for controlling stacking order.
Utility Classes
| Class | Value |
|---|
.z-n1 | -1 |
.z-0 | 0 |
.z-1 | 1 |
.z-2 | 2 |
.z-3 | 3 |
These low single-digit values (1, 2, 3) are useful for controlling component states like
default, hover, and active within the same stacking context.
Component Stacking Order
Bootstrap components use a standardized z-index scale with large gaps to prevent conflicts:
| Component | z-index |
|---|
| Dropdown | 1000 |
| Sticky | 1020 |
| Fixed | 1030 |
| Offcanvas backdrop | 1040 |
| Offcanvas | 1045 |
| Modal backdrop | 1050 |
| Modal | 1055 |
| Popover | 1070 |
| Tooltip | 1080 |
| Toast | 1090 |
Warning: Avoid customizing individual z-index values. The scale is designed as a
cohesive system—if you change one value, you likely need to adjust others to maintain
proper layering. Use Sass variables ($zindex-dropdown, $zindex-modal, etc.) to
customize these values consistently.
See references/grid-reference.md for position utilities that work with z-index.
Common Layout Patterns
Sidebar Layout
<div class="container-fluid">
<div class="row">
<nav class="col-md-3 col-lg-2 d-md-block sidebar">
Sidebar
</nav>
<main class="col-md-9 col-lg-10 ms-sm-auto px-md-4">
Main content
</main>
</div>
</div>
Card Grid
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
<div class="col">
<div class="card h-100">Card 1</div>
</div>
<div class="col">
<div class="card h-100">Card 2</div>
</div>
</div>
Sass Customization
When compiling Bootstrap from source, you can customize the layout system through Sass variables and mixins.
Key Variables
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$enable-cssgrid: true;
Media Query Mixins
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-between(sm, xl) { ... }
@include media-breakpoint-only(md) { ... }
Grid Mixins
Create semantic grid layouts without utility classes:
.blog-layout {
@include make-row();
}
.blog-main {
@include make-col-ready();
@include make-col(8);
}
.blog-sidebar {
@include make-col-ready();
@include make-col(4);
}
See references/sass-customization.md for complete variable reference and mixin documentation.
Additional Resources
Reference Files
references/grid-reference.md - Complete grid class referencereferences/sass-customization.md - Sass variables and mixins for layout customization
Example Files
examples/responsive-layouts.html - Responsive layout patternsexamples/sass-customization.scss - Sass customization examples
