Bootstrap v5 Documentation Skill

Quick access to Bootstrap 5.3.8 framework documentation, components, utilities, and best practices.

Quick Reference

Important Rules

1. Always search scripts/bootstrap-reference.json first before answering Bootstrap-related questions
2. Cite the specific category and slug when providing Bootstrap guidance (e.g., "components-card" for Card component)
3. Distinguish between Bootstrap v4 and v5 — this skill only covers v5.3.8
4. Include actual Bootstrap classes in examples (e.g., btn btn-primary, card card-body)
5. Flag deprecated features if mentioned (search customize/deprecations content)
6. Sass variables — for $variable questions, use bootstrap-variables.json instead of guessing defaults

Usage Guide

This skill provides access to the complete Bootstrap 5.3.8 documentation extracted from the official Bootstrap repository.

Basic Pattern

// In your code
const fs = require('fs');
const reference = JSON.parse(fs.readFileSync('{baseDir}/scripts/bootstrap-reference.json', 'utf8'));
const variables = JSON.parse(fs.readFileSync('{baseDir}/scripts/bootstrap-variables.json', 'utf8'));

// Search for specific component
const result = reference.find(item => 
  item.category === "components" && 
  item.slug.includes("card")
);

// Look up a Sass variable
const primary = variables['_variables.scss']['primary'];

Component Documentation

The scripts/bootstrap-reference.json contains entries from these categories:

• about - Bootstrap overview and ecosystem
• components - All Bootstrap components (alerts, badges, buttons, cards, carousels, dropdowns, modals, navs, navbars, offcanvas, pagination, popovers, progress, spinners, toasts, tooltips)
• content - Typography, images, tables, figures
• customize - Sass variables, color system, components, options, color modes
• extend - Approach, icons, JavaScript, Sass, webpack
• forms - Overview, form controls, select, checks & radios, range, input groups, floating labels, validation
• getting-started - Introduction, download, contents, webpack, parcel, vite
• helpers - Colored links, ratio, position, stacking, visibility, vertical rule
• layout - Breakpoints, containers, grid, columns, gutters, utilities, Z-index
• utilities - API, background, borders, colors, display, flex, float, interactions, overflow, position, shadows, sizing, spacing, text, vertical align, visibility
• migration - Major changes from v4 to v5

Search Strategy

1. Component lookup → category="components", slug contains component name
2. Utility classes → category="utilities", search by utility type (e.g., "spacing", "colors")
3. Forms → category="forms", specific control name
4. Layout → category="layout", "grid" or "breakpoints"
5. Customization → category="customize", "variables" or "sass"
6. Sass variables → scripts/bootstrap-variables.json, key = $variable-name

Key Components Reference

Common Usage Examples

Card with button

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Responsive grid

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">Column 1</div>
    <div class="col-12 col-md-6 col-lg-4">Column 2</div>
    <div class="col-12 col-lg-4">Column 3</div>
  </div>
</div>

Form with validation

<div class="mb-3">
  <label for="email" class="form-label">Email</label>
  <input type="email" class="form-control is-valid" id="email">
  <div class="valid-feedback">Looks good!</div>
</div>

Gotchas

• Bootstrap requires Popper.js for dropdowns, tooltips, and popovers — don't forget to include it
• Container classes have different behaviors: .container (responsive fixed width) vs .container-fluid (full width)
• Grid columns without .row will have incorrect gutters — always wrap in .row
• Custom CSS should override Bootstrap variables in Sass, not use !important
• JavaScript components require Bootstrap's JS bundle — they won't work with CSS-only

Further Reading

• {baseDir}/scripts/bootstrap-reference.json — Complete Bootstrap 5.3.8 documentation index (embedded in skill)
• {baseDir}/scripts/bootstrap-variables.json — Sass variables and defaults from _variables.scss and _utilities.scss
• Bootstrap official docs — Live documentation