### Start Development Server

Source: https://getbootstrap.com/docs/5.3/getting-started/build-tools

Compiles CSS and JavaScript, builds the documentation, and starts a local development server.

```bash
npm start
```

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

### Run npm start

Source: https://getbootstrap.com/docs/5.3/getting-started/contribute

Compiles CSS and JavaScript, builds the documentation, and starts a local server. This is a primary task for development.

```bash
npm start
```

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

### Install Local Dependencies

Source: https://getbootstrap.com/docs/5.3/getting-started/build-tools

Run this command in the root `/bootstrap` directory after cloning the repository to install local dependencies.

```bash
npm install
```

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

### Install Bootstrap and Popper.js

Source: https://getbootstrap.com/docs/5.3/getting-started/webpack

Installs Bootstrap for UI components and Popper.js for positioning dropdowns, popovers, and tooltips.

```bash
npm i --save bootstrap @popperjs/core

```

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

### Install Bootstrap and Popper

Source: https://getbootstrap.com/docs/5.3/getting-started/vite

Installs Bootstrap and the required Popper dependency for positioning components.

```bash
npm i --save bootstrap @popperjs/core
```

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

### Install mini-css-extract-plugin

Source: https://getbootstrap.com/docs/5.3/getting-started/webpack

Install the mini-css-extract-plugin to extract CSS into separate files.

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

```

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

### Start Webpack Development Server

Source: https://getbootstrap.com/docs/5.3/getting-started/webpack

Command to run the Webpack development server using the 'start' script defined in `package.json`. This command initiates the local development environment.

```bash
npm start

```

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

### Add npm Start Script for Vite

Source: https://getbootstrap.com/docs/5.3/getting-started/vite

Add a 'start' script to your `package.json` file to easily launch the Vite development server. This script command is 'vite'.

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

```

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

### Live Toast Example with JavaScript Initialization

Source: https://getbootstrap.com/docs/5.3/components/toasts

This example demonstrates how to trigger a toast using a button click. It requires a button with an ID, a toast element with an ID, and JavaScript to initialize and show the toast. The toast is positioned using utility classes.

```html
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>
```

```javascript
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')

if (toastTrigger) {
  const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
  toastTrigger.addEventListener('click', () => {
    toastBootstrap.show()
  })
}
```

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

### Install Bootstrap and Popper

Source: https://getbootstrap.com/docs/5.3/getting-started/parcel

Installs Bootstrap and Popper.js, which is required for Bootstrap's dropdowns, popovers, and tooltips.

```bash
npm i --save bootstrap @popperjs/core

```

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

### Serve Documentation Locally

Source: https://getbootstrap.com/docs/5.3/getting-started/build-tools

Build and serve the Bootstrap documentation locally. Ensure you have run `npm install` first.

```bash
npm run docs-serve
```

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

### Install Bootstrap via npm

Source: https://getbootstrap.com/docs/5.3/getting-started/download

Install the Bootstrap package into your Node.js project using npm.

```bash
npm install bootstrap@5.3.8
```

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

### Responsive Light-Themed Navbar Example

Source: https://getbootstrap.com/docs/5.3/components/navbar

This example demonstrates a complete responsive navbar with various sub-components, including navigation links, a dropdown, and a search form. It utilizes background and spacing utility classes for styling and layout. The navbar collapses at the large (lg) breakpoint.

```html
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
```

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

### Start Parcel Development Server

Source: https://getbootstrap.com/docs/5.3/getting-started/parcel

Starts the Parcel development server using the npm script defined in package.json. This command should be run from the project's root directory.

```bash
npm start

```

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

### Install Webpack Dependencies

Source: https://getbootstrap.com/docs/5.3/getting-started/webpack

Installs core Webpack, CLI, dev server, and HTML plugin as development dependencies.

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

```

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

### Clearfix Layout Example

Source: https://getbootstrap.com/docs/5.3/helpers/clearfix

A practical example demonstrating how clearfix prevents layout breakage when using floated buttons.

```html
<div class="bg-info clearfix">
  <button type="button" class="btn btn-secondary float-start">Example Button floated left</button>
  <button type="button" class="btn btn-secondary float-end">Example Button floated right</button>
