Bootstrap

https://github.com/twbs/bootstrap
Admin
Bootstrap is an HTML, CSS and JavaScript toolkit for building responsive web pages, with Sass...
Tokens:462,145
Snippets:3,622
Trust Score:9.4
License:MIT
Update:1 week ago
Show doc for...
Tokens:
Raw
### Initialize npm project and install dependencies

Source: https://github.com/twbs/bootstrap/blob/main/skills/bootstrap-parcel/SKILL.md

Creates the project directory and initializes npm, then installs Parcel as a dev dependency and Bootstrap with optional peer dependencies. Omit @floating-ui/dom if not using menus/popovers/tooltips, and omit vanilla-calendar-pro if not using the datepicker.

```sh
mkdir my-project && cd my-project
npm init -y
```

```sh
npm i --save-dev parcel
```

```sh
npm i --save bootstrap@6.0.0-alpha.1 @floating-ui/dom vanilla-calendar-pro
```

--------------------------------

### Target project layout

Source: https://github.com/twbs/bootstrap/blob/main/skills/bootstrap-vite/SKILL.md

Shows the intended directory structure after setup.

```text
my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
├── package.json
└── vite.config.js
```

--------------------------------

### Basic HTML page structure for Bootstrap

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/quickstart.mdx

Start with a minimal HTML document that includes the viewport meta tag for responsive behavior. This is the foundation for adding Bootstrap's CSS and JavaScript.

```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>
```

--------------------------------

### Install build dependencies for Sass and PostCSS

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/npm.mdx

Installs Sass, Autoprefixer, PostCSS, and postcss-cli as dev dependencies to compile and post-process CSS.

```sh
npm i --save-dev autoprefixer postcss postcss-cli sass
```

--------------------------------

### Start Parcel development server with npm start

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/parcel.mdx

Run this command from the my-project folder to start the Parcel development server using the npm script added earlier.

```sh
npm start
```

--------------------------------

### Run steps in order with promises

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/javascript.mdx

Because each method returns a promise, you can run steps in order without nesting listeners. This example hides a dialog and then shows a toast sequentially.

```js
const dialog = bootstrap.Dialog.getOrCreateInstance('#myDialog')
const toast = bootstrap.Toast.getOrCreateInstance('#myToast')

await dialog.hide()
await toast.show()
```

--------------------------------

### Project structure after setup

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/webpack.mdx

The complete project structure after creating the folders and files.

```text
my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
├── package.json
└── webpack.config.js
```

--------------------------------

### Before (v5): Using bootstrap global

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/migration.mdx

In v5, the UMD bundle created a window.bootstrap global. This example shows the old way to get a Tooltip instance.

```javascript
const tooltip = bootstrap.Tooltip.getOrCreateInstance(el)
```

--------------------------------

### Install local development tools

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/npm.mdx

Installs nodemon, npm-run-all, sirv-cli, stylelint, and stylelint-config-twbs-bootstrap as dev dependencies for local server with hot refresh and CSS formatting consistency.

```sh
npm i --save-dev nodemon npm-run-all sirv-cli stylelint stylelint-config-twbs-bootstrap
```

--------------------------------

### Initialize Bootstrap plugin with constructor and options

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/javascript.mdx

All constructors accept an optional options object or nothing, which initiates the plugin with default behavior. The example shows creating a Dialog instance with defaults and with a configuration object that disables the keyboard.

```js
const myDialogEl = document.querySelector('#myDialog')
const dialog = new bootstrap.Dialog(myDialogEl) // initialized with defaults

const configObject = { keyboard: false }
const dialog1 = new bootstrap.Dialog(myDialogEl, configObject) // initialized with no keyboard
```

--------------------------------

### Expected project structure after setup

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/parcel.mdx

Shows the complete file tree after creating the folders and files. Use this to verify your project layout.

```text
my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
└── package.json
```

--------------------------------

### Add start script to package.json

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/vite.mdx

Add the start script to package.json to run the Vite dev server. The test script is already present.

```json
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```

--------------------------------

### align-content-start example

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/utilities/align-content.mdx

Use `align-content-start` to pack flex lines at the start of the cross axis. Requires a fixed height on the container and `flex-wrap` to see the effect.

```html
<div class="d-flex align-content-start flex-wrap" style="height: 200px">
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
  </div>
```

--------------------------------

### Retrieve plugin instance with getInstance

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/javascript.mdx

Each plugin exposes a getInstance method to retrieve an instance directly from an element. Returns null if no instance is initiated over the requested element.

```js
bootstrap.Popover.getInstance(myPopoverEl)
```

