Bootstrap

https://getbootstrap.com/docs
Admin
Bootstrap is a powerful, feature-packed frontend toolkit that helps build anything from prototype to...
Tokens:489,279
Snippets:3,811
Trust Score:10
Update:6 days ago
Show doc for...
Tokens:
Raw
### Install Bootstrap with Bun

Source: https://getbootstrap.com/docs/6.0/getting-started/install

Use this command to install Bootstrap via Bun. Package installs don't include documentation or complete build scripts.

```bash
bun add bootstrap
```

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

### Start npm scripts with npm start

Source: https://getbootstrap.com/docs/6.0/guides/npm

Run this command from the my-project folder to start the npm scripts. It builds the CSS, watches for changes, and serves the project.

```shell
npm start

```

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

### Start Parcel development server with npm start

Source: https://getbootstrap.com/docs/6.0/guides/parcel

Run this command from the my-project folder to start the Parcel development server and render the HTML file after compilation.

```shell
npm start
```

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

### Arrange elements example

Source: https://getbootstrap.com/docs/6.0/utilities/position

Demonstrates edge positioning utilities using the format `{property}-{position}`. The example places six absolutely positioned elements inside a relative container, using combinations of `top`, `start`, `bottom`, `end` with positions `0` and `50`.

```html
<div class="position-relative">
  <div class="position-absolute top-0 start-0"></div>
  <div class="position-absolute top-0 end-0"></div>
  <div class="position-absolute top-50 start-50"></div>
  <div class="position-absolute bottom-50 end-50"></div>
  <div class="position-absolute bottom-0 start-0"></div>
  <div class="position-absolute bottom-0 end-0"></div>
</div>
```

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

### Configure Yarn 2+ for Bootstrap Sass & JS example

Source: https://getbootstrap.com/docs/6.0/getting-started/install

Yarn 2+ (Yarn Berry) doesn't support `node_modules` by default, so these commands adjust the configuration for the Sass & JS example. Run them in order: set nodeLinker, create empty yarn.lock, install dependencies, and start the project.

```shell
yarn config set nodeLinker node-modules # Use the node_modules linker
touch yarn.lock # Create an empty yarn.lock file
yarn install # Install the dependencies
yarn start # Start the project
```

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

### Install Bootstrap with npm

Source: https://getbootstrap.com/docs/6.0/getting-started/install

Use this command to install Bootstrap via npm. Package installs don't include documentation or complete build scripts.

```bash
npm install bootstrap
```

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

### Padding utility example with .p-3 and .p-5

Source: https://getbootstrap.com/docs/6.0/utilities/padding

HTML example showing how to apply padding to all sides of an element using the .p-3 and .p-5 utility classes.

```html
<div class="p-3">.p-3</div>
<div class="p-5">.p-5</div>
```

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

### Install Bootstrap with Yarn

Source: https://getbootstrap.com/docs/6.0/getting-started/install

Use this command to install Bootstrap via Yarn. Package installs don't include documentation or complete build scripts.

```bash
yarn add bootstrap
```

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

### Font size classes example

Source: https://getbootstrap.com/docs/6.0/content/typography

HTML example showing all font size utility classes from .fs-xs to .fs-6xl.

```html
<div class="fs-xs">.fs-xs</div>
<div class="fs-sm">.fs-sm</div>
<div class="fs-md">.fs-md</div>
<div class="fs-lg">.fs-lg</div>
<div class="fs-xl">.fs-xl</div>
<div class="fs-2xl">.fs-2xl</div>
<div class="fs-3xl">.fs-3xl</div>
<div class="fs-4xl">.fs-4xl</div>
<div class="fs-5xl">.fs-5xl</div>
<div class="fs-6xl">.fs-6xl</div>
```

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

### Install Bootstrap with pnpm

Source: https://getbootstrap.com/docs/6.0/getting-started/install

Use this command to install Bootstrap via pnpm. Package installs don't include documentation or complete build scripts.