</div>
```

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

### Bootstrap Progress Bar Examples

Source: https://getbootstrap.com/docs/5.3/components/progress

Basic examples of Bootstrap progress bars showing different completion levels. Ensure the parent `.progress` has ARIA attributes for accessibility.

```html
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 0%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 100%"></div>
</div>
```

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

### Pills with Dropdown Example

Source: https://getbootstrap.com/docs/5.3/components/navs

Create a navigation pills component that includes a dropdown menu. This example demonstrates the pill-style navigation.

```html
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>
```

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

### Install Bootstrap with Bun

Source: https://getbootstrap.com/docs/5.3/getting-started/download

Add Bootstrap to your Bun or Node.js projects using the Bun CLI.

```bash
bun add bootstrap@5.3.8
```

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

### Collapse Initialization

Source: https://getbootstrap.com/docs/5.3/components/collapse

Examples of how to initialize the Collapse component using data attributes and JavaScript.

```APIDOC
## Data Attributes Initialization

### Description
Add `data-bs-toggle="collapse"` and `data-bs-target` to an element to control collapsible elements. Use `collapse` class for the collapsible element, and `show` for a default open state. Add `data-bs-parent="#selector"` for accordion behavior.

### Example
```html
<button class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</button>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component.
  </div>
</div>
```

## JavaScript Initialization

### Description
Enable collapse functionality manually using JavaScript by creating new `bootstrap.Collapse` instances.

### Code
```javascript
const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))
```
```

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

### Carousel Initialization

Source: https://getbootstrap.com/docs/5.3/components/carousel

Example of how to initialize a Bootstrap carousel instance with custom options.

```APIDOC
## Carousel Initialization

### Description
Initializes a new Bootstrap Carousel instance with specified options. This is useful for manually controlling carousel behavior, such as setting the interval or disabling touch support.

### Method
`new bootstrap.Carousel(element, options)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **element** (HTMLElement) - Required - The DOM element representing the carousel.
- **options** (Object) - Optional - Configuration options for the carousel.
  - **interval** (number) - The delay between slides in milliseconds. Defaults to 5000.
  - **touch** (boolean) - Whether to enable touch swipe gestures. Defaults to true.

### Request Example
```javascript
const myCarouselElement = document.querySelector('#myCarousel')

const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  touch: false
})
```

### Response
None (This is a constructor, it returns the instance)

#### Success Response (200)
None

#### Response Example
None
```

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

### Install Sass and Webpack Loaders

Source: https://getbootstrap.com/docs/5.3/getting-started/webpack

Installs Sass and necessary Webpack loaders (css-loader, postcss-loader, sass-loader, style-loader) for processing CSS and Sass files.

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

```

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

### Offcanvas Live Demo Example

Source: https://getbootstrap.com/docs/5.3/components/offcanvas

A complete example of an offcanvas component with trigger buttons. This includes a header, body with placeholder content, and a dropdown menu within the offcanvas body. The offcanvas itself is initially hidden and toggled by the buttons.

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

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-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="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>
```

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

### CSS Grid Start Classes for Alignment

Source: https://getbootstrap.com/docs/5.3/layout/css-grid

Use start classes with column classes to size and align grid items. These classes correspond to `grid-column-start` and begin at `1` as `0` is an invalid value.

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

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

### Install Bootstrap with Composer

Source: https://getbootstrap.com/docs/5.3/getting-started/download

Manage Bootstrap's Sass and JavaScript assets in PHP projects using Composer.

```bash
composer require twbs/bootstrap:5.3.8
```

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

### Responsive Columns with CSS Grid

Source: https://getbootstrap.com/docs/5.3/layout/css-grid

Adjust the column layout across different viewports using responsive classes. This example starts with two columns on narrow viewports and expands to three columns on medium viewports and above.

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

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

### Install Parcel

Source: https://getbootstrap.com/docs/5.3/getting-started/parcel

Installs Parcel as a development dependency. Parcel automatically detects and installs necessary language transformers.

```bash
npm i --save-dev parcel

```

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

### Initialize project folder and npm

Source: https://getbootstrap.com/docs/5.3/getting-started/vite

Creates the project directory and initializes npm with default settings.

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

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

### Create Project Folder and Initialize npm

Source: https://getbootstrap.com/docs/5.3/getting-started/parcel

Sets up a new project directory and initializes npm. Run this command in your terminal.

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

```

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

### Install Vite dependency

Source: https://getbootstrap.com/docs/5.3/getting-started/vite

Installs Vite as a development dependency.

```bash
npm i --save-dev vite
```

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

### Create Project Folder and Initialize npm

Source: https://getbootstrap.com/docs/5.3/getting-started/webpack

Initializes a new project folder and sets up npm for package management.

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

```

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