--------------------------------

### Configure Yarn Berry for Bootstrap Sass & JS example

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/install.mdx

Adjust Yarn 2+ (Berry) to use node_modules linker for the Sass & JS example.

```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
```

--------------------------------

### toast.show()

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/javascript.mdx

Shows the toast. Returns a promise that resolves when the transition ends.

```APIDOC
## Method: toast.show()

### Description
Shows the toast. Returns a promise that resolves when the transition ends.

### Returns
- **Promise** - Resolves when the transition ends.

### Example
```js
const toast = bootstrap.Toast.getOrCreateInstance('#myToast')

await toast.show()
```
```

--------------------------------

### Complete project structure tree

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/vite.mdx

Shows the expected file and folder layout after setup, including src/js/main.js, src/scss/styles.scss, src/index.html, package files, and vite.config.js.

```text
my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│   |   └── styles.scss
|   └── index.html
├── package-lock.json
├── package.json
└── vite.config.js
```

--------------------------------

### npm scripts (package.json)

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/webpack.mdx

Add the start and build scripts to package.json. The start script runs the Webpack dev server; build creates a production build.

```json
{
  // ...
  "scripts": {
    "start": "webpack serve",
    "build": "webpack build --mode=production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```

--------------------------------

### CDN with import map for Floating UI and Vanilla Calendar Pro

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/install.mdx

Alternative CDN setup using an import map to resolve bare module specifiers for Floating UI and Vanilla Calendar Pro, then load the Bootstrap JS.

```html
<script type="importmap">
{
  "imports": {
    "@floating-ui/dom": "[[config:cdn.floating_ui_esm]]",
    "vanilla-calendar-pro": "[[config:cdn.vanilla_calendar_pro_esm]]"
  }
}
</script>
<script type="module" src="[[config:cdn.js]]" integrity="[[config:cdn.js_hash]]" crossorigin="anonymous"></script>
```

--------------------------------

### Install Bootstrap and required dependencies

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/parcel.mdx

Installs Bootstrap, Floating UI, and Vanilla Calendar Pro. Floating UI is needed for menus, popovers, and tooltips; Vanilla Calendar Pro is needed for the datepicker. Omit them if you don't use those components.

```sh
npm i --save bootstrap @floating-ui/dom vanilla-calendar-pro
```

--------------------------------

### Bootstrap CSS and JS via CDN

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/quickstart.mdx

Add Bootstrap's CSS link in the head and the JavaScript bundle script before the closing body tag. The bundle includes Floating UI and Vanilla Calendar Pro.

```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 highlight]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script type="module" src="[[config:cdn.js_bundle]]" integrity="[[config:cdn.js_bundle_hash]]" crossorigin="anonymous"></script><!--[!code highlight]-->
  </body>
</html>
```

--------------------------------

### CDN Setup: Bootstrap 6 CSS and JS Bundle

Source: https://github.com/twbs/bootstrap/blob/main/skills/bootstrap-v6-install/SKILL.md

Use for the fastest start with no build step. Add the CSS link in <head> and the JS bundle before </body>. The bundle includes Floating UI and Vanilla Calendar Pro. Copy exact URLs and hashes from the Install docs; never guess an SRI hash. The crossorigin="anonymous" attribute is required for SRI to work.

```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="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-B/GM4XqrwHnWXNOWMbloTmrYXZg10cakYGmpfsR/bbzQ6JAJI4ihuyADKLnBgrCe" crossorigin="anonymous">
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap!</h1>
      <button class="btn-solid theme-primary">Primary button</button>
    </div>
    <script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-1a/pXj49ZQ1aHEmrJ+gMw1otqoVsYwlEnlD8mIfY2TV03r20Y0CN7uqx1tQogjPL" crossorigin="anonymous"></script>
  </body>
</html>
```

--------------------------------

### Install Bootstrap with Bun

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/install.mdx

Install Bootstrap using Bun package manager.

```bash
bun add bootstrap
```

--------------------------------

### TypeScript: Import and use Tooltip plugin

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/javascript.mdx

Bootstrap ships with built-in type declarations, so no @types/bootstrap package is needed. This example imports the Tooltip plugin and uses its static getOrCreateInstance method to show a tooltip on an element with id 'example'.

```ts
import { Tooltip } from 'bootstrap'

const tooltip = Tooltip.getOrCreateInstance('#example')
tooltip.show()
```

--------------------------------

### Create project folder structure with mkdir and touch

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/npm.mdx

Run from the my-project folder to create the css and scss directories and the initial files: index.html, scss/styles.scss, postcss.config.js, and stylelint.config.mjs.

