Bootstrap

https://getbootstrap.com/docs/5.3
Admin
Bootstrap is a popular, free, and open-source CSS framework directed at responsive, mobile-first...
Tokens:348,289
Snippets:2,845
Trust Score:10
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Start Parcel development server

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

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

```bash
npm start

```

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

### Start classes with .g-start-2 and .g-start-6

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

Demonstrates using start classes to position columns. Start classes are shorthand for grid-column-start and begin at 1, as 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>
```

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

### Install Bootstrap with Bun

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

Installs Bootstrap's source files via the Bun CLI. Requires a Sass compiler and Autoprefixer for a setup matching the official compiled versions.

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

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

### Install Bootstrap with npm

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

Installs Bootstrap's source files via npm. Requires a Sass compiler and Autoprefixer for a setup matching the official compiled versions.

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

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

### Install Sass and watch custom Sass file

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

Install the Sass CLI globally and watch a custom Sass file for changes, compiling it to CSS. Run these commands from the command line.

```bash
# Install Sass globally
npm install -g sass

# Watch your custom Sass for changes and compile it to CSS
sass --watch ./scss/custom.scss ./css/custom.css

```

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

### Add start script to package.json

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

Adds the "start": "vite" script to the existing scripts section in package.json to run the local Vite dev server.

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

```

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

### Install mini-css-extract-plugin

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

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

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

```

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

### Install Bootstrap with Composer

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

Installs and manages Bootstrap's Sass and JavaScript via Composer.

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

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

### Install Bootstrap and Popper

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

Installs Bootstrap and @popperjs/core. Popper is required for dropdowns, popovers, and tooltips; it can be omitted if those components are not used.

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

```

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

### Gap utility example with d-grid and gap-3

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

HTML example using the gap utility on a grid container. The class 'd-grid gap-3' sets a 1rem gap between grid items.

```html
<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>
```

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

### Basic input group examples

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

Basic input group examples showing add-ons on either side of an input, both sides, a label with help text, and a textarea. Place labels outside the input group.

```html
<div class="input-group mb-3">
  <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>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient’s username" aria-label="Recipient’s username" aria-describedby="basic-addon2">
  <span class="input-group-text" id="basic-addon2">@example.com</span>
</div>

<div class="mb-3">
  <label for="basic-url" class="form-label">Your vanity URL</label>
  <div class="input-group">
    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3 basic-addon4">
  </div>
  <div class="form-text" id="basic-addon4">Example help text goes outside the input group.</div>
</div>

<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-text">.00</span>
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Username" aria-label="Username">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Server" aria-label="Server">
</div>

<div class="input-group">
  <span class="input-group-text">With textarea</span>
  <textarea class="form-control" aria-label="With textarea"></textarea>
</div>
```

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

### Static modal example

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

A static modal example with overridden position and display, showing the modal header, body, and footer. The header includes a dismiss button, and the footer has Close and Save changes buttons.

```html
<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
```

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

### Install Bootstrap with NuGet

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

Installs Bootstrap's CSS or Sass and JavaScript via NuGet. Note that NuGet is designed for compiled code, not frontend assets; newer projects should use libman or another method.

```powershell
Install-Package bootstrap
```

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

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

### Install Bootstrap with yarn

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

Installs Bootstrap's source files via yarn. Requires a Sass compiler and Autoprefixer for a setup matching the official compiled versions.

```bash
yarn add bootstrap@5.3.8
```

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

### Create project folder structure with mkdir and touch

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

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

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

```

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

### Complete project structure after setup

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

Shows the expected directory tree after creating the files and folders, including src, package-lock.json, package.json, and vite.config.js.

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

```

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

### Align content start

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

Uses the align-content-start utility to align flex items to the start of the cross axis. This is the browser default. The example includes flex-wrap: wrap to demonstrate the effect.

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

```

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

### Use .text-opacity utilities

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

HTML example using the .text-opacity-* utilities to set text opacity levels.

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

```

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

### Create project folder and initialize npm

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

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

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

```

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

### Sass mixin row-cols()

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

Use the row-cols() Sass mixin to generate row columns classes. This example starts with three columns and changes to five from the medium breakpoint up.

```scss
.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}
```

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

### Create project folder structure and files

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

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

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

```

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

### Responsive ratio with Sass breakpoint

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

Sass example that changes the aspect ratio across breakpoints. Starts as 4x3 and changes to a custom 2x1 at the medium breakpoint using the CSS variable.

```scss
.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}
```

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

### Use .bg-opacity-* utilities

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

HTML example using the .bg-opacity-* utilities (75, 50, 25, 10) to set background opacity. The default div uses no opacity utility.

```html
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>
```

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

### Enable dark mode with data-bs-theme attribute

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

Add data-bs-theme="dark" to the <html> element to enable dark mode across the entire project. This example is based on the Bootstrap quick start template.

```html
<!doctype html>
<html lang="en" data-bs-theme="dark">
  <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@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <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>
  </body>
</html>
```

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

### Mix and match grid with .col-md-* and .col-* classes

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