### Install Sass dependency

Source: https://getbootstrap.com/docs/5.3/getting-started/vite

Installs Sass to enable proper importing and bundling of Bootstrap CSS.

```bash
npm i --save-dev sass
```

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

### Create Project Structure

Source: https://getbootstrap.com/docs/5.3/getting-started/webpack

Creates the necessary directories (src, src/js, src/scss) and files (index.html, main.js, styles.scss, webpack.config.js) for the project.

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

```

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

### CSS Custom Property Example

Source: https://getbootstrap.com/docs/5.3/docsref

Example of defining a CSS custom property for a blue color.

```css
.test {
  --color: blue;
}

```

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

### Create a loading card with placeholders

Source: https://getbootstrap.com/docs/5.3/components/placeholders

Demonstrates a standard card component alongside a version using placeholders to simulate a loading state.

```html
<div class="card">
  <img src="..." class="card-img-top" alt="...">

  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card" aria-hidden="true">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>
    <p class="card-text placeholder-glow">
      <span class="placeholder col-7"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-6"></span>
      <span class="placeholder col-8"></span>
    </p>
    <a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
  </div>
</div>
```

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

### Install Bootstrap Gem with RubyGems

Source: https://getbootstrap.com/docs/5.3/getting-started/download

Install the Bootstrap gem directly using RubyGems if not using Bundler.

```bash
gem install bootstrap -v 5.3.8
```

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

### Create project structure

Source: https://getbootstrap.com/docs/5.3/getting-started/vite

Generates the necessary source directories and files for the project.

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

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

### View project file tree

Source: https://getbootstrap.com/docs/5.3/getting-started/vite

Displays the expected directory structure after initialization.

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

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

### Create Project Structure

Source: https://getbootstrap.com/docs/5.3/getting-started/parcel

Creates the necessary directories and files for the project structure, including source files for HTML, JavaScript, and SCSS.

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

```

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

### Example Code Block

Source: https://getbootstrap.com/docs/5.3/examples/blog

A basic example of a code block. This is often used for displaying code snippets or commands.

```plaintext
Example code block
```

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

### Run npm run docs-serve

Source: https://getbootstrap.com/docs/5.3/getting-started/contribute

Builds and runs the documentation locally. This command is used for previewing documentation changes.

```bash
npm run docs-serve
```

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

### Implement basic placeholders

Source: https://getbootstrap.com/docs/5.3/components/placeholders

Shows how to apply the placeholder class to elements to create loading indicators.

```html
<p aria-hidden="true">
  <span class="placeholder col-6"></span>
</p>

<a class="btn btn-primary disabled placeholder col-4" aria-disabled="true"></a>
```

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

### Horizontal Rule Examples

Source: https://getbootstrap.com/docs/5.3/content

Provides examples of horizontal rules with default styling and custom utility classes for color, border, and opacity.

```html
<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

```

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

### Basic HTML Structure for Bootstrap

Source: https://getbootstrap.com/docs/5.3

Create a new index.html file and include the essential meta tags for proper responsive behavior.

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

```

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

### Project File Structure

Source: https://getbootstrap.com/docs/5.3/customize/sass

Recommended directory layouts for projects using Bootstrap source files.

```text
your-project/
├── scss/
│   └── custom.scss
└── node_modules/
│   └── bootstrap/
│       ├── js/
│       └── scss/
└── index.html
```

```text
your-project/
├── scss/
│   └── custom.scss
├── bootstrap/
│   ├── js/
│   └── scss/
└── index.html
```

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

### Custom Button Variant SCSS Example

Source: https://getbootstrap.com/docs/5.3/components/buttons

Example of creating a custom button modifier class by reassigning Bootstrap's CSS variables with custom values.

```scss
.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)} ;
}
```

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

### RTL Starter Template

Source: https://getbootstrap.com/docs/5.3/getting-started/rtl

A complete HTML template configured for RTL, including the required dir and lang attributes.

```html
<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css" integrity="sha384-CfCrinSRH2IR6a4e6fy2q6ioOX7O6Mtm1L9vRvFZ1trBncWmMePhzvafv7oIcWiW" crossorigin="anonymous">

    <title>مرحبًا بالعالم!</title>
  </head>
  <body>
    <h1>مرحبًا بالعالم!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>
    -->
  </body>