```sh
mkdir {css,scss}
touch index.html scss/styles.scss postcss.config.js stylelint.config.mjs
```

--------------------------------

### Fullscreen grid playground with responsive classes

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/layout/css-grid.mdx

Drag the handle to resize the example and watch each grid reflow based on container width. Demonstrates various responsive column configurations and .md:g-start-4 for centering.

```html
<div class="grid text-center">
      <div class="g-col-12 sm:g-col-6 md:g-col-4 lg:g-col-3 xl:g-col-2">cell</div>
      <div class="g-col-12 sm:g-col-6 md:g-col-4 lg:g-col-3 xl:g-col-2">cell</div>
      <div class="g-col-12 sm:g-col-6 md:g-col-4 lg:g-col-3 xl:g-col-2">cell</div>
      <div class="g-col-12 sm:g-col-6 md:g-col-4 lg:g-col-3 xl:g-col-2">cell</div>
      <div class="g-col-12 sm:g-col-6 md:g-col-4 lg:g-col-3 xl:g-col-2">cell</div>
      <div class="g-col-12 sm:g-col-6 md:g-col-4 lg:g-col-3 xl:g-col-2">cell</div>
    </div>
    <div class="grid text-center">
      <div class="g-col-6 md:g-col-3">card</div>
      <div class="g-col-6 md:g-col-3">card</div>
      <div class="g-col-6 md:g-col-3">card</div>
      <div class="g-col-6 md:g-col-3">card</div>
    </div>
    <div class="grid text-center">
      <div class="g-col-12 lg:g-col-3">sidebar</div>
      <div class="g-col-12 lg:g-col-9">main content</div>
    </div>
    <div class="grid text-center">
      <div class="g-col-12 lg:g-col-8">primary</div>
      <div class="g-col-12 lg:g-col-4">secondary</div>
    </div>
    <div class="grid text-center">
      <div class="g-col-12 md:g-col-6 md:g-start-4">centered with .md:g-start-4</div>
    </div>
```

--------------------------------

### Await promise from show method

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/javascript.mdx

Methods that show or hide a component return a promise that resolves when the transition ends. This example awaits collapse.show() and then comments that the collapsible area is now expanded.

```js
const collapse = bootstrap.Collapse.getOrCreateInstance('#myCollapse')

await collapse.show()
// The collapsible area is now expanded
```

--------------------------------

### Create project folders and files

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/webpack.mdx

Run these commands from the my-project folder to create the src and dist directories and initial files.

```sh
mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss webpack.config.js
```

--------------------------------

### Default Settings

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/javascript.mdx

Change the default settings for a Bootstrap plugin by modifying the plugin's Constructor.Default object. This example changes the default for the toast plugin's autohide option to false.

```APIDOC
## Default Settings

### Description
Change the default settings for a Bootstrap plugin by modifying the plugin's `Constructor.Default` object.

### Usage
```js
bootstrap.Toast.Default.autohide = false
```

### Parameters
- `autohide` (boolean) - The new default value for the `autohide` option.
```

--------------------------------

### Change default settings for a plugin (bootstrap.Toast.Default.autohide)

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/javascript.mdx

Modify the plugin's Constructor.Default object to change default settings. This example sets the toast plugin's autohide option to false.

```js
// changes default for the toast plugin's `autohide` option to false
bootstrap.Toast.Default.autohide = false
```

--------------------------------

### Show usage with <Example> and render token map

Source: https://github.com/twbs/bootstrap/blob/main/skills/bootstrap-component/SKILL.md

Markdown snippet for live demos and token map rendering under a '### Variables' section. Use <CSSVariables> and <ScssDocs> components.

```markdown
<CSSVariables component="Widgets" className="widget" />

<ScssDocs name="widget-tokens" file="scss/_widget.scss" />
```

--------------------------------

### Handle transitioning component calls

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/javascript.mdx

A method call on a transitioning component will be ignored. For promise-returning methods, such a call resolves immediately and does not wait for the running transition to end. This example shows carousel.to('2') being ignored while a transition is in progress.

```js
const myCarouselEl = document.querySelector('#myCarousel')
const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', event => {
  carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
carousel.to('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!
```

--------------------------------

### new bootstrap.Dialog(element, options?)

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/javascript.mdx

Creates a new Dialog plugin instance. Accepts a DOM element or CSS selector as the first argument and an optional options object. If no options are provided, the plugin initializes with its default behavior.

