Bootstrap

https://getbootstrap.com/docs/5.2/
Admin
Bootstrap is a powerful, feature-packed frontend toolkit that helps developers build anything from...
Tokens:198,195
Snippets:1,982
Trust Score:10
Update:1 month ago
Show doc for...
Tokens:
Raw
### Stack Examples

Source: https://getbootstrap.com/docs/5.2/helpers/stacks

Practical examples of using stacks for buttons and inline forms.

```html
<div class="vstack gap-2 col-md-5 mx-auto">
  <button type="button" class="btn btn-secondary">Save changes</button>
  <button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>
```

```html
<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
  <button type="button" class="btn btn-secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</button>
</div>
```

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

### Start Vite server

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

Execute the npm script to launch the local development server.

```bash
npm start

```

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

### Install build loaders and tools

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

Install necessary loaders and tools for processing CSS, Sass, and vendor prefixes.

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

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

### Add npm start script

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

Update package.json to include the command for starting the Vite development server.

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

```

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

### Install Sass

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

Install Sass as a development dependency to enable Bootstrap CSS bundling.

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

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

### Install Bootstrap via NuGet

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

Commands for installing Bootstrap packages in .NET projects.

```powershell
Install-Package bootstrap
```

```powershell
Install-Package bootstrap.sass
```

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

### Install Vite

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

Add Vite as a development dependency.

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

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

### Install mini-css-extract-plugin

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

Install the plugin required to separate CSS from the JavaScript bundle.

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

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

### Install Bootstrap and Popper

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

Install Bootstrap and its required Popper dependency for components like dropdowns and tooltips.

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

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

### Basic Progress Bar Examples

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

Demonstrates standard progress bar configurations with varying widths from 0% to 100%.

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

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

### Start Parcel server

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

Command to launch the local development server using the configured npm script.

```bash
npm start
```

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

### Example Table

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

Demonstrates how to structure and style tables within a blog post. Ensure proper Markdown table syntax.

```markdown
Name | Upvotes | Downvotes
---|---|---
Alice | 10 | 11
Bob | 4 | 3
Charlie | 7 | 9
Totals | 21 | 23
```

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

### Install Webpack dependencies

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

Install core Webpack packages as development dependencies.

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

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

### Install Bootstrap via npm

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

Command to install Bootstrap as a dependency in Node.js projects.

```bash
npm install bootstrap@5.2.3
```

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

### Add npm start script

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

Update package.json to include a script for launching the Webpack development server.

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

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

### Install Bootstrap via yarn

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

Command to install Bootstrap using the yarn package manager.

```bash
yarn add bootstrap@5.2.3
```

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

### Container Examples

Source: https://getbootstrap.com/docs/5.2/examples/grid

Shows various container classes that provide different maximum widths at different responsive breakpoints, ensuring content is centered and has padding.

```html
.container
.container-sm
.container-md
.container-lg
.container-xl
.container-xxl
.container-fluid
```

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

### Clearfix Usage Example

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

A practical example demonstrating how the clearfix class prevents layout breakage when containing 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>
```

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

### Install Bootstrap via Composer

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

Command to manage Bootstrap assets in PHP projects using Composer.

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

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

### Implement Dropdown Alignment Options

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

Use these examples to configure dropdown menu positioning, including responsive alignment and directional variations.

```html
<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>
```

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

### Use min-width media query mixins

Source: https://getbootstrap.com/docs/5.2/layout/breakpoints

Apply styles starting from a specific breakpoint and scaling up using the media-breakpoint-up mixin.

```scss
// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}
```

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

### Apply responsive order classes

Source: https://getbootstrap.com/docs/5.2/layout/columns

Use .order-first and .order-last to force elements to the start or end of the visual order.

```html
<div class="container text-center">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>
```

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

### Three Equal Columns using row-cols

Source: https://getbootstrap.com/docs/5.2/examples/grid

Easily create a grid with equal columns using the `.row-cols-*` classes. This example sets up three equal columns for medium viewports and up.

```html
`.col` child of `.row-cols-md-3`
`.col` child of `.row-cols-md-3`
`.col` child of `.row-cols-md-3`
```

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

### Initialize project folder and npm

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

Create a new directory and initialize a package.json file without interactive prompts.

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

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

### Segmented dropdown buttons in input groups