Combine different classes for each grid tier to avoid simple stacking. This example shows columns that start at 50% wide on mobile and bump up to 33.3% wide on desktop.

```html
<div class="container text-center">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>
```

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

### Disabled fieldset example

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

Wrap form controls in a `<fieldset disabled>` to disable all native controls inside. Note that custom button-like elements (e.g., `<a class="btn btn-*">`) only get `pointer-events: none` and remain keyboard-focusable; add `tabindex="-1"` and `aria-disabled="disabled"` manually for full disabling.

```html
<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can’t check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
```

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

### Full HTML example with importmap

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

Complete HTML page that uses an importmap to map Popper and Bootstrap, then imports Bootstrap and initializes a popover. Requires es-module-shims for browsers without importmap support.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <title>Hello, modularity!</title>
  </head>
  <body>
    <h1>Hello, modularity!</h1>
    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>

    <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
    <script type="importmap">
    {
      "imports": {
        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/popper.min.js",
        "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.esm.min.js"
      }
    }
    </script>
    <script type="module">
      import * as bootstrap from 'bootstrap'

      new bootstrap.Popover(document.getElementById('popoverButton'))
    </script>
  </body>
</html>
```

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

### Install Vite with npm

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

Installs Vite as a development dependency.

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

```

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

### Complete project structure tree

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

Shows the expected file and folder layout after creating the project structure.

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

```

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

### Install Parcel as dev dependency

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

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

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

```

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

### Basic form example with email, password, checkbox, and submit button

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

A quick example demonstrating Bootstrap's form styles. Use appropriate type attributes on inputs (e.g., email, password) to leverage newer input controls. The form includes a text help block, a checkbox, and a submit button.

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

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

### Basic ratio example with iframe

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

Wrap an embed like an iframe in a parent with .ratio and an aspect ratio class. The immediate child is automatically sized via the universal selector .ratio > *.

```html
<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
```

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

### Create project folders and files

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

Creates the src and dist folder structure and placeholder files for the Webpack project. Run from the my-project folder.

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

```

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

### Carousel with data-bs-ride="true" (starts after interaction)

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

Uses data-bs-ride="true" so the carousel does not start cycling on page load; it only starts after the first user interaction. This is the alternative to the 'carousel' value for the ride option.

```html
<div id="carouselExampleRide" class="carousel slide" data-bs-ride="true">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
```

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

### Example: Use z-* utilities to stack elements

Source: https://getbootstrap.com/docs/5.3/utilities/z-index

Uses the low-level z-index utilities (z-3, z-2, z-1, z-0, and z-n1) to stack elements. Each element also requires a position value other than static, here applied with the position-absolute utility.

```html
<div class="z-3 position-absolute p-5 rounded-3"><span>z-3</span></div>
<div class="z-2 position-absolute p-5 rounded-3"><span>z-2</span></div>
<div class="z-1 position-absolute p-5 rounded-3"><span>z-1</span></div>
<div class="z-0 position-absolute p-5 rounded-3"><span>z-0</span></div>
<div class="z-n1 position-absolute p-5 rounded-3"><span>z-n1</span></div>
```

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

### Install Webpack development dependencies

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

Installs Webpack core, CLI, dev server, and html-webpack-plugin as development dependencies.

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

```

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

### Install Bootstrap gem without Bundler

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

Installs the Bootstrap gem directly via RubyGems when not using Bundler.

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

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

### RTL starter template

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

A complete HTML starter template with RTL enabled, including the required dir and lang attributes, the RTL CSS, and optional JavaScript bundles.

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

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

### Print display example

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

Shows how to control display when printing: hide on print, show only on print, and always show on print.

```html
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
```

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

### Install Sass for Bootstrap CSS

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

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

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

```

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

### Responsive navbar with all sub-components

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

Complete responsive navbar example that collapses at the lg breakpoint. Includes brand, nav links, dropdown, disabled link, and a search form. Uses background (bg-body-tertiary) and spacing (me-auto, mb-2, mb-lg-0, me-2) utility classes.

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

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

### Sizing form controls with .form-control-lg and .form-control-sm

Source: https://getbootstrap.com/docs/5.3/forms/form-control

Three input examples showing large, default, and small sizes using the respective classes.

```html
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
```

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

### Install additional dependencies for Bootstrap

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

Installs additional dependencies for importing and bundling Bootstrap's CSS and JS with Webpack: Sass, loaders, and Autoprefixer.

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

```

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

### Resetting offsets example

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

Reset offsets at responsive breakpoints by combining offset classes with different breakpoints. This example shows how to clear offsets when columns wrap.

```html
<div class="container text-center">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>
```

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

### Responsive hide example

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

Shows how to hide an element on large screens and wider, and how to hide it on screens smaller than large.

```html
<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
```

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

### Get toast instance with getInstance

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

Gets the toast instance associated with a DOM element using the static getInstance method. Returns a Bootstrap toast instance.

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

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

### Order-first and order-last classes example

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

Use responsive .order-first and .order-last classes to apply order: -1 and order: 6 respectively. These can be intermixed with numbered .order-* classes.

```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>
```
Tokens:
Raw