```APIDOC
## Constructor: new bootstrap.Dialog(element, options?)

### Description
Creates a new Dialog plugin instance. Accepts a DOM element or CSS selector as the first argument and an optional options object. If no options are provided, the plugin initializes with its default behavior.

### Parameters
- **element** (DOM Element | CSS Selector) - Required - The target element or CSS selector for the dialog.
- **options** (Object) - Optional - Configuration object for the dialog instance.

### Example
```js
const myDialogEl = document.querySelector('#myDialog')
const dialog = new bootstrap.Dialog(myDialogEl) // initialized with defaults

const configObject = { keyboard: false }
const dialog1 = new bootstrap.Dialog(myDialogEl, configObject) // initialized with no keyboard
```
```

--------------------------------

### Install mini-css-extract-plugin

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/webpack.mdx

Install the mini-css-extract-plugin package to separate CSS from the JavaScript bundle.

```sh
npm install --save-dev mini-css-extract-plugin
```

--------------------------------

### Create project folder and initialize npm

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/parcel.mdx

Creates the my-project folder and initializes npm with the -y flag to skip interactive prompts.

```sh
mkdir my-project && cd my-project
npm init -y
```

--------------------------------

### Install Vite as dev dependency

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/vite.mdx

Installs Vite as a development-only dependency using --save-dev.

```sh
npm i --save-dev vite
```

--------------------------------

### Create project folder structure with mkdir and touch

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/parcel.mdx

Run these commands from the my-project folder to create the src directory and initial files (index.html, main.js, styles.scss).

```sh
mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss
```

--------------------------------

### HTML: Load Bootstrap as ES module with bundle

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/javascript.mdx

Loads the Bootstrap bundle as a native ES module directly in the browser. The bundle includes Floating UI and Vanilla Calendar Pro, so no import map is needed. This example creates a Toast instance for each element with class 'toast'.

```html
<script type="module">
  import { Toast } from './bootstrap.bundle.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>
```

--------------------------------

### Live demo: toggle drawer with link or button

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/components/drawer.mdx

Shows how to open a drawer using a link with `href` or a button with `data-bs-target`, both requiring `data-bs-toggle="drawer"`. Includes the drawer markup with a close button and a menu.

```html
<a class="btn-solid theme-primary" data-bs-toggle="drawer" href="#drawerExample" role="button" aria-controls="drawerExample">
    Link with href
  </a>
  <button class="btn-solid theme-primary" type="button" data-bs-toggle="drawer" data-bs-target="#drawerExample" aria-controls="drawerExample">
    Button with data-bs-target
  </button>

  <dialog class="drawer drawer-start" tabindex="-1" id="drawerExample" aria-labelledby="drawerExampleLabel">
    <div class="drawer-header">
      <h5 class="drawer-title" id="drawerExampleLabel">Drawer</h5>
      <CloseButton dismiss="drawer" />
    </div>
    <div class="drawer-body">
      <div>
        Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
      </div>
      <div class="mt-3">
        <button class="btn-solid theme-secondary" type="button" data-bs-toggle="menu">
          Menu
        </button>
        <div class="menu">
          <a class="menu-item" href="#">Action</a>
          <a class="menu-item" href="#">Another action</a>
          <a class="menu-item" href="#">Something else here</a>
        </div>
      </div>
    </div>
  </dialog>
```

--------------------------------

### HTML: Import individual Toast component without import map

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/javascript.mdx

Components that don't depend on Floating UI (like Toast, Alert, Collapse) can be imported individually without an import map. This example imports the Toast component from the individual file and initializes it on all elements with class 'toast'.

```html
<script type="module">
  import Toast from './js/dist/toast.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>
```

--------------------------------

### Expected project structure after setup

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/npm.mdx

Shows the final directory layout after creating the folders and files. The css/ folder is empty initially; styles.scss, stylelint.config.mjs, index.html, package-lock.json, package.json, and postcss.config.js are present.

```text
my-project/
├── css/
├── scss/
│   └── styles.scss
├── stylelint.config.mjs
├── index.html
├── package-lock.json
├── package.json
└── postcss.config.js
```

--------------------------------

### Install PurgeCSS as a dev dependency

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/customize/optimize.mdx

Run this command to install PurgeCSS as a dev dependency for your project.

```sh
npm install --save-dev purgecss
```

--------------------------------

### bootstrap.Alert.getOrCreateInstance('#myAlert')

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/javascript.mdx

Gets the Alert instance associated with a CSS selector, or creates a new one if it doesn't exist.

```APIDOC
## Method: bootstrap.Alert.getOrCreateInstance('#myAlert')

### Description
Gets the Alert instance associated with a CSS selector, or creates a new one if it doesn't exist.

### Parameters
- **selector** (CSS Selector) - Required - A valid CSS selector for the alert element.

### Returns
- **Alert instance** - The existing or newly created instance.

### Example
```js
const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
```
```