Source: https://getbootstrap.com/docs/5.2/forms/input-group

Examples of placing segmented dropdown buttons at the start or end of an input group.

```html
<div class="input-group mb-3">
  <button type="button" class="btn btn-outline-secondary">Action</button>
  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </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>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
  <button type="button" class="btn btn-outline-secondary">Action</button>
  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <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>
</div>
```

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

### Initialize project structure

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

Create the necessary directories and files for the project using terminal commands.

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

```

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

### Install Parcel dependency

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

Install Parcel as a development dependency.

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

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

### Position Grid Items with Start Classes

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

Use start classes as shorthand for grid-column-start to position items within the grid template. Start values begin at 1.

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

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

### View project structure

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

The expected file and folder hierarchy after initialization.

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

```

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

### Create index.html

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

The entry point HTML file that loads the project's JavaScript and CSS.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script type="module" src="./js/main.js"></script>
  </body>
</html>

```

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

### Create a loading card component

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

Demonstrates a standard card 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 href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
  </div>
</div>
```

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

### Example Code Block

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

A basic fenced code block example. Use this for displaying code snippets.

```plaintext
Example code block
```

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

### Project file structure with package manager

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

Recommended directory layout when using a package manager like npm.

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

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

### Install Bootstrap via RubyGems

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

Methods for adding Bootstrap to Ruby projects using Bundler or direct gem installation.

```ruby
gem 'bootstrap', '~> 5.2.3'
```

```bash
gem install bootstrap -v 5.2.3
```

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

### Initializing Bootstrap Plugins

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

Constructors accept an optional configuration object or default to standard behavior.

```javascript
const myModalEl = document.querySelector('#myModal')

const modal = new bootstrap.Modal(myModalEl) // initialized with defaults

const configObject = { keyboard: false }
const modal1 = new bootstrap.Modal(myModalEl, configObject) // initialized with no keyboard
```

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

### Implement basic placeholders

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

Shows how to apply the placeholder class to elements, including buttons.

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

<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>
```

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

### Sass Spacing Utility Examples

Source: https://getbootstrap.com/docs/5.2/utilities/spacing

Representative examples of how spacing utility classes map to CSS properties using the default spacer variable.

```css
.mt-0 {
  margin-top: 0 !important;
}

.ms-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}
```

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

### RTL starter template

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

A complete HTML template configured with the required dir and lang attributes for RTL support.

```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.2.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-DOXMLfHhQkvFFp+rWTZwVlPVqdIhpDVYT9csOnHSgWQWPX0v5MCGtjCJbY6ERspU" 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.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
    -->
  </body>
</html>
```

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

### Module resolution error

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

Example of the console error encountered when module specifiers cannot be resolved.

```text
Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".
```

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

### Get Toast Instance

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

Retrieve an existing toast instance associated with a DOM element.

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

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

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

### Create grids with all breakpoints

Source: https://getbootstrap.com/docs/5.2/layout/grid

Use .col and .col-* classes for grids that maintain the same layout across all device sizes.

```html
<div class="container text-center">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>
```

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

### Apply text-opacity utility classes

Source: https://getbootstrap.com/docs/5.2/utilities/colors

Demonstrates the use of predefined .text-opacity-* utility classes to control alpha transparency.

```html
<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>
```

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

### Define Negative Margin CSS

Source: https://getbootstrap.com/docs/5.2/utilities/spacing

Example of a negative margin utility class definition in CSS.

```css
.mt-n1 {
  margin-top: -0.25rem !important;
}
```

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

### Navbar Form Controls

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

Examples of integrating search forms and input groups into a navbar container.

```html
<nav class="navbar bg-light">
  <div class="container-fluid">
    <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>
</nav>
```

```html
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <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>
</nav>
```

```html
<nav class="navbar bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>
```

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

### Responsive Navbar with Sub-components

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

A complete example of a responsive light-themed navbar that collapses at the lg breakpoint.

```html
<nav class="navbar navbar-expand-lg bg-light">
  <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">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>
```

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

### Project file structure without package manager

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

Recommended directory layout when manually managing Bootstrap source files.

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

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

### Retrieving Plugin Instances

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

Use getInstance to retrieve an existing instance or getOrCreateInstance to fetch or initialize one.

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

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

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

### HTML5 Doctype Declaration

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

Required at the start of every Bootstrap project to ensure proper styling and rendering.

```html
<!doctype html>
<html lang="en">
  ...
