<a href="https://blog.getbootstrap.com/">Blog</a>
</p>
-
## Bootstrap 6
Our default branch is for development of our Bootstrap 6 release. Head to the [`v5-dev` branch](https://github.com/twbs/bootstrap/tree/v5-dev) to view the readme, documentation, and source code for Bootstrap 5.
-
## Table of contents
- [Quick start](#quick-start)
- [Thanks](#thanks)
- [Copyright and license](#copyright-and-license)
-
## Quick start
Several quick start options are available:
Read the [Getting started page](https://getbootstrap.com/docs/6.0/getting-started/) for information on the framework contents, templates, examples, and more.
-
## Status
[](https://github.com/twbs/bootstrap/actions/workflows/js.yml?query=workflow%3AJS+branch%3Amain)
[](#backers)
[](#sponsors)
-
## What’s included
Within the download you’ll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.
We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://web.dev/articles/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Floating UI](https://floating-ui.com/) and [Vanilla Calendar Pro](https://vanilla-calendar.pro/). All CSS files work for both LTR and RTL layouts thanks to logical properties—simply set `dir="rtl"` on your HTML element.
-
## Bugs and feature requests
Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/twbs/bootstrap/issues/new/choose).
-
## Documentation
Bootstrap’s documentation, included in this repo in the root directory, is built with [Astro](https://astro.build/) and publicly hosted on GitHub Pages at <https://getbootstrap.com/>. The docs may also be run locally.
[Previous releases](https://github.com/twbs/bootstrap/releases) and their documentation are also available for download.
-
## Contributing
Please read through our [contributing guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
Editor preferences are available in the [editor config](https://github.com/twbs/bootstrap/blob/main/.editorconfig) for easy use in common text editors. Read more and download plugins at <https://editorconfig.org/>.
-
## Community
Get updates on Bootstrap’s development and chat with the project maintainers and community members.
- Implementation help may be found at Stack Overflow (tagged [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5)).
- Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability.
-
## Versioning
For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under [the Semantic Versioning guidelines](https://semver.org/). Sometimes we screw up, but we adhere to those rules whenever possible.
See [the Releases section of our GitHub project](https://github.com/twbs/bootstrap/releases) for changelogs for each release version of Bootstrap. Release announcement posts on [the official Bootstrap blog](https://blog.getbootstrap.com/) contain summaries of the most noteworthy changes made in each release.
-
## Creators
-**Mark Otto**
+### Mark Otto
- <https://x.com/mdo>
- <https://github.com/mdo>
-**Jacob Thornton**
+### Jacob Thornton
- <https://x.com/fat>
- <https://github.com/fat>
-
## Thanks
<a href="https://www.browserstack.com/">
Thanks to [Netlify](https://www.netlify.com/) for providing us with Deploy Previews!
-
## Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/bootstrap#sponsor)]
[](https://opencollective.com/bootstrap/sponsor/8/website)
[](https://opencollective.com/bootstrap/sponsor/9/website)
-
## Backers
Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/bootstrap#backer)]
[](https://opencollective.com/bootstrap#backers)
-
## Copyright and license
Code and documentation copyright 2011-2026 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors). Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
"js-test-integration-bundle": "rollup --config js/tests/integration/rollup.bundle.mjs",
"js-test-integration-modularity": "rollup --config js/tests/integration/rollup.bundle-modularity.mjs",
"js-test-cloud": "cross-env BROWSERSTACK=true npm run js-test-karma",
- "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint lockfile-lint docs-mdx docs-lint",
+ "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint lockfile-lint docs-mdx docs-md docs-lint",
"docs": "npm-run-all docs-build docs-lint",
"docs-build": "npm run astro-build",
"docs-compile": "npm run docs-build",
"docs-html-validate": "node build/html-validate.mjs",
"docs-mdx": "markdownlint \"site/src/content/**/*.mdx\"",
+ "docs-md": "markdownlint \"*.md\" \"skills/**/*.md\"",
"docs-lint": "npm-run-all docs-prettier-check docs-html-validate",
"docs-prettier-check": "prettier --config site/.prettierrc.json -c --cache site",
"docs-prettier-format": "prettier --config site/.prettierrc.json --write --cache site",
**Pattern:** `.{class}-{bp}-{value}` becomes `.{bp}:{class}-{value}` and `.{class}-{bp}` becomes `.{bp}:{class}`
| v5 | v6 |
-|---|---|
+| --- | --- |
| `.d-md-none`, `.p-lg-3` | `.md:d-none`, `.lg:p-3` |
| `.col-md-6` | `.md:col-6` |
| `.row-cols-md-3` | `.md:row-cols-3` |
Three components have been fully renamed. Find-and-replace these prefixes across classes, data attributes, events, JS imports, and CSS variables.
-**Modal -> Dialog**
+#### Modal -> Dialog
| Scope | v5 | v6 |
-|---|---|---|
+| --- | --- | --- |
| Classes | `.modal`, `.modal-header/body/footer/title` | `.dialog`, `.dialog-header/body/footer/title` |
| Sizes | `.modal-sm/lg/xl/fullscreen` | `.dialog-sm/lg/xl/fullscreen` |
| Data attrs | `data-bs-toggle="modal"`, `data-bs-dismiss="modal"` | `data-bs-toggle="dialog"`, `data-bs-dismiss="dialog"` |
Remove `.modal-dialog` and `.modal-content` wrappers entirely — see Phase 3.
-**Offcanvas -> Drawer**
+#### Offcanvas -> Drawer
| Scope | v5 | v6 |
-|---|---|---|
+| --- | --- | --- |
| Classes | `.offcanvas`, `.offcanvas-start/end/top/bottom/header/body/title` | `.drawer`, `.drawer-start/end/top/bottom/header/body/title` |
| Data attrs | `data-bs-toggle="offcanvas"`, `data-bs-dismiss="offcanvas"` | `data-bs-toggle="drawer"`, `data-bs-dismiss="drawer"` |
| JS export | `Offcanvas` | `Drawer` |
| CSS vars | `--offcanvas-*` | `--drawer-*` |
| Sass | `$zindex-offcanvas` | `$zindex-drawer` |
-**Dropdown -> Menu**
+#### Dropdown -> Menu
| Scope | v5 | v6 |
-|---|---|---|
+| --- | --- | --- |
| Classes | `.dropdown-menu`, `.dropdown-item`, `.dropdown-divider`, `.dropdown-header` | `.menu`, `.menu-item`, `.menu-divider`, `.menu-header` |
| Data attrs | `data-bs-toggle="dropdown"` | `data-bs-toggle="menu"` |
| JS export | `Dropdown` | `Menu` |
Per-color classes are replaced by variant + `.theme-*` composition. Apply to all colors (`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`).
| v5 | v6 |
-|---|---|
+| --- | --- |
| `.btn-primary` | `.btn-solid .theme-primary` |
| `.btn-outline-primary` | `.btn-outline .theme-primary` |
| `.alert-primary` | `.alert .theme-primary` |
### Utility class renames
| v5 | v6 |
-|---|---|
+| --- | --- |
| `.text-primary`, `.text-danger`, etc. | `.fg-primary`, `.fg-danger`, etc. |
| `.text-muted` | `.fg-secondary` |
| `.mh-*` | `.max-h-*` |
v6 replaces the numeric scale with t-shirt sizes (ascending). The full v6 scale is `xs sm md lg xl 2xl 3xl 4xl 5xl 6xl`. The rem values below are the **v5** sizes, shown only to help you match each class.
| v5 (size) | v6 |
-|---|---|
+| --- | --- |
| `.fs-1` (2.5rem) | `.fs-4xl` |
| `.fs-2` (2rem) | `.fs-3xl` |
| `.fs-3` (1.75rem) | `.fs-2xl` |
Keys 3-5 have changed values. To preserve v5 spacing: `.p-3` (1rem) -> `.p-4`, `.p-4` (1.5rem) -> `.p-6`, `.p-5` (3rem) -> `.p-9`.
| Key | v5 | v6 |
-|---|---|---|
+| --- | --- | --- |
| 3 | `1rem` | `0.75rem` |
| 4 | `1.5rem` | `1rem` |
| 5 | `3rem` | `1.25rem` |
### Form validation
| v5 | v6 |
-|---|---|
+| --- | --- |
| `.needs-validation` on `<form>` | `data-bs-validate` on `<form>` |
| `.was-validated` via JS | Remove — `:user-invalid` handles it |
| `<div class="valid-tooltip">` | `<div class="tooltip valid-tooltip">` |
### Renamed JS exports
| v5 | v6 |
-|---|---|
+| --- | --- |
| `Modal` | `Dialog` |
| `Offcanvas` | `Drawer` |
| `Dropdown` | `Menu` |
### Renamed files
| v5 | v6 |
-|---|---|
+| --- | --- |
| `_variables.scss` | `_config.scss` |
| `_variables-dark.scss` | Removed (merged into `_theme.scss`) |
| `_maps.scss` | Removed |
### Renamed variables and functions
| v5 | v6 |
-|---|---|
+| --- | --- |
| `$grid-breakpoints` | `$breakpoints` |
| `$border-radius`, `$border-radius-sm/lg/xl/xxl`, `$border-radius-pill` | Removed — see the radius scale below |
| `$text-muted` | Use secondary color |
### New components (didn't exist in v5)
| Component | Trigger / hook | Purpose |
-|---|---|---|
+| --- | --- | --- |
| Combobox | `data-bs-toggle="combobox"` | Filterable/autocomplete select built on Menu |
| Chip / Chip input | `.chip`, `.chip-input` (`data-bs-chips`) | Tags / tokens + interactive entry |
| Datepicker | `data-bs-toggle="datepicker"` | Date picker (peer dep `vanilla-calendar-pro`) |