--------------------------------

### Drawer components example with header and body

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/components/drawer.mdx

Shows a drawer displayed by default using the `open` attribute and `.show` class on the `<dialog>`. Includes a header with a close button and an optional body class for padding.

```html
<dialog class="drawer drawer-start show" open tabindex="-1" id="drawer" aria-labelledby="drawerLabel">
    <div class="drawer-header">
      <h5 class="drawer-title" id="drawerLabel">Drawer</h5>
      <CloseButton dismiss="drawer" />
    </div>
    <div class="drawer-body">
      Content for the drawer goes here. You can place just about any Bootstrap component or custom elements here.
    </div>
  </dialog>
```

--------------------------------

### Create project structure with mkdir and touch

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/vite.mdx

Run these commands from the my-project folder to create the src directory structure and initial files (index.html, main.js, styles.scss, vite.config.js).

```sh
mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
```

--------------------------------

### Install Sass as dev dependency

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/vite.mdx

Installs Sass as a development-only dependency to properly import and bundle Bootstrap's CSS.

```sh
npm i --save-dev sass
```

--------------------------------

### Summary element examples

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/content/reboot.mdx

Shows the default cursor reset to pointer on summary elements. Includes both closed and open <details> examples.

```html

<details>
  <summary>Some details</summary>
  <p>More info about the details.</p>
</details>

<details open>
  <summary>Even more details</summary>
  <p>Here are even more details about the details.</p>
</details>

```

--------------------------------

### Two-file pattern: utility-only build

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/utilities/api.mdx

For a utility-only build, load `bootstrap/scss/bootstrap-utilities` instead of the full build. It accepts `$utilities` and loads root tokens and helpers so `.bg-primary`, `.shadow`, and `.theme-*` work on their own.

```scss
// my-bootstrap-utilities.scss
@use "bootstrap/scss/bootstrap-utilities" with (
  $utilities: (
    // Your utility groups go here
  )
);
```

--------------------------------

### Install Webpack development dependencies

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/webpack.mdx

Installs webpack, webpack-cli, webpack-dev-server, and html-webpack-plugin as dev dependencies. The --save-dev flag marks them for development only.

```sh
npm i --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
```

--------------------------------

### Theme color pairings example

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/customize/theme.mdx

Shows recommended color pairings for theme tokens. Use `contrast` with `bg`, `fg` with `subtle`, `fg-emphasis` with `muted`, and `border` with `subtle` or `muted`. The example uses CSS variables like `--bs-theme-contrast` and `--bs-theme-bg`.

```html
<div class="theme-primary vstack gap-3">
    <div style="color: var(--bs-theme-contrast); background: var(--bs-theme-bg);" class="p-3 rounded-5">
      Example element with theme color
    </div>
    <div style="color: var(--bs-theme-fg-emphasis); background: var(--bs-theme-bg-muted); border: 1px solid var(--bs-theme-border);" class="p-3 rounded-5">
      Example element with theme color
    </div>
    <div style="color: var(--bs-theme-fg); background: var(--bs-theme-bg-subtle); border: 1px solid var(--bs-theme-border);" class="p-3 rounded-5">
      Example element with theme color
    </div>
  </div>
```

--------------------------------

### Fill in index.html with Bootstrap and npm

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/npm.mdx

HTML page that links to the compiled CSS (css/styles.css) and loads Bootstrap's pre-built JavaScript bundle via a script tag. Includes a container div and a button to verify Bootstrap styling.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ npm</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and npm!</h1>
      <button class="btn-solid theme-primary">Primary button</button>
    </div>
    <script type="module" src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>