</html>
```

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

### Responsive Container Examples

Source: https://getbootstrap.com/docs/5.3/layout/containers

Utilize responsive container classes like `.container-sm`, `.container-md`, etc., to create containers that are 100% wide until a specific breakpoint is met. They then scale up with higher breakpoints.

```html
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

```

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

### Tab Methods

Source: https://getbootstrap.com/docs/5.3/components/navs

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started, but before it ends. In addition, a method call on a transitioning component will be ignored.

```APIDOC
## dispose
### Description
Destroys an element’s tab.
### Method
dispose
### Endpoint
N/A (JavaScript method)
### Parameters
None
### Request Example
None
### Response
None
```

```APIDOC
## getInstance
### Description
Static method which allows you to get the tab instance associated with a DOM element.
### Method
getInstance
### Endpoint
N/A (JavaScript static method)
### Parameters
- **element** (DOMElement) - The DOM element associated with the tab instance.
### Request Example
```javascript
const element = document.getElementById('myTab')
const tabInstance = bootstrap.Tab.getInstance(element)
```
### Response
- **tabInstance** (bootstrap.Tab) - The tab instance associated with the element, or null if none exists.
```

```APIDOC
## getOrCreateInstance
### Description
Static method which returns a tab instance associated to a DOM element or creates a new one in case it wasn’t initialized.
### Method
getOrCreateInstance
### Endpoint
N/A (JavaScript static method)
### Parameters
- **element** (DOMElement) - The DOM element to get or create the tab instance for.
- **options** (object, optional) - Options to use when creating a new instance.
### Request Example
```javascript
const element = document.getElementById('myTab')
const tabInstance = bootstrap.Tab.getOrCreateInstance(element)
```
### Response
- **tabInstance** (bootstrap.Tab) - The tab instance associated with the element.
```

```APIDOC
## show
### Description
Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown.
### Method
show
### Endpoint
N/A (JavaScript method)
### Parameters
None
### Request Example
```javascript
const tabElement = document.querySelector('#myTab button[data-bs-target="#profile"]')
const bsTab = bootstrap.Tab.getInstance(tabElement)
bsTab.show()
```
### Response
None (The method returns before the `shown.bs.tab` event occurs)
```

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

### Dropdown Initialization with Popper.js Configuration

Source: https://getbootstrap.com/docs/5.3/components/dropdowns

Demonstrates how to initialize a Bootstrap Dropdown instance and customize its Popper.js configuration.

```APIDOC
## Initialize Dropdown with popperConfig

### Description
Initializes a new Dropdown instance with custom Popper.js configuration. The `popperConfig` option accepts a function that receives the default Popper.js configuration and should return a modified or new configuration object.

### Method
`new bootstrap.Dropdown(element, options)`

### Parameters
- **element** (HTMLElement) - Required - The DOM element to initialize the dropdown on.
- **options** (Object) - Optional - Configuration options for the dropdown.
  - **popperConfig** (Function) - Optional - A function that accepts the default Popper.js configuration and returns a custom configuration.

### Request Example
```javascript
const element = document.getElementById('myDropdownButton');
const dropdown = new bootstrap.Dropdown(element, {
  popperConfig(defaultBsPopperConfig) {
    // Modify defaultBsPopperConfig or return a new configuration
    // Example: return { placement: 'bottom-start', ...defaultBsPopperConfig };
    return defaultBsPopperConfig;
  }
});
```
```

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

### Get or Create Toast Instance with JavaScript

Source: https://getbootstrap.com/docs/5.3/components/toasts

Use `bootstrap.Toast.getOrCreateInstance()` to get an existing toast instance or create a new one if it doesn't exist on the specified DOM element.

```javascript
const myToastEl = document.getElementById('myToastEl')
const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)
```

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

### Bootstrap Grid Custom Columns Example

Source: https://getbootstrap.com/docs/5.3/layout/css-grid

This example customizes the number of columns in a grid using the `--bs-columns` CSS variable. Each child element automatically occupies one column.

```html
<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>
```

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

### Basic Card Examples

Source: https://getbootstrap.com/docs/5.3/components/card

Demonstrates various color variations for cards using Bootstrap's theming utilities. Each card showcases a different border and text color.

```html
<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
  </div>