```bash
pnpm add bootstrap
```

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

### Install Bootstrap skills with npx

Source: https://getbootstrap.com/docs/6.0/getting-started/ai

Run this command to install every Bootstrap skill into your coding agent. The Skills CLI copies each SKILL.md from the repository into your agent.

```shell
npx skills add twbs/bootstrap
```

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

### Install mini-css-extract-plugin

Source: https://getbootstrap.com/docs/6.0/guides/webpack

Run this npm command to install the mini-css-extract-plugin package as a development dependency.

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

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

### Add npm start script to package.json

Source: https://getbootstrap.com/docs/6.0/guides/vite

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

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

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

### Install local development tools

Source: https://getbootstrap.com/docs/6.0/guides/npm

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

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

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

### CSS: Output for opacity class prefix example

Source: https://getbootstrap.com/docs/6.0/utilities/api

The compiled CSS output for the opacity class prefix example, showing the .o-* classes with their opacity values.

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

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

### Custom focus ring example

Source: https://getbootstrap.com/docs/6.0/helpers/focus-ring

Basic usage of the .focus-ring helper class on an anchor element. Tab into the example to see the focus ring in action.

```HTML
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
  Custom focus ring
</a>
```

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

### Project structure tree after setup

Source: https://getbootstrap.com/docs/6.0/guides/npm

Shows the expected project structure after running the setup commands. The tree includes the css and scss folders, configuration files, and the HTML entry point.

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

```

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

### Flex wrap-reverse example

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

Uses .flex-wrap-reverse to wrap flex items in reverse order, starting from the bottom.

```html
<div class="d-flex flex-wrap-reverse">
  ...
</div>
```

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

### Project structure after setup

Source: https://getbootstrap.com/docs/6.0/guides/vite

Shows the expected file tree after creating the project structure.

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

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

### Create project folder structure with mkdir and touch

Source: https://getbootstrap.com/docs/6.0/guides/npm

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

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

```

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

### HTML text alignment classes example

Source: https://getbootstrap.com/docs/6.0/utilities/text-alignment

Example of using Bootstrap text alignment classes for start, center, and end alignment on all viewport sizes, plus responsive end alignment classes for sm, md, lg, xl, and 2xl breakpoints.

```HTML
<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

<p class="sm:text-end">End aligned text on viewports sized SM (small) or wider.</p>
<p class="md:text-end">End aligned text on viewports sized MD (medium) or wider.</p>
<p class="lg:text-end">End aligned text on viewports sized LG (large) or wider.</p>
<p class="xl:text-end">End aligned text on viewports sized XL (extra large) or wider.</p>
<p class="2xl:text-end">End aligned text on viewports sized 2xl (extra extra large) or wider.</p>
```

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

### Create project folder structure with mkdir and touch

Source: https://getbootstrap.com/docs/6.0/guides/parcel

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

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

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

### Base class button example

Source: https://getbootstrap.com/docs/6.0/components/button

Shows the standard `.btn` class for basic button styling. Use this as a starting point for custom styles.

```html
<button type="button" class="btn">Base class</button>
```

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

### Set icon placement with iconPlacement option

Source: https://getbootstrap.com/docs/6.0/components/nav-overflow

Use the `iconPlacement` option to position the icon before (`'start'`, the default) or after (`'end'`) the text. This example places the icon after the text 'Menu'.

```JavaScript
const wrapper = document.querySelector('.nav-overflow')
new bootstrap.NavOverflow(wrapper, {
  moreText: 'Menu',
  iconPlacement: 'end'
})
```

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

### Scrollspy example with nested navigation and content

Source: https://getbootstrap.com/docs/6.0/components/scrollspy

This HTML example shows a scrollspy setup with a nested nav-pills sidebar and a scrollable content area. The content area uses data-bs-spy="scroll", data-bs-target="#navbar-example3", and data-bs-smooth-scroll="true" to highlight the active navigation link as the user scrolls. The example includes nested items (1-1, 1-2, 3-1, 3-2) and placeholder content.