```

--------------------------------

### Install additional build dependencies

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/webpack.mdx

Installs Sass, loaders, and Autoprefixer as dev dependencies to properly import and bundle Bootstrap's CSS and JS with Webpack.

```sh
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
```

--------------------------------

### Example unit tests for Tab.getInstance

Source: https://github.com/twbs/bootstrap/blob/main/js/tests/README.md

Shows synchronous tests using describe and it blocks. The first test expects null when no instance exists, the second expects the instance after creating a Tab. Uses fixtureEl and expect from Vitest.

```javascript
// Synchronous test
describe('getInstance', () => {
  it('should return null if there is no instance', () => {
    // Make assertion
    expect(Tab.getInstance(fixtureEl)).toBeNull()
  })

  it('should return this instance', () => {
    fixtureEl.innerHTML = '<div></div>'

    const divEl = fixtureEl.querySelector('div')
    const tab = new Tab(divEl)

    // Make assertion
    expect(Tab.getInstance(divEl)).toEqual(tab)
  })
})
```

--------------------------------

### Install Parcel as dev dependency

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/parcel.mdx

Installs Parcel with --save-dev to mark it as a development-only dependency. Parcel auto-installs language transformers like Sass when needed.

```sh
npm i --save-dev parcel
```

--------------------------------

### Responsive drawer example

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/components/drawer.mdx

Uses `.lg:drawer` to hide content below the `lg` breakpoint and show it above. Close buttons work without explicit `data-bs-target`.

```html
<button class="btn-solid theme-primary lg:d-none" type="button" data-bs-toggle="drawer" data-bs-target="#drawerResponsive" aria-controls="drawerResponsive">Toggle drawer</button>

  <div class="alert theme-info d-none lg:d-block mb-3"><p>Resize your browser to show the responsive drawer toggle.</p></div>

  <dialog class="lg:drawer drawer-end" tabindex="-1" id="drawerResponsive" aria-labelledby="drawerResponsiveLabel">
    <div class="drawer-header">
      <h5 class="drawer-title" id="drawerResponsiveLabel">Responsive drawer</h5>
      <CloseButton dismiss="drawer" />
    </div>
    <div class="drawer-body">
      <p class="mb-0">This is content within an <code>.lg:drawer</code>.</p>
    </div>
  </dialog>
```

--------------------------------

### Get or create plugin instance with getOrCreateInstance

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/javascript.mdx

getOrCreateInstance gets the instance associated with a DOM element, or creates a new one if it wasn't initialized. It may accept and use an optional configuration object as second argument when creating a new instance.

```js
bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)
```

--------------------------------

### HTML examples for .fg-{color} and .fg-emphasis-{color} utilities

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/utilities/colors.mdx

Demonstrates usage of .fg-{color} and .fg-emphasis-{color} classes for theme colors, plus additional .fg-body, .fg-1 through .fg-4, .fg-black, and .fg-white utilities. The examples show how to apply color utilities to paragraphs.

```html
<p class="fg-primary">.fg-primary</p>
<p class="fg-emphasis-primary">.fg-emphasis-primary</p>
<p class="fg-secondary">.fg-secondary</p>
<p class="fg-emphasis-secondary">.fg-emphasis-secondary</p>
<p class="fg-success">.fg-success</p>
<p class="fg-emphasis-success">.fg-emphasis-success</p>
<p class="fg-danger">.fg-danger</p>
<p class="fg-emphasis-danger">.fg-emphasis-danger</p>
<p class="fg-warning">.fg-warning</p>
<p class="fg-emphasis-warning">.fg-emphasis-warning</p>
<p class="fg-info">.fg-info</p>
<p class="fg-emphasis-info">.fg-emphasis-info</p>
<p class="fg-light">.fg-light</p>
<p class="fg-emphasis-light">.fg-emphasis-light</p>
<p class="fg-dark">.fg-dark</p>
<p class="fg-emphasis-dark">.fg-emphasis-dark</p>
<p class="fg-body">.fg-body</p>
<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-black">.fg-white</p>
```

--------------------------------

### Prevent dialog from showing with show.bs.dialog event

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/javascript.mdx

Use the infinitive event 'show.bs.dialog' to stop a dialog from being shown. The event handler calls preventDefault() to cancel the action before it starts.

```javascript
const myDialogEl = document.querySelector('#myDialog')

myDialogEl.addEventListener('show.bs.dialog', event => {
  return event.preventDefault() // stops dialog from being shown
})
```

--------------------------------

### toast.dispose()

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/javascript.mdx

Disposes the toast instance. Should be called after the hide transition has completed.

```APIDOC
## Method: toast.dispose()

### Description
Disposes the toast instance. Should be called after the hide transition has completed.

### Example
```js
const toast = bootstrap.Toast.getInstance('#myToast')

await toast.hide()
toast.dispose()
```
```

--------------------------------

### dialog.hide()

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/javascript.mdx

Hides the dialog. Returns a promise that resolves when the transition ends.

```APIDOC
## Method: dialog.hide()

### Description
Hides the dialog. Returns a promise that resolves when the transition ends.

### Returns
- **Promise** - Resolves when the transition ends.

### Example
```js
const dialog = bootstrap.Dialog.getOrCreateInstance('#myDialog')
const toast = bootstrap.Toast.getOrCreateInstance('#myToast')

await dialog.hide()
await toast.show()
```
```

--------------------------------

### drawer.hide()

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/javascript.mdx

Hides the drawer. Returns a promise that resolves when the transition ends.

```APIDOC
## Method: drawer.hide()