</html>
```

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

### Handle Tooltip Events and Lifecycle

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

Shows how to initialize a tooltip instance and listen for the hidden event to trigger custom logic.

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

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

tooltip.hide()
```

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

### Implement card image caps

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

Use .card-img-top or .card-img-bottom to position images at the start or end of a card.

```html
<div class="card mb-3">
  <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 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="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <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="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>
```

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

### Configure webpack.config.js

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

Define the entry point, output directory, and development server settings for Webpack.

```javascript
const path = require('path')

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  }
}
```

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

### Customizing columns and gaps

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

Examples of adjusting column counts and gap sizes using CSS variables.

```html
<div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
</div>
```

```html
<div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
</div>
```

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

### Create a basic HTML5 template

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

Initial HTML structure with the required 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>
```

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

### Apply font-size with RFS mixin

Source: https://getbootstrap.com/docs/5.2/getting-started/rfs

Example of using the font-size mixin in Sass and the resulting compiled CSS.

```scss
.title {
  @include font-size(4rem);
}
```

```css
.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}
```

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

### Basic Form Example

Source: https://getbootstrap.com/docs/5.2/forms/overview

A standard form layout using Bootstrap's form-control and form-check classes.

```html
<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
```

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

### Initialize live toast with JavaScript

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

JavaScript logic to instantiate and show the toast component when the trigger button is clicked.

```javascript
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}
```

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

### Initialize Carousel with Options

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

Create a carousel instance with custom configuration options for interval and wrapping behavior.

```javascript
const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
```

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

### Manage Tooltip Instances and Content

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

Demonstrates retrieving a tooltip instance and updating its content dynamically using the setContent method.

```javascript
const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })
```

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

### Add Parcel npm scripts

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

Update the package.json file to include the start script for the Parcel development server.

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

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

### Initializing components with default exports

Source: https://getbootstrap.com/docs/5.2/customize/optimize

Bootstrap components in the dist folder use default exports, requiring this syntax for instantiation.

```javascript
import Modal from 'bootstrap/js/dist/modal'

const modal = new Modal(document.getElementById('myModal'))
```

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

### Align content flexbox utilities

Source: https://getbootstrap.com/docs/5.2/utilities/flex

Examples of applying different align-content classes to a flex container with wrapping enabled.

```html
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
```

```html
<div class="d-flex align-content-end flex-wrap">...</div>
```

```html
<div class="d-flex align-content-center flex-wrap">...</div>
```

```html
<div class="d-flex align-content-between flex-wrap">...</div>
```

```html
<div class="d-flex align-content-around flex-wrap">...</div>
```

```html
<div class="d-flex align-content-stretch flex-wrap">...</div>
```

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

### Initialize Modal with Options

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

Pass an optional configuration object during modal initialization.

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

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

### Applying color manipulation functions

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

Examples of calling tint and shade functions with specific color variables and weights.

```scss
.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}
```

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

### new bootstrap.Tooltip(element, options)

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

Initializes a tooltip instance for a given DOM element with optional configuration.

```APIDOC
## new bootstrap.Tooltip(element, options)

### Description
Initializes a new tooltip instance for the specified element. The element can be a DOM node or a CSS selector string.

### Parameters
- **element** (HTMLElement | string) - Required - The target element or selector to attach the tooltip to.
- **options** (object) - Optional - Configuration object for the tooltip behavior.

### Usage Example
```javascript
const exampleEl = document.getElementById('example');
const tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body
});
```
```

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

### Apply responsive float utilities

Source: https://getbootstrap.com/docs/5.2/utilities/float

Use responsive classes to apply float properties starting from specific viewport breakpoints.

```html
<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>
```

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

### Indicate sample output

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

Use the <samp> tag to represent output from a computer program.

```html
<samp>This text is meant to be treated as sample output from a computer program.</samp>
```

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

### Two Columns (md)

Source: https://getbootstrap.com/docs/5.2/examples/grid

Sets up two columns with specific widths (8 and 4) starting at the medium breakpoint (md).

```html
.col-md-8
.col-md-4
```

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

### Define Root CSS Variables in Sass

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

Example of how Sass variables are transformed into :root CSS variables for body styles.

```scss
  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};
  
```
Tokens:
Raw