icon: book-half
icon_color: indigo
pages:
- - title: Introduction
- - title: Download
+ - title: Install
+ # - title: Introduction
+ - title: Approach
- title: JavaScript
- title: Accessibility
- - title: RFS
- - title: RTL
+ # - title: Community
+ # - title: RFS
- title: Guides
icon: map
icon_color: green
pages:
+ - title: Quickstart
+ - title: npm
- title: Webpack
- title: Parcel
- title: Vite
- title: Color modes
- title: Components
- title: CSS variables
+ # - title: RTL
- title: Optimize
- title: Layout
- title: Opacity
- title: Shadows
-- title: Extend
- icon: tools
- icon_color: blue
- pages:
- - title: Approach
- - title: Icons
-
- title: About
icon: globe2
icon_color: indigo
Utilize our source Sass files to take advantage of variables, maps, mixins, and more.
-<Callout type="warning">
-Sass deprecation warnings are shown when compiling source Sass files with the latest versions of Dart Sass. This does not prevent compilation or usage of Bootstrap. We’re [working on a long-term fix]([[config:repo]]/issues/40962), but in the meantime these deprecation notices can be ignored.
-</Callout>
-
## File structure
Whenever possible, avoid modifying Bootstrap’s core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you’re using a package manager like npm, you’ll have a file structure that looks like this:
+++ /dev/null
----
-title: Approach
-description: Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself.
-aliases:
- - "/docs/[[config:docs_version]]/extend/"
----
-
-While the getting started pages provide an introductory tour of the project and what it offers, this document focuses on _why_ we do the things we do in Bootstrap. It explains our philosophy to building on the web so that others can learn from us, contribute with us, and help us improve.
-
-See something that doesn’t sound right, or perhaps could be done better? [Open an issue]([[config:repo]]/issues/new/choose)—we’d love to discuss it with you.
-
-## Summary
-
-We'll dive into each of these more throughout, but at a high level, here’s what guides our approach.
-
-- Components should be responsive and mobile-first
-- Components should be built with a base class and extended via modifier classes
-- Component states should obey a common z-index scale
-- Whenever possible, prefer an HTML and CSS implementation over JavaScript
-- Whenever possible, use utilities over custom styles
-- Whenever possible, avoid enforcing strict HTML requirements (children selectors)
-
-## Responsive
-
-Bootstrap’s responsive styles are built to be responsive, an approach that’s often referred to as _mobile-first_. We use this term in our docs and largely agree with it, but at times it can be too broad. While not every component _must_ be entirely responsive in Bootstrap, this responsive approach is about reducing CSS overrides by pushing you to add styles as the viewport becomes larger.
-
-Across Bootstrap, you’ll see this most clearly in our media queries. In most cases, we use `min-width` queries that begin to apply at a specific breakpoint and carry up through the higher breakpoints. For example, a `.d-none` applies from `min-width: 0` to infinity. On the other hand, a `.d-md-none` applies from the medium breakpoint and up.
-
-At times we'll use `max-width` when a component’s inherent complexity requires it. At times, these overrides are functionally and mentally clearer to implement and support than rewriting core functionality from our components. We strive to limit this approach, but will use it from time to time.
-
-## Classes
-
-Aside from our Reboot, a cross-browser normalization stylesheet, all our styles aim to use classes as selectors. This means steering clear of type selectors (e.g., `input[type="text"]`) and extraneous parent classes (e.g., `.parent .child`) that make styles too specific to easily override.
-
-As such, components should be built with a base class that houses common, not-to-be overridden property-value pairs. For example, `.btn` and `.btn-primary`. We use `.btn` for all the common styles like `display`, `padding`, and `border-width`. We then use modifiers like `.btn-primary` to add the color, background-color, border-color, etc.
-
-Modifier classes should only be used when there are multiple properties or values to be changed across multiple variants. Modifiers are not always necessary, so be sure you’re actually saving lines of code and preventing unnecessary overrides when creating them. Good examples of modifiers are our theme color classes and size variants.
-
-## z-index scales
-
-There are two `z-index` scales in Bootstrap—elements within a component and overlay components.
-
-### Component elements
-
-- Some components in Bootstrap are built with overlapping elements to prevent double borders without modifying the `border` property. For example, button groups, input groups, and pagination.
-- These components share a standard `z-index` scale of `0` through `3`.
-- `0` is default (initial), `1` is `:hover`, `2` is `:active`/`.active`, and `3` is `:focus`.
-- This approach matches our expectations of highest user priority. If an element is focused, it’s in view and at the user’s attention. Active elements are second highest because they indicate state. Hover is third highest because it indicates user intent, but nearly _anything_ can be hovered.
-
-### Overlay components
-
-Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest `z-index`, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own `z-index` scale that begins at `1000`. This starting number was chosen arbitrarily and serves as a small buffer between our styles and your project’s custom styles.
-
-Each overlay component increases its `z-index` value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal’s action), so we put that above our navbars.
-
-Learn more about this in our [`z-index` layout page]([[docsref:/layout/z-index]]).
-
-## HTML and CSS over JS
-
-Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you.
-
-This principle is our first-class JavaScript API using `data` attributes. You don’t need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in [our JavaScript overview page]([[docsref:/getting-started/javascript#data-attributes]]).
-
-Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a `.btn` class on nearly any element, but most elements don’t provide any semantic value or browser functionality. So instead, we use `<button>`s and `<a>`s.
-
-The same goes for more complex components. While we _could_ write our own form validation plugin to add classes to a parent element based on an input’s state, thereby allowing us to style the text say red, we prefer using the `:valid`/`:invalid` pseudo-elements every browser provides us.
-
-## Utilities
-
-Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combating CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., `.d-block` represents `display: block;`). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.
-
-Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.
-
-## Flexible HTML
-
-While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (`>`). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific.
-
-## Code conventions
-
-[Code Guide](https://codeguide.co/) (from Bootstrap co-creator, @mdo) documents how we write our HTML and CSS across Bootstrap. It specifies guidelines for general formatting, common sense defaults, property and attribute orders, and more.
-
-We use [Stylelint](https://stylelint.io/) to enforce these standards and more in our Sass/CSS. [Our custom Stylelint config](https://github.com/twbs/stylelint-config-twbs-bootstrap) is open source and available for others to use and extend.
-
-We use [vnu-jar](https://www.npmjs.com/package/vnu-jar) to enforce standard and semantic HTML, as well as detecting common errors.
+++ /dev/null
----
-title: Icons
-description: Guidance and suggestions for using external icon libraries with Bootstrap.
----
-
-import { getData } from '@libs/data'
-
-While Bootstrap doesn’t include an icon set by default, we do have our own comprehensive icon library called Bootstrap Icons. Feel free to use them or any other icon set in your project. We’ve included details for Bootstrap Icons and other preferred icon sets below.
-
-While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.
-
-## Bootstrap Icons
-
-Bootstrap Icons is a growing library of SVG icons that are designed by [@mdo](https://github.com/mdo) and maintained by [the Bootstrap Team](https://github.com/orgs/twbs/people). The beginnings of this icon set come from Bootstrap’s very own components—our forms, carousels, and more. Bootstrap has very few icon needs out of the box, so we didn’t need much. However, once we got going, we couldn’t stop making more.
-
-Oh, and did we mention they’re completely open source? Licensed under MIT, just like Bootstrap, our icon set is available to everyone.
-
-[Learn more about Bootstrap Icons]([[config:icons]]), including how to install them and recommended usage.
-
-## Alternatives
-
-We’ve tested and used these icon sets ourselves as preferred alternatives to Bootstrap Icons.
-
-<ul>
-{getData('icons').preferred.map((icon) => {
- return (
- <li><a href={icon.website}>{icon.name}</a></li>
- )
-})}
-</ul>
-
-## More options
-
-While we haven’t tried these out ourselves, they do look promising and provide multiple formats, including SVG.
-
-<ul>
-{getData('icons').more.map((icon) => {
- return (
- <li><a href={icon.website}>{icon.name}</a></li>
- )
-})}
-</ul>
--- /dev/null
+---
+title: Approach
+description: Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself.
+toc: true
+---
+
+## Modern essentials
+
+Bootstrap employs a handful of important global styles and settings geared towards normalizing browser styles, enabling responsive and mobile-first design, and providing a modern foundation to build upon.
+
+### Responsive design
+
+Responsive web design is the practice of building a website that responds to the viewport size of the device it's being viewed on. This is achieved by using media queries to apply different styles to the website based on the viewport size.
+
+```css
+@media (max-width: 768px) {
+ .container {
+ max-width: 100%;
+ }
+}
+```
+
+Bootstrap ships with several responsive tiers or breakpoints that allow you to stack styles on top of each other, from small mobile devices to large desktop screens. This gives you a very flexible and powerful way to build websites that can be optimized for any-sized device.
+
+### HTML5 doctype
+
+Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky and incomplete styling.
+
+```html
+<!doctype html>
+<html lang="en">
+ ...
+</html>
+```
+
+### Viewport meta
+
+Bootstrap is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your `<head>`.
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1">
+```
+
+You can see an example of this in action in [the quick start]([[docsref:/getting-started/introduction#quick-start]]).
+
+### Box-sizing
+
+For more straightforward sizing in CSS, we switch the global `box-sizing` value from `content-box` to `border-box`. This ensures `padding` does not affect the final computed width of an element.
+
+On the rare occasion you need to override it, use something like the following:
+
+```css
+.your-selector {
+ box-sizing: content-box;
+}
+```
+
+Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box-sizing/).
+
+### Reboot
+
+For improved cross-browser rendering, we use [Reboot]([[docsref:/content/reboot]]) to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
+
+### Browser support
+
+You can find our supported range of browsers and their versions [in our `.browserslistrc file`]([[config:repo]]/blob/v[[config:current_version]]/.browserslistrc):
+
+<Code lang="plaintext" filePath=".browserslistrc" />
+
+We use [Autoprefixer](https://github.com/postcss/autoprefixer) to handle intended browser support via CSS prefixes, which uses [Browserslist](https://github.com/browserslist/browserslist) to manage these browser versions. Consult their documentation for how to integrate these tools into your projects.
+
+## Guiding principles
+
+Beyond what Bootstrap does, here's _why_ we do it—our philosophy for building on the web. At a high level, here's what guides our approach:
+
+- Components should be responsive and mobile-first
+- Components should be built with a base class and extended via modifier classes
+- Component states should obey a common `z-index` scale
+- Prefer an HTML and CSS implementation over JavaScript
+- Use utilities over custom styles
+- Avoid enforcing strict HTML requirements (immediate children selectors)
+
+### Responsive
+
+Bootstrap's styles are mobile-first—we add styles as the viewport grows rather than overriding them as it shrinks. Not every component must be fully responsive, but this approach reduces CSS overrides.
+
+We use range media queries (`width >= 768px`, for example) to apply styles at a specific breakpoint and carry up through the larger breakpoints. For example, a `.d-none` applies from `min-width: 0` to infinity. On the other hand, a `.d-md-none` applies from the medium breakpoint and up.
+
+### Classes
+
+Aside from [Reboot]([[docsref:content/reboot]]), we strive to use only classes as selectors. Where we can, we avoid type selectors and extraneous parent selectors for greater flexibility.
+
+Components are typically built with a base class for shared property-value pairs. For example, `.btn` and `.btn-primary`. We use `.btn` for all the common styles like `display`, `padding`, and `border-width`. We then use modifiers like `.btn-solid` to add more styles.
+
+This reduces complexity, streamlines code, and makes for more scalable systems.
+
+### z-index scales
+
+We use two `z-index` scales in Bootstrap—elements within a component and overlay components.
+
+Some components in Bootstrap are built with overlapping elements to prevent double borders without modifying the `border` property. For example, button groups, input groups, and pagination. These components share a standard `z-index` scale of `0` through `3`, matching our expectations of highest user priority.
+
+- `0` is for default states (initial, not actually set)
+- `1` is for `:hover`, lowest because while it indicates user intent, nearly _anything_ can be hovered.
+- `2` is for `:active`/`.active`, second highest because they indicate state.
+- `3` is for `:focus`, highest because focused elements are in view and at the user’s attention.
+
+Components built with overlays also have a predefined z-index scale, beginning at `1000`. This starting number was chosen arbitrarily and serves as a small buffer between our styles and your project’s custom styles.
+
+<ScssDocs name="zindex-stack" file="scss/_variables.scss" />
+
+Each overlay component increases its `z-index` value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal’s action), so we put that above our navbars.
+
+Learn more about this in our [`z-index` layout page]([[docsref:/layout/z-index]]).
+
+### HTML and CSS over JS
+
+Whenever possible, we prefer HTML and CSS over JavaScript—they're more accessible to people of all experience levels and faster in the browser. That's why our first-class JavaScript API is `data` attributes—it lets you write more HTML instead of JavaScript. Read more in [our JavaScript overview]([[docsref:/getting-started/javascript#data-attributes]]).
+
+Our styles build on fundamental browser behaviors. For example, while you can put `.btn` on nearly any element, we prefer `<button>`s and `<a>`s for their semantic value. Similarly, we use native `:valid`/`:invalid` pseudo-elements for form validation rather than custom plugins.
+
+### Utilities
+
+Utility classes—single, immutable property-value pairings like `.d-block` for `display: block;`—help reduce CSS bloat and improve performance. They speed up HTML authoring and limit custom CSS by consolidating repeated property-value pairs into reusable classes. We try to use these when possible instead of additional CSS.
+
+### Code conventions
+
+[Code Guide](https://codeguide.co/) documents how we write HTML and CSS—covering formatting, defaults, property orders, and more. We enforce these standards with [Stylelint](https://stylelint.io/) using [our open source config](https://github.com/twbs/stylelint-config-twbs-bootstrap).
+
+## Community
+
+Stay up-to-date on the development of Bootstrap and reach out to the community with these helpful resources.
+
+- Read and subscribe to [The Official Bootstrap Blog]([[config:blog]]).
+- 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 distributing Bootstrap-related packages on [npm](https://www.npmjs.com/search?q=keywords:bootstrap) should use the `bootstrap` keyword for discoverability.
+
+You can also follow [@getbootstrap on X](https://x.com/[[config:x]]) for the latest gossip and awesome music videos.
+++ /dev/null
----
-title: Best practices
-description: Learn about some of the best practices we’ve gathered from years of working on and using Bootstrap.
----
-
-We’ve designed and developed Bootstrap to work in a number of environments. Here are some of the best practices we’ve gathered from years of working on and using it ourselves.
-
-<Callout>
-**Heads up!** This copy is a work in progress.
-</Callout>
-
-### General outline
-
-- Working with CSS
-- Working with Sass files
-- Building new CSS components
-- Working with flexbox
-- Ask in [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions)
--- /dev/null
+---
+title: Install Bootstrap
+description: Add Bootstrap to your project with CDN, package manager, or source files.
+toc: true
+---
+
+## Install
+
+Pull in Bootstrap’s **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a [Sass compiler]([[docsref:/guides/contribute#sass]]) and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions.
+
+Package managed installs don't include documentation or our full build scripts. You can also [use any demo from our Examples repo](https://github.com/twbs/examples) to quickly jumpstart Bootstrap projects.
+
+<Code
+ tabs={[
+ { label: 'npm', code: 'npm install bootstrap', lang: 'bash' },
+ { label: 'pnpm', code: 'pnpm add bootstrap', lang: 'bash' },
+ { label: 'Yarn', code: 'yarn add bootstrap', lang: 'bash' },
+ { label: 'Bun', code: 'bun add bootstrap', lang: 'bash' }
+ ]}
+/>
+
+The [Bootstrap npm package](https://www.npmjs.com/package/bootstrap) is published to npm‘s registry, which pnpm, Yarn, and Bun use.
+
+<Callout name="info-npm-starter" />
+
+### Using npm
+
+Using `const bootstrap = require('bootstrap')` or `import bootstrap from 'bootstrap'` will load all of Bootstrap’s plugins onto a `bootstrap` object. The `bootstrap` module itself exports all of our plugins. You can manually load Bootstrap’s plugins individually by loading the `/js/dist/*.js` files under the package’s top-level directory.
+
+Bootstrap’s `package.json` contains some additional metadata under the following keys:
+
+- `sass` - path to Bootstrap’s main [Sass](https://sass-lang.com/) source file
+- `style` - path to Bootstrap’s non-minified CSS that’s been compiled using the default settings (no customization)
+
+### Using Yarn
+
+Yarn 2+ (aka Yarn Berry) doesn’t support the `node_modules` directory by default, so our [Sass & JS example](https://github.com/twbs/examples/tree/main/sass-js) needs some adjustments:
+
+```sh
+yarn config set nodeLinker node-modules # Use the node_modules linker
+touch yarn.lock # Create an empty yarn.lock file
+yarn install # Install the dependencies
+yarn start # Start the project
+```
+
+## More packages
+
+Other package-managed installs are available as well for Bootstrap as well.
+
+<Code
+ tabs={[
+ { label: 'RubyGems', code: `gem 'bootstrap', '~> [[config:current_ruby_version]]'`, lang: 'bash' },
+ { label: 'Composer', code: 'composer require twbs/bootstrap:[[config:current_version]]', lang: 'bash' },
+ { label: 'NuGet', code: `Install-Package bootstrap # Default
+Install-Package bootstrap.sass # Sass version`, lang: 'powershell' }
+ ]}
+/>
+
+### Using RubyGems
+
+We recommend installing Bootstrap in your Ruby apps using [Bundler](https://bundler.io/), but you can also use [RubyGems](https://rubygems.org/). See [the gem’s README](https://github.com/twbs/bootstrap-rubygem/blob/main/README.md) for further details.
+
+```sh
+gem install bootstrap -v [[config:current_ruby_version]]
+```
+
+### Using NuGet
+
+If you develop in .NET Framework, you can also install and manage Bootstrap’s [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org/). Newer projects should use [libman](https://learn.microsoft.com/en-us/aspnet/core/client-side/libman/) or another method as NuGet is designed for compiled code, not frontend assets.
+
+## CDN
+
+Include Bootstrap’s CSS and JavaScript files via CDN. CDNs (Content Delivery Networks) are services that provides copies of libraries for your website. Instead of installing Bootstrap via a package manager, you link to CDN-hosted files in your website.
+
+Here are our primary CDN links for CSS and JavaScript:
+
+```html
+<link href="[[config:cdn.css]]" rel="stylesheet" integrity="[[config:cdn.css_hash]]" crossorigin="anonymous">
+<script src="[[config:cdn.js_bundle]]" integrity="[[config:cdn.js_bundle_hash]]" crossorigin="anonymous"></script>
+```
+
+If you’re using our compiled JavaScript and prefer to include Popper separately, add Popper before our JS, via a CDN preferably.
+
+```html
+<script src="[[config:cdn.popper]]" integrity="[[config:cdn.popper_hash]]" crossorigin="anonymous"></script>
+<script src="[[config:cdn.js]]" integrity="[[config:cdn.js_hash]]" crossorigin="anonymous"></script>
+```
+
+<BsTable>
+| File type | URL |
+| --- | --- |
+| CSS | [`[[config:cdn.css]]`]([[config:cdn.css]]) |
+| JS (with Popper) | [`[[config:cdn.js_bundle]]`]([[config:cdn.js_bundle]]) |
+</BsTable>
+
+### Using CDNs
+
+You can also use the CDN to fetch any of our additional builds.
+
+When using CDN links, be sure to use the `integrity` attribute to verify the correct files and versions. These hashes are unique to each file and version of Bootstrap, so when you update to a new version, be sure the `integrity` attribute is also updated.
+
+We also include a `crossorigin="anonymous"` attribute to prevent [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) errors.
+
+### Alternative CDNs
+
+We recommend [jsDelivr](https://www.jsdelivr.com/) and use it ourselves in our documentation. However, in some cases—like in some specific countries or environments—you may need to use other CDN providers like [cdnjs](https://cdnjs.com/) or [unpkg](https://unpkg.com/).
+
+You’ll find the same files on these CDN providers, albeit with different URLs. With cdnjs, you can [use this direct Bootstrap package link](https://cdnjs.com/libraries/bootstrap) to copy and paste ready-to-use HTML snippets for each dist file from any version of Bootstrap.
+
+<Callout type="warning">
+**Security warning** — If the SRI hashes differ for a given file, you shouldn’t use the files from that CDN, because it means that the file was modified by someone else.
+</Callout>
+
+Note that you should compare same length hashes, e.g. `sha384` with `sha384`, otherwise it’s expected for them to be different.
+As such, you can use an online tool like [SRI Hash Generator](https://www.srihash.org/) to make sure that the hashes are the same for a given file.
+Alternatively, assuming you have OpenSSL installed, you can achieve the same from the CLI, for example:
+
+```sh
+openssl dgst -sha384 -binary bootstrap.min.js | openssl base64 -A
+```
+
+## Download
+
+You can also do the old fashioned thing and download Bootstrap manually. Choose between compiled dist (distribution) files or source files. The latter requires some additional tooling to compiled and use Bootstrap in your project.
+
+<BsTable>
+| Type | Description | Link |
+| --- | --- | --- |
+| <strong class="text-nowrap">Distribution files</strong> | Ready-to-use compiled and minified CSS and JavaScript files. Doesn't include documentation, source files, or dependencies like Popper. | <a href="[[config:download.dist]]" class="btn btn-subtle theme-accent">Download</a> |
+| <strong class="text-nowrap">Source files</strong> | Sass, JavaScript, and documentation files for compiling with your own asset pipeline. Requires [Sass compiler]([[docsref:/guides/contribute#sass]]), [Autoprefixer](https://github.com/postcss/autoprefixer), and a JavaScript bundler like [Rollup](https://rollupjs.org/) or [Webpack](https://webpack.js.org/). | <a href="[[config:download.source]]" class="btn btn-subtle theme-accent">Download</a> |
+</BsTable>
+
+Should you require our full set of [build tools]([[docsref:/guides/contribute#tooling-setup]]), they are included for developing Bootstrap and its docs, but they’re likely unsuitable for your own purposes.
---
-title: Get started with Bootstrap
+title: Basics of Bootstrap
description: Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.
aliases:
- "/docs/[[config:docs_version]]/getting-started/"
- "/getting-started/"
toc: true
---
-
-## Quick start
-
-Get started by including Bootstrap’s production-ready CSS and JavaScript via CDN without the need for any build steps. See it in practice with this [Bootstrap CodePen demo](https://codepen.io/team/bootstrap/pen/qBamdLj).
-
-<br/>
-
-1. **Create a new `index.html` file in your project root.** Include the `<meta name="viewport">` tag as well for [proper responsive behavior](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport) in mobile devices.
-
- ```html
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Bootstrap demo</title>
- </head>
- <body>
- <h1>Hello, world!</h1>
- </body>
- </html>
- ```
-
-2. **Include Bootstrap’s CSS and JS.** Place the `<link>` tag in the `<head>` for our CSS, and the `<script>` tag for our JavaScript bundle (including Popper for positioning dropdowns, popovers, and tooltips) before the closing `</body>`. Learn more about our [CDN links](#cdn-links).
-
- ```html
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Bootstrap demo</title>
- <link href="[[config:cdn.css]]" rel="stylesheet" integrity="[[config:cdn.css_hash]]" crossorigin="anonymous">
- </head>
- <body>
- <h1>Hello, world!</h1>
- <script src="[[config:cdn.js_bundle]]" integrity="[[config:cdn.js_bundle_hash]]" crossorigin="anonymous"></script>
- </body>
- </html>
- ```
-
- You can also include [Popper](https://popper.js.org/docs/v2/) and our JS separately. If you don’t plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including Popper.
-
- ```html
- <script src="[[config:cdn.popper]]" integrity="[[config:cdn.popper_hash]]" crossorigin="anonymous"></script>
- <script src="[[config:cdn.js]]" integrity="[[config:cdn.js_hash]]" crossorigin="anonymous"></script>
- ```
-
-3. **Hello, world!** Open the page in your browser of choice to see your Bootstrapped page. Now you can start building with Bootstrap by creating your own [layout]([[docsref:/layout/grid]]), adding dozens of [components]([[docsref:/components/buttons]]), and utilizing [our official examples]([[docsref:/examples]]).
-
-## CDN links
-
-As reference, here are our primary CDN links.
-
-<BsTable>
-| Description | URL |
-| --- | --- |
-| CSS | `[[config:cdn.css]]` |
-| JS | `[[config:cdn.js_bundle]]` |
-</BsTable>
-
-You can also use the CDN to fetch any of our additional builds.
-
-When using CDN links, be sure to use the `integrity` attribute to verify the correct files and versions. These hashes are unique to each file and version of Bootstrap, so when you update to a new version, be sure the `integrity` attribute is also updated.
-
-We also include a `crossorigin="anonymous"` attribute to prevent [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) errors.
-
-## Next steps
-
-- Read a bit more about some [important global environment settings](#important-globals) that Bootstrap utilizes.
-- Read about the list of [components that require JavaScript](#js-components) below.
-- Need a little more power? Consider building with Bootstrap by [including the source files via package manager]([[docsref:/getting-started/download#package-managers]]).
-- Looking to use Bootstrap as a module with `<script type="module">`? Please refer to our [using Bootstrap as a module]([[docsref:/getting-started/javascript#using-bootstrap-as-a-module]]) section.
-
-## JS components
-
-Curious which components explicitly require our JavaScript and Popper? If you’re at all unsure about the general page structure, keep reading for an example page template.
-
-- Accordions for extending our Collapse plugin
-- Alerts for dismissing
-- Buttons for toggling states and checkbox/radio functionality
-- Carousel for all slide behaviors, controls, and indicators
-- Collapse for toggling visibility of content
-- Dropdowns for displaying and positioning (also requires [Popper](https://popper.js.org/docs/v2/))
-- Modals for displaying, positioning, and scroll behavior
-- Navbar for extending our Collapse and Offcanvas plugins to implement responsive behaviors
-- Navs with the Tab plugin for toggling content panes
-- Offcanvases for displaying, positioning, and scroll behavior
-- Scrollspy for scroll behavior and navigation updates
-- Toasts for displaying and dismissing
-- Tooltips and popovers for displaying and positioning (also requires [Popper](https://popper.js.org/docs/v2/))
-
-## Important globals
-
-Bootstrap employs a handful of important global styles and settings, all of which are almost exclusively geared towards the *normalization* of cross browser styles. Let’s dive in.
-
-### HTML5 doctype
-
-Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky and incomplete styling.
-
-```html
-<!doctype html>
-<html lang="en">
- ...
-</html>
-```
-
-### Viewport meta
-
-Bootstrap is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your `<head>`.
-
-```html
-<meta name="viewport" content="width=device-width, initial-scale=1">
-```
-
-You can see an example of this in action in the [quick start](#quick-start).
-
-### Box-sizing
-
-For more straightforward sizing in CSS, we switch the global `box-sizing` value from `content-box` to `border-box`. This ensures `padding` does not affect the final computed width of an element, but it can cause problems with some third-party software like Google Maps and Google Custom Search Engine.
-
-On the rare occasion you need to override it, use something like the following:
-
-```css
-.selector-for-some-widget {
- box-sizing: content-box;
-}
-```
-
-With the above snippet, nested elements—including generated content via `::before` and `::after`—will all inherit the specified `box-sizing` for that `.selector-for-some-widget`.
-
-Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box-sizing/).
-
-### Reboot
-
-For improved cross-browser rendering, we use [Reboot]([[docsref:/content/reboot]]) to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
-
-### Browser support
-
-You can find our supported range of browsers and their versions [in our `.browserslistrc file`]([[config:repo]]/blob/v[[config:current_version]]/.browserslistrc):
-
-<Code lang="plaintext" filePath=".browserslistrc" />
-
-We use [Autoprefixer](https://github.com/postcss/autoprefixer) to handle intended browser support via CSS prefixes, which uses [Browserslist](https://github.com/browserslist/browserslist) to manage these browser versions. Consult their documentation for how to integrate these tools into your projects.
-
-## Community
-
-Stay up-to-date on the development of Bootstrap and reach out to the community with these helpful resources.
-
-- Read and subscribe to [The Official Bootstrap Blog]([[config:blog]]).
-- 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 that modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/search?q=keywords:bootstrap) or similar delivery mechanisms for maximum discoverability.
-
-You can also follow [@getbootstrap on X](https://x.com/[[config:x]]) for the latest gossip and awesome music videos.
toc: true
---
+## JS components
+
+Curious which components explicitly require our JavaScript and Popper?
+
+- Accordions for extending our Collapse plugin
+- Alerts for dismissing
+- Buttons for toggling states and checkbox/radio functionality
+- Carousel for all slide behaviors, controls, and indicators
+- Collapse for toggling visibility of content
+- Dropdowns for displaying and positioning (also requires [Popper](https://popper.js.org/docs/v2/))
+- Modals for displaying, positioning, and scroll behavior
+- Navbar for extending our Collapse and Offcanvas plugins to implement responsive behaviors
+- Navs with the Tab plugin for toggling content panes
+- Offcanvases for displaying, positioning, and scroll behavior
+- Scrollspy for scroll behavior and navigation updates
+- Toasts for displaying and dismissing
+- Tooltips and popovers for displaying and positioning (also requires [Popper](https://popper.js.org/docs/v2/))
+
## Individual or compiled
Plugins can be included individually (using Bootstrap’s individual `js/dist/*.js`), or all at once using `bootstrap.js` or the minified `bootstrap.min.js` (don’t include both).
--- /dev/null
+---
+title: Bootstrap and npm
+description: The official guide for how to build a starter project with Bootstrap’s CSS and JavaScript in your project using just npm.
+toc: true
+thumbnail: guides/bootstrap-npm@2x.png
+---
+
+<img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/[[config:docs_version]]/assets/img/guides/bootstrap-npm.png, /docs/[[config:docs_version]]/assets/img/guides/bootstrap-npm@2x.png 2x" src="/docs/[[config:docs_version]]/assets/img/guides/bootstrap-npm.png" width="1000" height="500" alt=""/>
+
+<Callout>
+**Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/sass-js/). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/sass-js?file=index.html).
+</Callout>
+
+## Setup
+
+We’re building a npm project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
+
+1. **Create a project folder and set up npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
+
+ ```sh
+ mkdir my-project && cd my-project
+ npm init -y
+ ```
+
+2. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Popper since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don’t plan on using those components, you can omit Popper here.
+
+ ```sh
+ npm i --save bootstrap @popperjs/core
+ ```
+3. **Install additional dependencies.** In addition to Vite and Bootstrap, we have some dependencies used to import and bundle Bootstrap’s CSS. Sass compiles our source `.scss` files into CSS and then Autoprefixer and PostCSS handle browser compatibility. We install the `postcss-cli` package so we can work with PostCSS via CLI.
+
+ ```sh
+ npm i --save-dev autoprefixer postcss postcss-cli sass
+ ```
+
+4. **Install local development tools.** Lastly, to make life a little easier, we recommend installing some dev tools to make running local servers with hot refresh (where changes you make are reflected in the browser automatically) and add some code quality checks.
+
+ We use `nodemon` to watch files for changes, `npm-run-all` to run multiple npm scripts at a time, `sirv-cli` to run a local server, and `stylelint` to format CSS like Bootstrap does for consistency.
+
+ ```sh
+ npm i --save-dev nodemon npm-run-all sirv-cli stylelint stylelint-config-twbs-bootstrap
+ ```
+
+Now that we have all the necessary dependencies installed, we can get to work creating the project files and importing Bootstrap.
+
+## Project structure
+
+We’ve already created the `my-project` folder and initialized npm. Now we'll also create our `src` folder, stylesheet, and JavaScript file to round out the project structure. Run the following from `my-project`, or manually create the folder and file structure shown below.
+
+```sh
+mkdir {css,js,scss}
+touch index.html js/main.js scss/styles.scss .stylelintrc.json
+```
+
+When you’re done, your project should look like this:
+
+```text
+my-project/
+├── css/
+├── js/
+│ └── main.js
+├── scss/
+│ └── styles.scss
+├── index.html
+├── package-lock.json
+└── package.json
+```
+
+At this point, everything is in the right place, but we’ll need to add some npm scripts to use our dependencies and compile the CSS.
+
+## Configure
+
+- npm scripts
+- stylelint configuration
+
+## Import Bootstrap
+
+<GuideFooter />
thumbnail: guides/bootstrap-parcel@2x.png
---
-<img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/[[config:docs_version]]/assets/img/guides/bootstrap-parcel.png, /docs/[[config:docs_version]]/assets/img/guides/bootstrap-parcel@2x.png 2x" src="/docs/[[config:docs_version]]/assets/img/guides/bootstrap-parcel.png" width="800" height="400" alt=""/>
+<img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/[[config:docs_version]]/assets/img/guides/bootstrap-parcel.png, /docs/[[config:docs_version]]/assets/img/guides/bootstrap-parcel@2x.png 2x" src="/docs/[[config:docs_version]]/assets/img/guides/bootstrap-parcel.png" width="1000" height="500" alt=""/>
<Callout>
**Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/parcel). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/parcel?file=index.html) but not run it because Parcel isn’t currently supported there.
--- /dev/null
+---
+title: CDN Quickstart
+description: The official guide for how to include Bootstrap’s CSS and JavaScript in your project using a CDN.
+---
+
+Get started using Bootstrap in seconds by including our production-ready CSS and JavaScript by [using a CDN]([[docsref:/getting-started/install#cdn]]) without the need for any build steps. CDNs provide copies of Bootstrap's codebase that's ready to be used in any environment with minimal code changes required on your part.
+
+<Callout type="info">
+**Got the gist already?** See the end result in this [Bootstrap CodePen demo](https://codepen.io/team/bootstrap/pen/qBamdLj).
+</Callout>
+
+<br/>
+
+1. **Create a new `index.html` file in your project root.** Include the `<meta name="viewport">` tag as well for [proper responsive behavior](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport) in mobile devices.
+
+ ```html
+ <!doctype html>
+ <html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Bootstrap demo</title>
+ </head>
+ <body>
+ <h1>Hello, world!</h1>
+ </body>
+ </html>
+ ```
+
+2. **Include Bootstrap’s CSS and JS.** Place the `<link>` tag in the `<head>` for our CSS, and the `<script>` tag for our JavaScript bundle (including Popper for positioning dropdowns, popovers, and tooltips) before the closing `</body>`. Learn more about our [CDN links](#cdn-links).
+
+ ```html
+ <!doctype html>
+ <html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Bootstrap demo</title>
+ <link href="[[config:cdn.css]]" rel="stylesheet" integrity="[[config:cdn.css_hash]]" crossorigin="anonymous"> // [!code ++]
+ </head>
+ <body>
+ <h1>Hello, world!</h1>
+ <script src="[[config:cdn.js_bundle]]" integrity="[[config:cdn.js_bundle_hash]]" crossorigin="anonymous"></script> // [!code ++]
+ </body>
+ </html>
+ ```
+
+ You can also include [Popper](https://popper.js.org/docs/v2/) and our JS separately. If you don’t plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including Popper.
+
+ ```html
+ <script src="[[config:cdn.popper]]" integrity="[[config:cdn.popper_hash]]" crossorigin="anonymous"></script>
+ <script src="[[config:cdn.js]]" integrity="[[config:cdn.js_hash]]" crossorigin="anonymous"></script>
+ ```
+
+3. **Hello, world!** Open the page in your browser of choice to see your Bootstrapped page. Now you can start building with Bootstrap by creating your own [layout]([[docsref:/layout/grid]]), adding dozens of [components]([[docsref:/components/buttons]]), and utilizing [our official examples]([[docsref:/examples]]).
thumbnail: guides/bootstrap-vite@2x.png
---
-<img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/[[config:docs_version]]/assets/img/guides/bootstrap-vite.png, /docs/[[config:docs_version]]/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/[[config:docs_version]]/assets/img/guides/bootstrap-vite.png" width="800" height="400" alt="" />
+<img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/[[config:docs_version]]/assets/img/guides/bootstrap-vite.png, /docs/[[config:docs_version]]/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/[[config:docs_version]]/assets/img/guides/bootstrap-vite.png" width="1000" height="500" alt="" />
<Callout>
**Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/vite). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/vite?file=index.html) for live editing.
thumbnail: guides/bootstrap-webpack@2x.png
---
-<img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/[[config:docs_version]]/assets/img/guides/bootstrap-webpack.png, /docs/[[config:docs_version]]/assets/img/guides/bootstrap-webpack@2x.png 2x" src="/docs/[[config:docs_version]]/assets/img/guides/bootstrap-webpack.png" width="800" height="400" alt=""/>
+<img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/[[config:docs_version]]/assets/img/guides/bootstrap-webpack.png, /docs/[[config:docs_version]]/assets/img/guides/bootstrap-webpack@2x.png 2x" src="/docs/[[config:docs_version]]/assets/img/guides/bootstrap-webpack.png" width="1000" height="500" alt=""/>
<Callout>
**Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/webpack). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/webpack?file=index.html) for live editing.
...getData('theme-colors').map((themeColor) => `<div class="p-3 mb-2 bg-${themeColor.name} color-on-${themeColor.name}">.bg-${themeColor.name}</div>
<div class="p-3 mb-2 bg-muted-${themeColor.name} color-${themeColor.name}">.bg-muted-${themeColor.name}</div>
<div class="p-3 mb-2 bg-subtle-${themeColor.name} color-${themeColor.name}">.bg-subtle-${themeColor.name}</div>`),
- `<div class="p-3 mb-2 bg-body text-body">.bg-body</div>
-<div class="p-3 mb-2 bg-black text-white">.bg-black</div>
-<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
-<div class="p-3 mb-2 bg-transparent text-body">.bg-transparent</div>`
+ `<div class="p-3 mb-2 bg-body fg-body">.bg-body</div>
+<div class="p-3 mb-2 bg-1">.bg-1</div>
+<div class="p-3 mb-2 bg-2">.bg-2</div>
+<div class="p-3 mb-2 bg-3">.bg-3</div>
+<div class="p-3 mb-2 bg-4">.bg-4</div>
+<div class="p-3 mb-2 bg-black fg-white">.bg-black</div>
+<div class="p-3 mb-2 bg-white fg-dark">.bg-white</div>
+<div class="p-3 mb-2 bg-transparent fg-body">.bg-transparent</div>`
]} />
## Background gradient
<p class="fg-1">.fg-1</p>
<p class="fg-2">.fg-2</p>
<p class="fg-3">.fg-3</p>
+<p class="fg-4">.fg-4</p>
<p class="fg-black bg-white">.fg-black</p>
<p class="fg-white bg-dark">.fg-white</p>`
On some components, we use our low-level `z-index` values to manage repeating elements that overlap one another (like buttons in a button group or items in a list group).
-Learn about our [`z-index` approach]([[docsref:/extend/approach#z-index-scales]]).
+Learn about our [`z-index` approach]([[docsref:/getting-started/approach#z-index-scales]]).
## CSS
--- /dev/null
+<svg fill="none" height="180" viewBox="0 0 180 180" width="180" xmlns="http://www.w3.org/2000/svg"><path d="m180 0h-180v180h180z" fill="#cb3837"/><path d="m30 150h60v-90h30v90h30v-120h-120z" fill="#fff"/></svg>
\ No newline at end of file
projects / thirdparty / bootstrap.git / commitdiff
![site/static/docs/[version]/assets/img/guides/bootstrap-npm.png](/cgi-bin/gitweb.cgi?p=thirdparty/bootstrap.git;a=blob;f=site/static/docs/%5Bversion%5D/assets/img/guides/bootstrap-npm.png;h=2e1192f87672cf1868be5217e0c10b44e8402408;hb=23381465c3e5314fb975116e61239058f1565a4c){kind=link}
![site/static/docs/[version]/assets/img/guides/bootstrap-npm@2x.png](/cgi-bin/gitweb.cgi?p=thirdparty/bootstrap.git;a=blob;f=site/static/docs/%5Bversion%5D/assets/img/guides/bootstrap-npm@2x.png;h=853640f84f6cc1a648dcc8b6465d9714a4765ca5;hb=23381465c3e5314fb975116e61239058f1565a4c){kind=link}
![site/static/docs/[version]/assets/img/npm.svg](/cgi-bin/gitweb.cgi?p=thirdparty/bootstrap.git;a=blob;f=site/static/docs/%5Bversion%5D/assets/img/npm.svg;h=8dab4b3637afb68076916e27726dbfa75362a0de;hb=23381465c3e5314fb975116e61239058f1565a4c){kind=link}
![a/site/static/docs/[version]/assets/img/guides/bootstrap-npm.png](/cgi-bin/gitweb.cgi?p=thirdparty/bootstrap.git;a=blob;f=site/static/docs/%5Bversion%5D/assets/img/guides/bootstrap-npm.png;h=5c11c51d75514cd85de503fdd54323e20b474e82){kind=link}
![a/site/static/docs/[version]/assets/img/guides/bootstrap-npm@2x.png](/cgi-bin/gitweb.cgi?p=thirdparty/bootstrap.git;a=blob;f=site/static/docs/%5Bversion%5D/assets/img/guides/bootstrap-npm@2x.png;h=3ebd7e014dd0e1a7c1ddb5bcc93e55945c4a6135){kind=link}
