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.
/plugin marketplace add sjnims/bootstrap-expert/plugin install sjnims-bootstrap-expert@sjnims/bootstrap-expertThis skill inherits all available tools. When active, it can use any tool Claude has access to.
examples/responsive-layouts.htmlreferences/grid-reference.mdBootstrap'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.
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 are the fundamental building block for layouts.
<!-- Fixed-width container (max-width at each breakpoint) -->
<div class="container">...</div>
<!-- Full-width container (100% at all breakpoints) -->
<div class="container-fluid">...</div>
<!-- Responsive containers (100% until specified breakpoint) -->
<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>
| xs<br><576px | sm<br>≥576px | md<br>≥768px | lg<br>≥992px | xl<br>≥1200px | xxl<br>≥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% |
The grid uses a series of containers, rows, and columns.
<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>
<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>
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>
Combine breakpoint infixes for responsive behavior:
<!-- Stack on mobile, side-by-side on md+ -->
<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>
<!-- Different widths at different breakpoints -->
<div class="row">
<div class="col-12 col-sm-6 col-lg-4">Responsive column</div>
</div>
<!-- One column width set, others auto -->
<div class="row">
<div class="col">Auto</div>
<div class="col-6">6 columns</div>
<div class="col">Auto</div>
</div>
<!-- Variable width content -->
<div class="row justify-content-center">
<div class="col-auto">Variable width content</div>
</div>
Control the number of columns per row:
<!-- Always 2 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>
<!-- Responsive: 1 on xs, 2 on sm, 3 on md, 4 on lg -->
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
<div class="col">Item</div>
<!-- More items... -->
</div>
Gutters are the gaps between columns. Default is 1.5rem (24px).
<div class="row gx-5">
<div class="col">Wide horizontal gutters</div>
<div class="col">Wide horizontal gutters</div>
</div>
<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>
<div class="row g-3">
<div class="col-6">Equal gutters</div>
<div class="col-6">Equal gutters</div>
</div>
<!-- No gutters -->
<div class="row g-0">
<div class="col">No gutters</div>
<div class="col">No gutters</div>
</div>
<div class="row g-2 g-md-4 g-lg-5">
<div class="col">Responsive gutters</div>
</div>
<!-- Align all columns in row -->
<div class="row align-items-start">...</div>
<div class="row align-items-center">...</div>
<div class="row align-items-end">...</div>
<!-- Align individual columns -->
<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>
<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>
<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>
<!-- Responsive ordering -->
<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 by columns -->
<div class="row">
<div class="col-md-4 offset-md-4">Centered column</div>
</div>
<!-- Margin utilities for offsets -->
<div class="row">
<div class="col-md-4 ms-auto">Pushed right</div>
</div>
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>
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>
<!-- Custom column count -->
<div class="grid" style="--bs-columns: 3;">
<div class="g-col-1">1/3</div>
<div class="g-col-2">2/3</div>
</div>
Bootstrap provides z-index utility classes for controlling stacking order:
| Class | Value |
|---|---|
.z-n1 | -1 |
.z-0 | 0 |
.z-1 | 1 |
.z-2 | 2 |
.z-3 | 3 |
See references/grid-reference.md for position utilities that work with z-index.
<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>
<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>
<!-- More cards... -->
</div>
references/grid-reference.md - Complete grid class referenceexamples/responsive-layouts.html - Responsive layout patternsThis skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.