### Description
Hides the drawer. Returns a promise that resolves when the transition ends.

### Returns
- **Promise** - Resolves when the transition ends.

### Example
```js
const myDrawerEl = document.querySelector('#myDrawer')
const drawer = bootstrap.Drawer.getOrCreateInstance(myDrawerEl)

// Await the method you called…
await drawer.hide()
saveState()
```
```

--------------------------------

### Example: various ratio utilities

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/utilities/aspect-ratio.mdx

Swap the `.ratio-*` class for different aspect ratios. This example shows `ratio-auto`, `ratio-1x1`, `ratio-4x3`, `ratio-16x9`, and `ratio-21x9` with different width utilities.

```html
<div class="ratio-auto">
    <div>Auto</div>
  </div>
  <div class="w-25 ratio-1x1">
    <div>1×1</div>
  </div>
  <div class="w-50 ratio-4x3">
    <div>4×3</div>
  </div>
  <div class="w-75 ratio-16x9">
    <div>16×9</div>
  </div>
  <div class="w-100 ratio-21x9">
    <div>21×9</div>
  </div>
```

--------------------------------

### Always stacked and responsive stacked table examples

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/content/tables.mdx

Two HTML examples showing how to apply .table-stacked: one always stacks, the other stacks only below the md container width using .md:table-stacked. Both require the .table-responsive wrapper as the query container.

```html
<!-- Always stacked -->
<div class="table-responsive">
  <table class="table table-stacked">...</table>
</div>

<!-- Stacked below md container width -->
<div class="table-responsive">
  <table class="table md:table-stacked">...</table>
</div>
```

--------------------------------

### bootstrap.Popover.getOrCreateInstance(element, config?)

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/javascript.mdx

Gets the Popover instance associated with a DOM element, or creates a new one if it doesn't exist. Optionally accepts a configuration object as the second argument.

```APIDOC
## Method: bootstrap.Popover.getOrCreateInstance(element, config?)

### Description
Gets the Popover instance associated with a DOM element, or creates a new one if it doesn't exist. Optionally accepts a configuration object as the second argument.

### Parameters
- **element** (DOM Element | CSS Selector) - Required - The element or selector for which to get or create the instance.
- **config** (Object) - Optional - Configuration object used when creating a new instance.

### Returns
- **Popover instance** - The existing or newly created instance.

### Example
```js
bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)
```
```

--------------------------------

### Blockquote example

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/content/reboot.mdx

Demonstrates the blockquote with reset margin (0 0 1rem) and typical figure/figcaption structure.

```html
<figure>
    <blockquote class="blockquote">
      <p>A well-known quote, contained in a blockquote element.</p>
    </blockquote>
    <figcaption>
      Someone famous in <cite title="Source Title">Source Title</cite>
    </figcaption>
  </figure>
```

--------------------------------

### Add Parcel start script to package.json

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/guides/parcel.mdx

Add the start script to the scripts object in package.json. This script runs the Parcel development server and serves the HTML file to the dist directory.

```json
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```

--------------------------------

### Horizontal card with image start

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/components/card.mdx

Use `.card-row` to make a card horizontal and `.card-img-start` to position the image at the inline start. The example sets a max-width of 540px and includes a placeholder image.

```html
<div class="card card-row" style="max-width: 540px;">
    <Placeholder width="100%" height="250" text="Image" class="card-img-start" />
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="fg-2">Last updated 3 mins ago</small></p>
    </div>
  </div>
```

--------------------------------

### Theme layer color pairing examples

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/customize/theme.mdx

Recommended pairings of foreground, background, and border colors for accessible and aesthetic combinations. The example shows several divs using classes like bg-body, fg-body, and border-subtle.

```html
<div class="vstack gap-3">
    <div class="p-3 rounded-5 bg-body fg-body border border-subtle">
      fg-body on bg-body with border-subtle
    </div>
    <div class="p-3 rounded-5 bg-body fg-body border">
      fg-body on bg-body
    </div>
    <div class="p-3 rounded-5 bg-1 fg-3 border">
      fg-3 on bg-1
    </div>
    <div class="p-3 rounded-5 bg-2 fg-2 border">
      fg-2 on bg-2
    </div>
    <div class="p-3 rounded-5 bg-3 fg-1 border">
      fg-1 on bg-3
    </div>
  </div>