</div>
```

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

### Custom Aspect Ratio Example

Source: https://getbootstrap.com/docs/5.3/helpers/ratio

Set the `--bs-aspect-ratio` CSS variable on the `.ratio` element to create custom aspect ratios on the fly. This example sets a 2x1 aspect ratio.

```html
<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>
```

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

### Vertical Pills Navigation Example

Source: https://getbootstrap.com/docs/5.3/components/navs

Example of vertical pills navigation. For optimal accessibility and behavior, it's recommended to add `aria-orientation="vertical"` to the tab list container.

```html
Home Profile Disabled Messages Settings
```

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

### Listen to Tooltip Events

Source: https://getbootstrap.com/docs/5.3/components/tooltips

Demonstrates how to initialize a tooltip instance and attach an event listener for the hidden event.

```javascript
const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', () => {
  // do something...
})

tooltip.hide()
```

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

### Add Parcel npm Start Script

Source: https://getbootstrap.com/docs/5.3/getting-started/parcel

Adds a 'start' script to the package.json file to run the Parcel development server. It specifies the entry HTML file, the public URL, and the output directory.

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

```

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

### Basic HTML structure for Bootstrap

Source: https://getbootstrap.com/docs/5.3/getting-started/introduction

Create a new index.html file with the essential HTML5 doctype, head, and body structure. Include the viewport meta tag for responsive behavior.

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

```

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

### Get or Create Bootstrap Popover Instance

Source: https://getbootstrap.com/docs/5.3/getting-started/javascript

Use `getOrCreateInstance` to get an existing Bootstrap Popover instance or create a new one if it doesn't exist. An optional configuration object can be provided as the second argument for new instances.

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

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

### Run npm run dist

Source: https://getbootstrap.com/docs/5.3/getting-started/contribute

Creates the `dist/` directory with compiled files. Uses Sass, Autoprefixer, and terser. This task prepares distributable files.

```bash
npm run dist
```

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

### Custom Color Mode Example (Blue Theme)

Source: https://getbootstrap.com/docs/5.3/customize/color-modes

Define custom color modes by creating new `data-bs-theme` selectors and overriding Sass/CSS variables. This example demonstrates a 'blue theme' by setting custom body and component colors.

```scss
[data-bs-theme="blue"] {
  --bs-body-color: var(--bs-white);
  --bs-body-color-rgb: #{to-rgb($white)};
  --bs-body-bg: var(--bs-blue);
  --bs-body-bg-rgb: #{to-rgb($blue)};
  --bs-tertiary-bg: #{$blue-600};

  .dropdown-menu {
    --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
    --bs-dropdown-link-active-bg: #{$blue-700};
  }

  .btn-secondary {
    --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
    --bs-btn-border-color: #{rgba($white, .25)};
    --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
    --bs-btn-hover-border-color: #{rgba($white, .25)};
    --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
    --bs-btn-active-border-color: #{rgba($white, .5)};
    --bs-btn-focus-border-color: #{rgba($white, .5)};
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
  }
}

```

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

### Bootstrap Grid Cards Example

Source: https://getbootstrap.com/docs/5.3/components/card

Utilize the Bootstrap grid system and `.row-cols` classes to control the number of columns for cards per row. This example shows cards adapting from one column to two columns from the medium breakpoint upwards.

```html
<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
    </div>
  </div>
</div>
```

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

### Link Styling and Customization

Source: https://getbootstrap.com/docs/5.3/content/reboot

Examples of standard links, links with opacity overrides, and placeholder links without href attributes.

```html
<a href="#">This is an example link</a>
```

```html
<a href="#" style="--bs-link-opacity: .5">This is an example link</a>
```

```html
<a>This is a placeholder link</a>
```

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

### Popover Configuration Options

Source: https://getbootstrap.com/docs/5.3/components/popovers

Configuration options for initializing a Bootstrap Popover instance.

```APIDOC
## Popover Configuration Options

### Description
Configuration options used when initializing a new bootstrap.Popover instance.

### Parameters
- **sanitize** (boolean) - Optional - Enable content sanitization. Default: true.
- **sanitizeFn** (null, function) - Optional - Provide an alternative content sanitization function. Default: null.
- **selector** (string, false) - Optional - If provided, popover objects will be delegated to the specified targets. Default: false.
- **template** (string) - Optional - Base HTML to use when creating the popover. Default: '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'.
- **title** (string, element, function) - Optional - The popover title. Default: ''.
- **trigger** (string) - Optional - How popover is triggered: click, hover, focus, manual. Default: 'click'.
```

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

### Initialize Modal with Options

Source: https://getbootstrap.com/docs/5.3/components/modal

Pass an optional configuration object during modal initialization.

```javascript
const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
```