How do I install the Bootstrap skill?

Run npx skillmds@latest add 14bryanespinoza/bootstrap in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Bootstrap skill do?

Bootstrap 5 rules - grid, components, utilities, theming with CSS vars and Sass, dark mode, JS plugins, accessibility It is listed under Web & Frontend on SkillMD.

Is Bootstrap safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Bootstrap?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Bootstrap free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Bootstrap?

14BryanEspinoza (@14bryanespinoza) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Bootstrap by 14bryanespinoza — Agent Skill

Name: Bootstrap
Author: 14BryanEspinoza

Bootstrap 5 — Rules and Conventions

1. Philosophy

Utility-first with components — Use utilities for layout/spacing, components for complex UI.
CSS variables for theming — All colors, spacing, radii via CSS vars. Override at :root.
Sass source for customization — Import Bootstrap Sass to customize before compile.
Optional JS — Components work without JS where possible. JS only for interactions.
Accessibility built-in — ARIA attributes, focus management, keyboard nav included.

2. Minimum Version

Technology	Minimum Version
Bootstrap	5.3+
Dart Sass	1.70+
Node.js	22+
pnpm	11+

3. Installation

pnpm (recommended)

pnpm add bootstrap@5.3
pnpm add -D sass

Import (Sass — for theming)

// styles/main.scss
@use "bootstrap/scss/bootstrap" with (
    $primary: #0066cc,
    $secondary: #6c757d,
    $font-family-sans-serif: "Inter",
    system-ui,
    sans-serif,
    $border-radius: 0.5rem,
    $enable-rounded: true,
    $enable-shadows: true
  );

Import (CSS — no theming)

// main.js
import "bootstrap/dist/css/bootstrap.min.css";
import * as bootstrap from "bootstrap"; // JS plugins

JS bundle (only needed components)

// main.js — tree-shakeable imports
import { Tooltip, Toast, Modal, Dropdown, Collapse } from "bootstrap";
// or
import { Tooltip } from "bootstrap/js/dist/tooltip";

4. Layout & Grid

Container

<div class="container">
  <!-- Fixed width breakpoints -->
  <div class="container-fluid">
    <!-- Full width -->
    <div class="container-lg"><!-- 100% until lg --></div>
  </div>
</div>

Grid (12 columns)

<div class="row">
  <div class="col-12 col-md-6 col-lg-4">...</div>
  <div class="col-12 col-md-6 col-lg-4">...</div>
  <div class="col-12 col-md-6 col-lg-4">...</div>
</div>

Gutters

<div class="row g-3">
  <!-- All sides 1rem -->
  <div class="row gx-2 gy-4"><!-- X: 0.5rem, Y: 1rem --></div>
</div>

Rules

Container required for grid
Row > Col direct children only
Responsive classes mobile-first: col- → col-sm- → col-md- → col-lg- → col-xl- → col-xxl-

5. Colors & Theming

CSS Variables (override at :root)

:root {
  --bs-primary: #0066cc;
  --bs-primary-rgb: 0, 102, 204;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-danger: #dc3545;
  --bs-warning: #ffc107;
  --bs-info: #0dcaf0;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-body-font-family: "Inter", system-ui, sans-serif;
  --bs-body-line-height: 1.5;
  --bs-border-radius: 0.5rem;
  --bs-border-radius-lg: 0.75rem;
}

Dark mode

@media (prefers-color-scheme: dark) {
  :root {
    --bs-body-bg: #121212;
    --bs-body-color: #e4e4e4;
  }
}

/* Or class-based */
[data-bs-theme="dark"] {
  --bs-body-bg: #121212;
  --bs-body-color: #e4e4e4;
}

<html data-bs-theme="dark">
  <!-- Force dark -->
</html>

Sass theming (pre-compile)

// styles/main.scss
$primary: #0066cc;
$secondary: #6c757d;
$theme-colors: (
  "primary": $primary,
  "secondary": $secondary,
  "brand": #ff6b35,
);

@use "bootstrap/scss/bootstrap" with (
  $theme-colors: $theme-colors
);