```HTML
<div class="row">
  <div class="col-4">
    <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
      <nav class="nav nav-pills flex-column">
        <a class="nav-link" href="#item-1">Item 1</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
          <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
        </nav>
        <a class="nav-link" href="#item-2">Item 2</a>
        <a class="nav-link" href="#item-3">Item 3</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
          <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
        </nav>
      </nav>
    </nav>
  </div>

  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
      <div id="item-1">
        <h4>Item 1</h4>
        <p>...</p>
      </div>
      <div id="item-1-1">
        <h5>Item 1-1</h5>
        <p>...</p>
      </div>
      <div id="item-1-2">
        <h5>Item 1-2</h5>
        <p>...</p>
      </div>
      <div id="item-2">
        <h4>Item 2</h4>
        <p>...</p>
      </div>
      <div id="item-3">
        <h4>Item 3</h4>
        <p>...</p>
      </div>
      <div id="item-3-1">
        <h5>Item 3-1</h5>
        <p>...</p>
      </div>
      <div id="item-3-2">
        <h5>Item 3-2</h5>
        <p>...</p>
      </div>
    </div>
  </div>
</div>
```

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

### Handle hidden.bs.tooltip event with getOrCreateInstance

Source: https://getbootstrap.com/docs/6.0/components/tooltip

Use this JavaScript to get a tooltip instance and listen for the hidden.bs.tooltip event. The example creates a tooltip instance from an element with id 'myTooltip' and adds an event listener that runs when the tooltip is hidden.

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

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

tooltip.hide()
```

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

### Stacked to horizontal grid example

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

Uses .sm:col-* classes to create a grid that starts stacked and becomes horizontal at the small breakpoint (sm). The first row has an 8/4 split, the second row has three equal columns.

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

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

### Create project folder and initialize npm

Source: https://getbootstrap.com/docs/6.0/guides/parcel

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

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

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

### getInstance and setContent example

Source: https://getbootstrap.com/docs/6.0/components/tooltip

Shows how to get a tooltip instance using the static getInstance method and then change its content with setContent. The setContent method accepts an object where keys are selectors within the tooltip template and values can be string, element, function, or null.

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

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

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

### Create project folder structure

Source: https://getbootstrap.com/docs/6.0/guides/vite

Run these shell commands from the my-project folder to create the src directory structure and initial files.

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

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

### Install Bootstrap and dependencies

Source: https://getbootstrap.com/docs/6.0/guides/parcel

Installs Bootstrap, Floating UI, and Vanilla Calendar Pro. Floating UI is needed for menus, popovers, and tooltips; Vanilla Calendar Pro is needed for the datepicker. Both can be omitted if those features are not used.

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

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

### getOrCreateInstance and setContent example

Source: https://getbootstrap.com/docs/6.0/components/popover

Shows how to get or create a popover instance using bootstrap.Popover.getOrCreateInstance and then change its content with setContent. The setContent method accepts an object where each property-key is a valid string selector within the popover template, and each property-value can be string, element, function, or null.

```JavaScript
          // getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