```

--------------------------------

### Get strength level via getOrCreateInstance

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/forms/password-strength.mdx

Retrieve an existing instance or create one with `bootstrap.Strength.getOrCreateInstance(element)`. Then call `getStrength()` to get the current level ('weak', 'fair', 'good', 'strong', or null).

```js
const element = document.querySelector('.strength')
const strength = bootstrap.Strength.getOrCreateInstance(element)

// Get current strength
console.log(strength.getStrength()) // 'fair'
```

--------------------------------

### Grid start classes with g-start-2 and g-start-6

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/layout/css-grid.mdx

Start classes are shorthand for grid-column-start. They begin at 1 because 0 is invalid. Pair them with column classes to size and align columns.

```html
<div class="grid text-center">
    <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
    <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
  </div>
```

--------------------------------

### carousel.to(index)

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/javascript.mdx

Slides to the specified slide index. Returns a promise that resolves when the transition ends.

```APIDOC
## Method: carousel.to(index)

### Description
Slides to the specified slide index. Returns a promise that resolves when the transition ends.

### Parameters
- **index** (string | number) - Required - The slide index to slide to.

### Returns
- **Promise** - Resolves when the transition ends.

### Example
```js
const myCarouselEl = document.querySelector('#myCarousel')
const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', event => {
  carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
carousel.to('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!
```
```

--------------------------------

### Text wrapping utilities example

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/utilities/text-wrapping.mdx

Demonstrates the text-wrap, text-nowrap, text-balance, and text-pretty classes. The first block shows the full markup with sample text; the second block shows the minimal class usage.

```html
<div class="w-12 p-3 bg-subtle-accent text-wrap">
    This text should wrap across multiple lines within the parent element.
  </div>
  <div class="w-12 p-3 bg-subtle-accent text-nowrap">
    This text should not wrap across multiple lines within the parent element.
  </div>
  <div class="w-12 p-3 bg-subtle-accent text-balance">
    This text should wrap in a balanced way across multiple lines within the parent element.
  </div>
  <div class="w-12 p-3 bg-subtle-accent text-pretty">
    This text should wrap in a pretty way across multiple lines within the parent element.
  </div>
```

```html
<div class="text-wrap">…</div>
  <div class="text-nowrap">…</div>
  <div class="text-balance">…</div>
  <div class="text-pretty">…</div>
```

--------------------------------

### Await hide and listen for hidden event

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/javascript.mdx

The promise resolves at the same moment the matching shown.bs.*, hidden.bs.*, or closed.bs.* event fires. Use the event when you must react to every change, including ones your own code did not start.

```js
const myDrawerEl = document.querySelector('#myDrawer')
const drawer = bootstrap.Drawer.getOrCreateInstance(myDrawerEl)

// Await the method you called…
await drawer.hide()
saveState()

// …or listen for every hide, whoever started it
myDrawerEl.addEventListener('hidden.bs.drawer', () => {
  saveState()
})
```

--------------------------------

### set-container() mixin usage examples

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/layout/breakpoints.mdx

Demonstrates the set-container() mixin with default, explicit type, and named container options.

```scss
// Default: inline-size containment
.my-component {
  @include set-container();
  // Output: container-type: inline-size;
}

// With explicit type
.my-component {
  @include set-container(size);
  // Output: container-type: size;
}

// With a name (uses shorthand property)
.my-component {
  @include set-container(inline-size, sidebar);
  // Output: container: sidebar / inline-size;
}
```

--------------------------------

### class: opacity example

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/utilities/api.mdx

Changes the class prefix from .opacity-* to .o-*.

```scss
$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
```

```css
.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
```

--------------------------------

### bootstrap.Drawer.getInstance('#myDrawer')

Source: https://github.com/twbs/bootstrap/blob/main/site/src/content/docs/getting-started/javascript.mdx

Retrieves the Drawer plugin instance associated with a CSS selector. Returns null if no instance is initialized on the element.

```APIDOC
## Method: bootstrap.Drawer.getInstance('#myDrawer')

### Description
Retrieves the Drawer plugin instance associated with a CSS selector. Returns null if no instance is initialized on the element.

### Parameters
- **selector** (CSS Selector) - Required - A valid CSS selector for the drawer element.

### Returns
- **Drawer instance** or **null** - The plugin instance if found, otherwise null.

### Example
```js
const drawer = bootstrap.Drawer.getInstance('#myDrawer')
```
```

--------------------------------

### Run a single unit test file

Source: https://github.com/twbs/bootstrap/blob/main/js/tests/README.md

Runs a specific unit test file by passing its path. The example shows running the tab plugin's tests.

```bash
npm run js-test-unit -- js/tests/unit/tab.spec.js
```
Tokens:
Raw