Sass details: see sass skill.

6. Buttons

<!-- Variants -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>

<!-- Sizes -->
<button class="btn btn-sm">Small</button>
<button class="btn btn-lg">Large</button>

<!-- Outline -->
<button class="btn btn-outline-primary">Outline</button>

<!-- Disabled -->
<button class="btn btn-primary" disabled>Aria-disabled</button>

7. Key Components

Component	Classes	JS Required
Accordion	`.accordion`, `.accordion-item`, `.accordion-header`, `.accordion-button`, `.accordion-collapse`	Yes (Collapse)
Card	`.card`, `.card-header`, `.card-body`, `.card-footer`, `.card-img-top`	No
Dropdown	`.dropdown`, `.dropdown-toggle`, `.dropdown-menu`, `.dropdown-item`	Yes (Dropdown)
Modal	`.modal`, `.modal-dialog`, `.modal-content`, `.modal-header`, `.modal-body`, `.modal-footer`	Yes (Modal)
Navbar	`.navbar`, `.navbar-brand`, `.navbar-nav`, `.nav-item`, `.nav-link`, `.navbar-toggler`	Yes (Collapse)
Offcanvas	`.offcanvas`, `.offcanvas-header`, `.offcanvas-body`, `.offcanvas-title`	Yes (Offcanvas)
Toast	`.toast`, `.toast-header`, `.toast-body`	Yes (Toast)

Accordion example

<div class="accordion" id="faq">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button
        class="accordion-button"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#q1"
      >
        Question 1
      </button>
    </h2>
    <div id="q1" class="accordion-collapse collapse show" data-bs-parent="#faq">
      <div class="accordion-body">Answer 1</div>
    </div>
  </div>
</div>

8. Utilities (Essential)

Spacing

| Class | Property | Values | | ----- | -------- | ------ | --- | --- | ---------- | ------- | ------ | ------ | | m{t | b | s | e | x | y}-{0..5 | auto} | margin | 0–3rem | | p{t | b | s | e | x | y}-{0..5} | padding | 0–3rem |

Sizing

| Class | Values | | ------------------ | ---------------- | --- | --- | ------ | ------ | | w-{25 | 50 | 75 | 100 | auto} | width | | h-{25 | 50 | 75 | 100 | auto} | height | | mw-100, mh-100 | max-width/height |

Display

<div class="d-none d-md-block">Hidden mobile, visible md+</div>
<div class="d-flex">Flex container</div>
<div class="d-grid gap-2">Grid container</div>

Flexbox (on `.d-flex`)

| Class | Effect | | -------------------------------------------------------------------- | ---------- | --- | ----------- | ---------- | ---------- | --------- | | flex-row, flex-column, flex-row-reverse, flex-column-reverse | Direction | | justify-content-{start | center | end | between | around | evenly} | Main axis | | align-items-{start | center | end | stretch | baseline} | Cross axis | | flex-{grow | shrink}-{0 | 1} | Grow/shrink | | flex-wrap, flex-nowrap | Wrap |

9. JS Plugins (Pattern)

Data API (declarative)

<!-- Tooltip -->
<button
  class="btn btn-secondary"
  data-bs-toggle="tooltip"
  data-bs-title="Tooltip!"
>
  Hover me
</button>

<!-- Toast -->
<div class="toast" data-bs-autohide="true" data-bs-delay="5000">
  <div class="toast-header">Title</div>
  <div class="toast-body">Message</div>
</div>

Programmatic init

// Initialize all on page
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el))

// Single instance with options
const modal = new bootstrap.Modal('#myModal', { backdrop: 'static', keyboard: false })
modal.show()

// Events
modal._element.addEventListener('shown.bs.modal', () => { ... })

Rules JS Plugin

Data API preferred for simple cases
Programmatic for dynamic content, options, events
Dispose when removing from DOM: instance.dispose()

10. Sass Customization

Import order

// 1. Your variables
$primary: #0066cc;

// 2. Bootstrap with your overrides
@use "bootstrap/scss/bootstrap" with (
  $primary: $primary,
  $enable-rounded: true
);

