A Prettier plugin that automatically sorts Bootstrap CSS classes following the framework's recommended order.

Works with HTML, JSX/TSX, Vue, Angular, and Astro templates.

npm install -D prettier-plugin-bootstrap
# or
pnpm add -D prettier-plugin-bootstrap
# or
yarn add -D prettier-plugin-bootstrap

Add the plugin to your Prettier configuration:

{
  "plugins": ["prettier-plugin-bootstrap"]
}

That's it! Your Bootstrap classes will now be automatically sorted on format.

<div class="text-center p-3 container bg-primary text-white mb-4 rounded"></div>

<div class="container bg-primary text-center text-white mb-4 p-3 rounded"></div>

Classes are sorted following Bootstrap's architecture:

1. Layout — containers, grid, columns
2. Reboot / Typography — headings, lead, display
3. Images — img-fluid, figures
4. Tables — table variants
5. Forms — form controls, selects, checks
6. Buttons — btn variants
7. Components — dropdowns, navs, cards, modals, etc. (alphabetical)
8. Helpers — clearfix, stacks, visually-hidden
9. Utilities — following the order in scss/_utilities.scss

Within each group, responsive variants (sm, md, lg, xl, xxl) sort after the base class.

Unknown classes are preserved in their original relative order and placed after all known Bootstrap classes.

{
  "plugins": ["prettier-plugin-bootstrap"],
  "bootstrapAttributes": ["ngClass", "v-bind:class"]
}

• html — HTML files
• vue — Vue single-file components
• angular — Angular templates
• babel / babel-ts / typescript — JSX/TSX files
• acorn / meriyah — Alternative JS parsers
• astro — Astro components (requires prettier-plugin-astro)

When using with prettier-plugin-astro, list prettier-plugin-bootstrap after prettier-plugin-astro in your config so it can wrap the Astro parser:

{
  "plugins": ["prettier-plugin-astro", "prettier-plugin-bootstrap"]
}

pnpm install
pnpm run build
pnpm run test
pnpm run typecheck

• Prettier >= 3.0.0
• Node.js >= 20

MIT