popover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})
```

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

### RubyGems install command for Bootstrap

Source: https://getbootstrap.com/docs/6.0/getting-started/install

Install Bootstrap directly via RubyGems. Use Bundler for recommended installation.

```shell
gem install bootstrap -v 6.0.0-alpha.1
```

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

### Live demo with link and button toggles

Source: https://getbootstrap.com/docs/6.0/components/drawer

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

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

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

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

### Install Parcel

Source: https://getbootstrap.com/docs/6.0/guides/parcel

Installs Parcel as a development dependency using --save-dev. Parcel automatically installs language transformers like Sass as needed.

```shell
npm i --save-dev parcel
```

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

### Add a new utility: cursor example

Source: https://getbootstrap.com/docs/6.0/utilities/api

Adds a new cursor utility with responsive variants. Bootstrap merges your map on top of defaults, so supply only the new utilities.

```SCSS
// my-bootstrap.scss
@use "bootstrap/scss/bootstrap" with (
  $utilities: (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    ),
  )
);
```

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

### Navbar example with responsive drawer and search form

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

A complete navbar example combining branding, navigation links, a dropdown menu, a disabled link, a search form, and a responsive drawer toggled via the Drawer plugin. Uses the `navbar-toggler` button with `data-bs-toggle="drawer"` and `data-bs-target="#navbarDrawer"` to control the drawer. Resize the viewport to preview the responsive behavior.

```html
<nav class="navbar md:navbar-expand bg-1">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarDrawer" aria-controls="navbarDrawer" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog class="drawer drawer-end" tabindex="-1" id="navbarDrawer" aria-labelledby="navbarDrawerLabel">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarDrawerLabel">Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Close"></button>
      </div>
      <div class="drawer-body mb-2 md:mb-0">
        <ul class="nav navbar-nav me-auto">
          <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">
            <button class="nav-link" type="button" data-bs-toggle="menu" aria-expanded="false">
              Menu
            </button>
            <div class="menu">
              <a class="menu-item" href="#">Action</a>
              <a class="menu-item" href="#">Another action</a>
              <hr class="menu-divider">
              <a class="menu-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
          </li>
        </ul>
        <form class="hstack gap-2" role="search">
          <input class="form-control" type="search" placeholder="Search" aria-label="Search"/>
          <button class="btn-solid btn-icon theme-secondary" type="submit">
            <svg class="bi" width="16" height="16"><use href="#search" /></svg>
          </button>
        </form>
      </div>
    </dialog>
  </div>
</nav>
```

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

### Install Sass and watch custom Sass file

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

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

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

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

### Link opacity utility example

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

Link using the .link-50 utility to change color opacity.

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

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

### HTML example of theme layer color pairings

Source: https://getbootstrap.com/docs/6.0/customize/theme

Shows recommended pairings of foreground and background colors with border utilities. Use these classes to apply theme layer colors to elements. The example includes fg-body on bg-body with border-subtle, fg-body on bg-body, fg-3 on bg-1, fg-2 on bg-2, and fg-1 on bg-3.

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

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

### Install Vite as dev dependency

Source: https://getbootstrap.com/docs/6.0/guides/vite

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

```shell
npm i --save-dev vite
```

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

### Create project folders and files

Source: https://getbootstrap.com/docs/6.0/guides/webpack

Run these shell commands from the my-project folder to create the src and dist directories and initial files. This sets up the project structure needed for the Webpack configuration.

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

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

### Install PurgeCSS as a dev dependency

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

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

```Shell
npm install --save-dev purgecss
```

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

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

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

A quick example demonstrating Bootstrap's form styles. Uses form-label, form-control, form-text, and custom checkbox classes. Be sure to use appropriate type attributes on inputs.

```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-field">
    <input type="checkbox" id="exampleCheck1" class="check">
    <label for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn-solid theme-primary">Submit</button>
</form>
```

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

### Card row with image start

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

Use `.card-row` with `.card-img-start` to place the image at the inline start of a horizontal card.

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

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

### HTML for custom grid example

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

HTML structure that uses the custom grid classes defined in the Sass example.

```HTML
<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>
```

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

### Create a drawer instance with bootstrap.Drawer

Source: https://getbootstrap.com/docs/6.0/components/drawer

Activates content as a drawer element. Accepts an optional options object. Use this constructor to create a drawer instance.

```JavaScript
const bsDrawer = new bootstrap.Drawer('#myDrawer')
```

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

### Install Webpack development dependencies

Source: https://getbootstrap.com/docs/6.0/guides/webpack

Installs webpack, webpack-cli, webpack-dev-server, and html-webpack-plugin as development dependencies using --save-dev.

```shell
npm i --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
```
Tokens:
Raw