Prettier Plugin Bootstrap

0.3.0 verified Sat May 09 auth: no javascript

A Prettier plugin that automatically sorts Bootstrap CSS classes following the framework's recommended order (layout → components → utilities). Current stable version is 0.3.0, released May 2026, with regular releases. Key differentiators: zero configuration, works with multiple template engines (HTML, JSX/TSX, Vue, Angular, Svelte, Astro), supports custom attributes and functions like clsx, and preserves unknown classes. Requires Prettier ^3.0.0 and Node >=20. Offers options for attribute matching (regex), whitespace preservation, duplicate handling, and version targeting.

Common errors

error Error: Cannot find module 'prettier-plugin-bootstrap' ↓

cause Plugin not installed or not in node_modules.

fix

Run: npm install -D prettier-plugin-bootstrap

error Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/prettier-plugin-bootstrap/... ↓

cause Using CommonJS require() with an ESM-only plugin (v0.3.0+).

fix

Use dynamic import: const plugin = await import('prettier-plugin-bootstrap'); or set "type": "module" in package.json.

error TypeError: prettier.resolveConfig.sync is not a function ↓

cause Using Prettier 2.x API; plugin requires Prettier 3.x.

fix

Upgrade to Prettier 3.x: npm install -D prettier@^3

Warnings

breaking Version 0.3.0 changed plugin export to ESM-only; CJS require() will fail. ↓

fix Use dynamic import(): const plugin = await import('prettier-plugin-bootstrap'); or set type: module.

gotcha bootstrapPreserveWhitespace: false normalizes whitespace, which may affect formatting in JSX/TSX if you rely on whitespace for readability. ↓

fix Set bootstrapPreserveWhitespace: true if original spacing is important.

deprecated bootstrapVersion option currently only accepts 5; future versions may support 4. ↓

fix Set bootstrapVersion: 5 for now.

gotcha Plugin requires Prettier ^3.0.0; will not work with Prettier 2.x. ↓

fix Upgrade to Prettier 3.x: npm install -D prettier@^3.0.0

gotcha Regex in bootstrapAttributes must match the entire attribute name, not partial. ↓

fix Use full pattern like /^data-class/ or an exact string.

gotcha Duplicate classes are kept by default (bootstrapPreserveDuplicates: true). This may cause unexpected results if duplicates are unintentional. ↓

fix Set bootstrapPreserveDuplicates: false to remove duplicates.

Install

npm install prettier-plugin-bootstrap

yarn add prettier-plugin-bootstrap

pnpm add prettier-plugin-bootstrap

Imports

default

wrong

const prettierPluginBootstrap = require('prettier-plugin-bootstrap')

correct

import prettierPluginBootstrap from 'prettier-plugin-bootstrap'

Plugin is ESM-only. For CJS, use dynamic import().

options
```
{
  "plugins": ["prettier-plugin-bootstrap"],
  "bootstrapFunctions": ["clsx"]
}
```
Configure in .prettierrc or prettier.config.js. Options are NOT importable symbols.

Plugin

import { type Plugin } from 'prettier';
import bootstrapPlugin from 'prettier-plugin-bootstrap';
const plugin: Plugin = bootstrapPlugin;

TypeScript types are shipped; the default export is typed as Plugin.

Quickstart

Shows installation, configuration with options, and the sorting result on an HTML file.

// Install: npm install -D prettier prettier-plugin-bootstrap
// .prettierrc
{
  "plugins": ["prettier-plugin-bootstrap"],
  "bootstrapFunctions": ["clsx", "cn"],
  "bootstrapAttributes": ["/^data-class/"],
  "bootstrapPreserveDuplicates": false
}

// Input file (test.html)
<div class="text-center p-3 container bg-primary text-white mb-4 rounded"></div>

// Run: npx prettier --write test.html
// Output:
<div class="container bg-primary text-center text-white mb-4 p-3 rounded"></div>