prettier-plugin-bootstrap weekly downloads statistics

prettier-plugin-bootstrap

Try it in the playground →

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

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

Why?

• Consistency — Every file in your project uses the same class order, regardless of who wrote it. • Smaller diffs — Sorted classes eliminate noisy reordering in pull requests. • Readability — Classes follow Bootstrap's architecture (layout → components → utilities), making it easier to scan what an element does. • Zero config — Just add the plugin and format. No ESLint rules to configure, no manual sorting.

Installation

Usage

Add the plugin to your Prettier configuration:

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

HTML

JSX / TSX

Vue

Svelte

Astro

Sorting Order

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.

Options

| Option | Type | Default | Description |

| bootstrapAttributes | string[] | [] | Additional HTML attributes to sort (beyond class and className). Supports regex patterns (e.g. /^data-class/). | | bootstrapFunctions | string[] | [] | Function names whose arguments are class lists (e.g. clsx, classNames) | | bootstrapPreserveWhitespace | boolean | false | Preserve original whitespace between classes instead of normalizing to single spaces | | bootstrapPreserveDuplicates | boolean | true | Keep duplicate class names. Set to false to remove duplicates | | bootstrapVersion | int | 5 | Bootstrap version (4 or 5) | | bootstrapSortTemplateLiterals | boolean | true | Sort static class segments inside JSX template literals that contain expressions. Set to false to skip them |

bootstrapAttributes

Sort classes in custom attributes beyond class / className:

bootstrapFunctions

Sort class strings passed to utility functions like clsx:

bootstrapPreserveWhitespace

Keep original whitespace between classes (default: normalise to single spaces):

bootstrapPreserveDuplicates

Remove duplicate class names by setting to false (default: true, keep duplicates):

bootstrapSortTemplateLiterals

By default, static class segments inside JSX template literals with expressions are sorted independently:

Set to false to restore the pre-v0.4.0 behaviour and skip template literals with expressions entirely:

Full example

TypeScript Configuration

For type-safe configuration, use JSDoc annotations:

Regex Attributes

You can use regex patterns in bootstrapAttributes to match dynamic attribute names:

Patterns must be wrapped in forward slashes. Optional flags (i, g, etc.) are supported: /^data-class/i.

File-Level Ignore

Add a comment at the top of a file to skip Bootstrap class sorting for the entire file:

For JS/TS files:

Or block comment style:

Inline Ignore (single element)

To skip sorting for a single element while keeping sorting active for the rest of the file, add an ignore comment on the line before the element:

For JS/TS files:

Public Sorting API

For programmatic use (linters, codemods, build tools), import the sorter directly:

Editor Integration

No editor-specific configuration is needed — the plugin works through Prettier. Enable "Format on Save" in your editor and Prettier will sort classes automatically.

VS Code

1. Install the Prettier - Code formatter extension. 2. Add to .vscode/settings.json:

WebStorm / IntelliJ

Go to Settings → Languages & Frameworks → Prettier and enable Run on save.

Neovim

Use conform.nvim or null-ls with Prettier as the formatter, then enable format-on-save in your config.

Supported Parsers

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

Svelte

When using with prettier-plugin-svelte, list prettier-plugin-bootstrap after prettier-plugin-svelte in your config:

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:

Plugin Compatibility

This plugin works alongside other Prettier plugins. Load order matters — prettier-plugin-bootstrap should come last so it can wrap the parsers registered by other plugins.

| Plugin | Compatible | Load Order |

| prettier-plugin-svelte | Yes | svelte first | | prettier-plugin-astro | Yes | astro first | | prettier-plugin-tailwindcss | N/A | Use one or the other (both sort classes) | | prettier-plugin-organize-imports | Yes | Any order | | @trivago/prettier-plugin-sort-imports | Yes | Any order |

FAQ

Does class sorting affect line wrapping?

Yes. Reordering classes changes the string length, which may cause Prettier to wrap lines differently based on your printWidth setting. This is expected — the formatting is still deterministic and consistent.

Can I use this with Tailwind CSS?

This plugin is designed specifically for Bootstrap's class system. If you use Tailwind CSS, use prettier-plugin-tailwindcss instead. They should not be used together as they have conflicting sort orders.

Development

Compatibility

• Prettier >= 3.0.0 • Node.js >= 20.19 • Bootstrap 5 (class order)

License

MIT

Description from the npm listing.