## File: README.md
Bootstrap
## Bootstrap 5
Our default branch is for development of our Bootstrap 5 release. Head to the [`v4-dev` branch](https://github.com/twbs/bootstrap/tree/v4-dev) to view the readme, documentation, and source code for Bootstrap 4.
## Table of contents
- [Quick start](#quick-start)
- [Status](#status)
- [What’s included](#whats-included)
- [Bugs and feature requests](#bugs-and-feature-requests)
- [Documentation](#documentation)
- [Contributing](#contributing)
- [Community](#community)
- [Versioning](#versioning)
- [Creators](#creators)
- [Thanks](#thanks)
- [Copyright and license](#copyright-and-license)
## Quick start
Several quick start options are available:
- [Download the latest release](https://github.com/twbs/bootstrap/archive/v5.3.8.zip)
- Clone the repo: `git clone https://github.com/twbs/bootstrap.git`
- Install with [npm](https://www.npmjs.com/): `npm install bootstrap@v5.3.8`
- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap@v5.3.8`
- Install with [Bun](https://bun.sh/): `bun add bootstrap@v5.3.8`
- Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap:5.3.8`
- Install with [NuGet](https://www.nuget.org/): CSS: `Install-Package bootstrap` Sass: `Install-Package bootstrap.sass`
Read the [Getting started page](https://getbootstrap.com/docs/5.3/getting-started/introduction/) 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)
[](https://www.npmjs.com/package/bootstrap)
[](https://rubygems.org/gems/bootstrap)
[](https://atmospherejs.com/twbs/bootstrap)
[](https://packagist.org/packages/twbs/bootstrap)
[](https://www.nuget.org/packages/bootstrap/absoluteLatest)
[](https://coveralls.io/github/twbs/bootstrap?branch=main)
[](https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.min.css)
[](https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.min.css)
[](https://github.com/twbs/bootstrap/blob/main/dist/js/bootstrap.min.js)
[](https://github.com/twbs/bootstrap/blob/main/dist/js/bootstrap.min.js)
[](#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.
Download contents
```text
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-grid.rtl.css
│ ├── bootstrap-grid.rtl.css.map
│ ├── bootstrap-grid.rtl.min.css
│ ├── bootstrap-grid.rtl.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap-reboot.rtl.css
│ ├── bootstrap-reboot.rtl.css.map
│ ├── bootstrap-reboot.rtl.min.css
│ ├── bootstrap-reboot.rtl.min.css.map
│ ├── bootstrap-utilities.css
│ ├── bootstrap-utilities.css.map
│ ├── bootstrap-utilities.min.css
│ ├── bootstrap-utilities.min.css.map
│ ├── bootstrap-utilities.rtl.css
│ ├── bootstrap-utilities.rtl.css.map
│ ├── bootstrap-utilities.rtl.min.css
│ ├── bootstrap-utilities.rtl.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap.rtl.css
│ ├── bootstrap.rtl.css.map
│ ├── bootstrap.rtl.min.css
│ └── bootstrap.rtl.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.esm.js
├── bootstrap.esm.js.map
├── bootstrap.esm.min.js
├── bootstrap.esm.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map
```
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 [Popper](https://popper.js.org/docs/v2/).
## 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 . The docs may also be run locally.
Documentation search is powered by [Algolia's DocSearch](https://docsearch.algolia.com/).
### Running documentation locally
1. Run `npm install` to install the Node.js dependencies, including Astro (the site builder).
2. Run `npm run test` (or a specific npm script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
3. From the root `/bootstrap` directory, run `npm run docs-serve` in the command line.
4. Open in your browser, and voilà.
Learn more about using Astro by reading its [documentation](https://docs.astro.build/en/getting-started/).
### Documentation for previous releases
You can find all our previous releases docs on .
[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.
Moreover, if your pull request contains JavaScript patches or features, you must include [relevant unit tests](https://github.com/twbs/bootstrap/tree/main/js/tests). All HTML and CSS should conform to the [Code Guide](https://github.com/mdo/code-guide), maintained by [Mark Otto](https://github.com/mdo).
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 .
## Community
Get updates on Bootstrap’s development and chat with the project maintainers and community members.
- Follow [@getbootstrap on X](https://x.com/getbootstrap).
- Read and subscribe to [The Official Bootstrap Blog](https://blog.getbootstrap.com/).
- Ask questions and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions).
- Discuss, ask questions, and more on [the community Discord](https://discord.gg/bZUvakRU3M) or [Bootstrap subreddit](https://www.reddit.com/r/bootstrap/).
- Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel.
- 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**
-
-
**Jacob Thornton**
-
-
## Thanks
Thanks to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers!
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/0/website)
[](https://opencollective.com/bootstrap/sponsor/1/website)
[](https://opencollective.com/bootstrap/sponsor/2/website)
[](https://opencollective.com/bootstrap/sponsor/3/website)
[](https://opencollective.com/bootstrap/sponsor/4/website)
[](https://opencollective.com/bootstrap/sponsor/5/website)
[](https://opencollective.com/bootstrap/sponsor/6/website)
[](https://opencollective.com/bootstrap/sponsor/7/website)
[](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/).
---
## File: site/src/content/callouts/danger-async-methods.md
**All API methods are asynchronous and start a transition.** They return to the caller as soon as the transition is started, but before it ends. In addition, a method call on a transitioning component will be ignored. [Learn more in our JavaScript docs.](/docs/[[config:docs_version]]/getting-started/javascript/#asynchronous-functions-and-transitions)
---
## File: site/src/content/callouts/info-mediaqueries-breakpoints.md
**Why subtract .02px?** Browsers don’t currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), so we work around the limitations of [`min-` and `max-` prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.
---
## File: site/src/content/callouts/info-npm-starter.md
**Get started with Bootstrap via npm with our starter project!** Head to the [Sass & JS example](https://github.com/twbs/examples/tree/main/sass-js) template repository to see how to build and customize Bootstrap in your own npm project. Includes Sass compiler, Autoprefixer, Stylelint, PurgeCSS, and Bootstrap Icons.
---
## File: site/src/content/callouts/info-prefersreducedmotion.md
The animation effect of this component is dependent on the `prefers-reduced-motion` media query. See the [reduced motion section of our accessibility documentation](/docs/[[config:docs_version]]/getting-started/accessibility/#reduced-motion).
---
## File: site/src/content/callouts/info-sanitizer.md
By default, this component uses the built-in content sanitizer, which strips out any HTML elements that are not explicitly allowed. See the [sanitizer section in our JavaScript documentation](/docs/[[config:docs_version]]/getting-started/javascript/#sanitizer) for more details.
---
## File: site/src/content/callouts/warning-color-assistive-technologies.md
**Accessibility tip:** Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a [_sufficient_ color contrast](/docs/[[config:docs_version]]/getting-started/accessibility/#color-contrast)) or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.
---
## File: site/src/content/callouts/warning-data-bs-title-vs-title.md
Feel free to use either `title` or `data-bs-title` in your HTML. When `title` is used, Popper will replace it automatically with `data-bs-title` when the element is rendered.
---
## File: site/src/content/callouts/warning-input-support.md
Some date inputs types are [not fully supported](https://caniuse.com/input-datetime) by the latest versions of Safari and Firefox.
---
## File: site/src/content/docs/customize/color.mdx
---
title: Color
toc: true
---
import { getData } from '@libs/data'
import { getSequence } from '@libs/utils'
## Colors
Bootstrap’s color palette has continued to expand and become more nuanced in v5.3.0. We’ve added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged.
Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`.
**Heads up!** There’s some potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6.
| Description | Swatch | Variables |
| --- | --- | --- |
| **Body —** Default foreground (color) and background, including components. | | `--bs-body-color``--bs-body-color-rgb` |
| | `--bs-body-bg``--bs-body-bg-rgb` | |
| **Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states. | | `--bs-secondary-color``--bs-secondary-color-rgb` |
| | `--bs-secondary-bg``--bs-secondary-bg-rgb` | |
| **Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells. | | `--bs-tertiary-color``--bs-tertiary-color-rgb` |
| | `--bs-tertiary-bg``--bs-tertiary-bg-rgb` | |
| **Emphasis —** For higher contrast text. Not applicable for backgrounds. | | `--bs-emphasis-color``--bs-emphasis-color-rgb` |
| **Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value. | | `--bs-border-color``--bs-border-color-rgb` |
| **Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states. | | `--bs-primary``--bs-primary-rgb` |
| | `--bs-primary-bg-subtle` | |
| | `--bs-primary-border-subtle` | |
| Text | `--bs-primary-text-emphasis` | |
| **Success —** Theme color used for positive or successful actions and information. | | `--bs-success``--bs-success-rgb` |
| | `--bs-success-bg-subtle` | |
| | `--bs-success-border-subtle` | |
| Text | `--bs-success-text-emphasis` | |
| **Danger —** Theme color used for errors and dangerous actions. | | `--bs-danger``--bs-danger-rgb` |
| | `--bs-danger-bg-subtle` | |
| | `--bs-danger-border-subtle` | |
| Text | `--bs-danger-text-emphasis` | |
| **Warning —** Theme color used for non-destructive warning messages. | | `--bs-warning``--bs-warning-rgb` |
| | `--bs-warning-bg-subtle` | |
| | `--bs-warning-border-subtle` | |
| Text | `--bs-warning-text-emphasis` | |
| **Info —** Theme color used for neutral and informative content. | | `--bs-info``--bs-info-rgb` |
| | `--bs-info-bg-subtle` | |
| | `--bs-info-border-subtle` | |
| Text | `--bs-info-text-emphasis` | |
| **Light —** Additional theme option for less contrasting colors. | | `--bs-light``--bs-light-rgb` |
| | `--bs-light-bg-subtle` | |
| | `--bs-light-border-subtle` | |
| Text | `--bs-light-text-emphasis` | |
| **Dark —** Additional theme option for higher contrasting colors. | | `--bs-dark``--bs-dark-rgb` |
| | `--bs-dark-bg-subtle` | |
| | `--bs-dark-border-subtle` | |
| Text | `--bs-dark-text-emphasis` | |
### Using the new colors
These new colors are accessible via CSS variables and utility classes—like `--bs-primary-bg-subtle` and `.bg-primary-subtle`—allowing you to compose your own CSS rules with the variables, or to quickly apply styles via classes. The utilities are built with the color’s associated CSS variables, and since we customize those CSS variables for dark mode, they are also adaptive to color mode by default.
### Theme colors
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s `scss/_variables.scss` file.
{getData('theme-colors').map((themeColor) => {
return (
{themeColor.title}
)
})}
All these colors are available as a Sass map, `$theme-colors`.
Check out [our Sass maps and loops docs]([[docsref:/customize/sass#maps-and-loops]]) for how to modify these colors.
### All colors
All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).
Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.
{getData('colors').map((color) => {
if ((color.name !== "white") && (color.name !== "gray") && (color.name !== "gray-dark")) {
return (
${color.name}
{color.hex}
{getSequence(100, 900, 100).map((value) => {
return (
${color.name}-{value}
)
})}
)
}
})}
$gray-500#adb5bd
{getData('grays').map((gray) => {
return (
$gray-{gray.name}
)
})}
$black
#000
$white
#fff
### Notes on Sass
Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We specify the midpoint value (e.g., `$blue-500`) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass’s `mix()` color function.
Using `mix()` is not the same as `lighten()` and `darken()`—the former blends the specified color with white or black, while the latter only adjusts the lightness value of each color. The result is a much more complete suite of colors, as [shown in this CodePen demo](https://codepen.io/emdeoh/pen/zYOQOPB).
Our `tint-color()` and `shade-color()` functions use `mix()` alongside our `$theme-color-interval` variable, which specifies a stepped percentage value for each mixed color we produce. See the `scss/_functions.scss` and `scss/_variables.scss` files for the full source code.
## Color Sass maps
Bootstrap’s source Sass files include three maps to help you quickly and easily loop over a list of colors and their hex values.
- `$colors` lists all our available base (`500`) colors
- `$theme-colors` lists all semantically named theme colors (shown below)
- `$grays` lists all tints and shades of gray
Within `scss/_variables.scss`, you’ll find Bootstrap’s color variables and Sass map. Here’s an example of the `$colors` Sass map:
Add, remove, or modify values within the map to update how they’re used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map.
### Example
Here’s how you can use these in your Sass:
```scss
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
```
[Color]([[docsref:/utilities/colors]]) and [background]([[docsref:/utilities/background]]) utility classes are also available for setting `color` and `background-color` using the `500` color values.
## Generating utilities
Bootstrap doesn’t include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]([[docsref:/utilities/api]]) and our extended Sass maps added in v5.1.0.
1. To start, make sure you’ve imported our functions, variables, mixins, and utilities.
2. Use our `map-merge-multiple()` function to quickly merge multiple Sass maps together in a new map.
3. Merge this new combined map to extend any utility with a `{color}-{level}` class name.
Here’s an example that generates text color utilities (e.g., `.text-purple-500`) using the above steps.
```scss
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
$utilities: map-merge(
$utilities,
(
"color": map-merge(
map-get($utilities, "color"),
(
values: map-merge(
map-get(map-get($utilities, "color"), "values"),
(
$all-colors
),
),
),
),
)
);
@import "bootstrap/scss/utilities/api";
```
This will generate new `.text-{color}-{level}` utilities for every color and level. You can do the same for any other utility and property as well.