```
### 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)
```html
Title
Message
```
### Programmatic init
```js
// 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
```scss
// 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
```bash
pnpm add bootstrap-icons
```
```html
```
> **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:
1. **MCP Context7** (priority): `context7_resolve-library-id` +
`context7_query-docs` for Bootstrap.
2. **Official docs**: getbootstrap.com — verify current classes + variables.
3. **Project config**: `styles/main.scss`, `package.json`
— verify against actual setup.
4. **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](../css/SKILL.md)
> **Note:** For JavaScript conventions, see [JavaScript](../javascript/SKILL.md)
> **Note:** For Sass patterns, see [Sass](../sass/SKILL.md)
> **Note:** For accessibility (WCAG), see
> [Accessibility](../accessibility/SKILL.md)
> **Note:** For performance (Core Web Vitals), see
> [Performance](../performance/SKILL.md)
---
Last updated: 2026-08