// 3. Your custom styles
@use "components/button";
@use "components/card";

Key variables

Variable	Default	Purpose
`$primary`	`#0d6efd`	Brand color
`$theme-colors`	map	All semantic colors
`$font-family-sans-serif`	system-ui	Base font
`$border-radius`	`0.375rem`	Global radius
`$enable-shadows`	`true`	Box shadows
`$enable-gradients`	`false`	Gradients

Sass patterns: see sass skill.

11. Icons

pnpm add bootstrap-icons

<!-- SVG sprite -->
<svg class="bi bi-github" width="24" height="24">
  <use xlink:href="/bootstrap-icons/bootstrap-icons.svg#github" />
</svg>

<!-- Or inline -->
<i class="bi bi-github"></i>
<!-- Requires font file -->

Recommendation: Use SVG sprite or inline SVG. Icon font not recommended.

12. Methodology

Before using ANY Bootstrap class/variable/plugin not documented in this skill:

MCP Context7 (priority): context7_resolve-library-id + context7_query-docs for Bootstrap.
Official docs: getbootstrap.com — verify current classes + variables.
Project config: styles/main.scss, package.json — verify against actual setup.
HARD RULE: If not in this skill AND cannot be verified against 2 authoritative sources → DO NOT USE IT. Document as assumption or risk in report to orchestrator.

13. Prohibitions

❌ Do not override Bootstrap CSS with !important — use Sass variables
❌ Do not include full Bootstrap JS bundle — import only needed plugins
❌ Do not use Bootstrap 4 classes (.col-md-6 → .col-md-6 same but check migration)
❌ Do not nest .container inside .container
❌ Do not use .row without .col-* children
❌ Do not disable focus styles — breaks keyboard navigation
❌ Do not skip data-bs-target / href on toggles — required for accessibility

14. References

Note: For CSS conventions, see CSS Note: For JavaScript conventions, see JavaScript Note: For Sass patterns, see Sass Note: For accessibility (WCAG), see Accessibility Note: For performance (Core Web Vitals), see Performance

Last updated: 2026-08

Bootstrap

File contents

Bootstrap 5 — Rules and Conventions

1. Philosophy

2. Minimum Version

3. Installation

pnpm (recommended)

Import (Sass — for theming)

Import (CSS — no theming)

JS bundle (only needed components)

4. Layout & Grid

Container

Grid (12 columns)

Gutters

Rules

5. Colors & Theming

CSS Variables (override at :root)

Dark mode

Sass theming (pre-compile)

6. Buttons

7. Key Components

Accordion example

8. Utilities (Essential)

Spacing

Sizing

Display

Flexbox (on `.d-flex`)

9. JS Plugins (Pattern)

Data API (declarative)

Programmatic init

Rules JS Plugin

10. Sass Customization

Import order

Key variables

11. Icons

12. Methodology

13. Prohibitions

14. References

Frequently asked questions

Bootstrap

File contents

Bootstrap 5 — Rules and Conventions

1. Philosophy

2. Minimum Version

3. Installation

pnpm (recommended)

Import (Sass — for theming)

Import (CSS — no theming)

JS bundle (only needed components)

4. Layout & Grid

Container

Grid (12 columns)

Gutters

Rules

5. Colors & Theming

CSS Variables (override at :root)

Dark mode

Sass theming (pre-compile)

6. Buttons

7. Key Components

Accordion example

8. Utilities (Essential)

Spacing

Sizing

Display

Flexbox (on .d-flex)

9. JS Plugins (Pattern)

Data API (declarative)

Programmatic init

Rules JS Plugin

10. Sass Customization

Import order

Key variables

11. Icons

12. Methodology

13. Prohibitions

14. References

Related skills

Frequently asked questions

How do I install the Bootstrap skill?

What does the Bootstrap skill do?

Is Bootstrap safe to use?

Which AI agents work with Bootstrap?

Is Bootstrap free to use?

Who published Bootstrap?

Flexbox (on `.d-flex`)