Bootstrap

https://getbootstrap.com/docs/4.3
Admin
Bootstrap is a popular front-end framework for building responsive, mobile-first websites with...
Tokens:121,052
Snippets:1,322
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Popover Configuration Examples

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

Examples of specific option formats for popover configuration.

```javascript
container: 'body'
```

```javascript
delay: { "show": 500, "hide": 100 }
```

```javascript
'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
```

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

### Install Bootstrap via npm

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

Command to install Bootstrap in Node.js applications.

```bash
npm install bootstrap
```

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

### Install Bootstrap via NuGet

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

Commands for installing Bootstrap CSS or Sass packages in .NET projects.

```powershell
Install-Package bootstrap
```

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

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

### Listen for Tooltip Events

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

Example of attaching an event listener to a tooltip.

```javascript
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})
```

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

### Grid System Class Usage

Source: https://getbootstrap.com/docs/4.3/migration

Example of the updated grid class naming convention in v4.

```html
.col-6.col-sm-4.col-md-3
```

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

### Implement a responsive navbar with sub-components

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

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

```html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
```

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

### Install Bootstrap via yarn

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

Command to install Bootstrap in Node.js applications using yarn.

```bash
yarn add bootstrap
```

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

### Clearfix Usage Example

Source: https://getbootstrap.com/docs/4.3/utilities/clearfix

Demonstrates a container using the clearfix class to wrap floated buttons.

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

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

### Install Bootstrap via Composer

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

Command to manage Bootstrap assets in PHP projects using Composer.

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

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

### Basic Input Group Examples

Source: https://getbootstrap.com/docs/4.3/components/input-group

Demonstrates placing add-ons on either side of an input or textarea. Ensure labels are placed outside the input group container.

```html
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <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">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

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

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

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

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

### SCSS Variable Configuration

Source: https://getbootstrap.com/docs/4.3/migration

Example of enabling features via SCSS variables instead of separate themes.

```scss
$enable-gradients: true
```

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

### Install Bootstrap via RubyGems

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

Commands for adding Bootstrap to Ruby projects via Bundler or direct gem installation.

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

```bash
gem install bootstrap -v 4.3.1
```

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

### .carousel(options)

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

Initializes the carousel with an optional object and starts cycling through items.

```APIDOC
## .carousel(options)

### Description
Initializes the carousel with an optional options object and starts cycling through items.

### Parameters
- **options** (object) - Optional - An object containing configuration settings for the carousel.
```

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

### Listen to Popover Events

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

Example of attaching a listener to a popover event.

```javascript
$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})
```

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

### Basic Progress Bar Examples

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

Standard implementation of progress bars using inline styles to define width and ARIA attributes for accessibility.

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

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

### Align Content Utilities

Source: https://getbootstrap.com/docs/4.3/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>
```

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

### Collapse Example with Link and Button

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

Demonstrates using both an anchor tag and a button to trigger a collapse element. Requires the data-toggle="collapse" attribute on the trigger.

```html
<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>
```

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

### Stretched Link Card Example

Source: https://getbootstrap.com/docs/4.3/utilities/stretched-link

Demonstrates how stretched links interact with containing blocks and CSS properties like position and transform.

```html
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched links</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>
    <p class="card-text">
      <a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
    </p>
    <p class="card-text bg-light" style="transform: rotate(0);">
      This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
    </p>
  </div>
</div>
```

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

### Create a basic media object

Source: https://getbootstrap.com/docs/4.3/components/media-object

Use the .media class to create a layout with a body and an image. The image is placed after the body to demonstrate content ordering.

```html
<div class="media">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Media object</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
  <img src="..." class="ml-3" alt="...">
</div>
```

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

### Create a Bootstrap 4.3 HTML5 starter template

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

Use this boilerplate to ensure proper responsive behavior and include all necessary dependencies for Bootstrap 4.3.

```html
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>
```

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

### Negative Margin Utility Example

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

Example of a negative margin utility class definition.

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

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

### Sass Spacing Utility Examples

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

Examples of how spacing utility classes are defined in Sass.

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

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

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

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

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

### Initializing Plugin Methods

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

Methods accept an optional options object, a target string, or no arguments for default behavior.

```javascript
$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately
```

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

### Implement all-breakpoint grid layouts

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

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

```html
<div class="container">
  <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>
```

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

### Create a basic form with Bootstrap

Source: https://getbootstrap.com/docs/4.3/components/forms

A standard form implementation using form-group classes, labels, and input controls.

```html
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group 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>
```

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

### Define Project File Structure with Package Manager

Source: https://getbootstrap.com/docs/4.3/getting-started/theming

Recommended directory structure when using a package manager like npm.

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

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

### Define Project File Structure Manually

Source: https://getbootstrap.com/docs/4.3/getting-started/theming

Recommended directory structure when manually managing Bootstrap source files.

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

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

### Initialize Tabs with HTML and JavaScript

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

Standard structure for tab navigation and content panes, including an initialization script.

```html
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  $(function () {
    $('#myTab li:last-child a').tab('show')
  })
</script>
```

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

### Listen for Alert Events

Source: https://getbootstrap.com/docs/4.3/components/alerts

Example of hooking into the closed.bs.alert event to execute code after an alert has been removed.

```javascript
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})
```

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

### Define HTML5 Doctype

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

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

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

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

### Use min-width Sass mixins

Source: https://getbootstrap.com/docs/4.3/layout/overview

Sass mixins for applying styles starting from a specific breakpoint and up.

```scss
// 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) { ... }

// 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;
  }
}
```

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

### Initialize Carousel with Options

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

Initialize the carousel with a custom configuration object.

```javascript
$('.carousel').carousel({
  interval: 2000
})
```

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

### Usage of theme color level function

Source: https://getbootstrap.com/docs/4.3/getting-started/theming

Example of calling the theme-color-level function with a color name and level.

```scss
.custom-element {
  color: theme-color-level(primary, -10);
}
```

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

### Usage of color retrieval functions

Source: https://getbootstrap.com/docs/4.3/getting-started/theming

Example of applying color retrieval functions within a CSS class.

```scss
.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}
```

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

### $().toast(options)

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

Initializes a toast component with optional configuration.

```APIDOC
## $().toast(options)

### Description
Attaches a toast handler to an element collection. Options can be passed via data attributes or JavaScript.

### Parameters
- **animation** (boolean) - Optional - Apply a CSS fade transition to the toast (Default: true)
- **autohide** (boolean) - Optional - Auto hide the toast (Default: true)
- **delay** (number) - Optional - Delay hiding the toast in milliseconds (Default: 500)

### Usage Example
$('.toast').toast({ delay: 1000 });
```

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

### Create equal-width multi-row layouts

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

Use the .w-100 utility class to force columns to wrap to a new row.

```html
<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>
```

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

### Apply CSS variables to elements

Source: https://getbootstrap.com/docs/4.3/getting-started/theming

Example of using CSS variables to set font and link color properties.

```css
body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}
```

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

### $().dropdown(options)

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

Initializes the dropdown plugin with optional configuration settings.

```APIDOC
## $().dropdown(options)

### Description
Initializes the dropdown plugin on a set of elements. Options can be passed as an object.

### Options
- **offset** (number|string|function) - Default: 0 - Offset of the dropdown relative to its target.
- **flip** (boolean) - Default: true - Allow Dropdown to flip in case of an overlapping on the reference element.
- **boundary** (string|element) - Default: 'scrollParent' - Overflow constraint boundary of the dropdown menu.
- **reference** (string|element) - Default: 'toggle' - Reference element of the dropdown menu.
- **display** (string) - Default: 'dynamic' - Set to 'static' to disable Popper.js dynamic positioning.
```

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

### Generate responsive utility classes

Source: https://getbootstrap.com/docs/4.3/getting-started/theming

Combine @each loops with media query mixins to create responsive variations based on the $grid-breakpoints map.

```scss
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}
```

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

### Add images to navbar-brand

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

Examples of using images within the navbar-brand component, requiring custom sizing utilities.

```html
<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.3/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>
```

```html
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.3/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>
```

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

### $().tooltip(options)

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

Initializes tooltips for an element collection with optional configuration.

```APIDOC
## $().tooltip(options)

### Description
Attaches a tooltip handler to a set of elements. You must initialize tooltips manually.

### Parameters
- **options** (object) - Optional - An object containing configuration settings for the tooltip.
```

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

### Implement a Spanish custom file input

Source: https://getbootstrap.com/docs/4.3/components/forms

Example of using the lang attribute to trigger localized strings defined in SCSS.

```html
<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>
```

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

### $().toast(options)

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

Initializes a toast element with optional configuration settings.

```APIDOC
## $().toast(options)

### Description
Initializes the toast component on a selected element. You can pass an optional object to configure the toast behavior.

### Parameters
- **options** (object) - Optional - Configuration object for the toast (e.g., { autohide: false }).
```

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

### Toast with Manual Dismissal

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

Example of a toast component configured with autohide disabled, requiring a close button for user interaction.

```html
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>
```

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

### Apply Responsive Float Classes

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

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

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

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

### Create a basic list group

Source: https://getbootstrap.com/docs/4.3/components/list-group

Use an unordered list with the list-group class and list-group-item class for each item.

```html
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>
```

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

### Create a basic three-column grid

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

Uses the .container and .row classes to create three equal-width columns that stack on extra-small screens and align horizontally on small screens and above.

```html
<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>
```

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

### $().popover(options)

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

Initializes popovers for a collection of elements with optional configuration settings.

```APIDOC
## $().popover(options)

### Description
Initializes the popover component on selected elements. Options can be passed as an object to customize the behavior, appearance, and content of the popover.

### Parameters
#### Options
- **animation** (boolean) - Optional - Apply a CSS fade transition to the popover. Default: true.
- **container** (string|element) - Optional - Appends the popover to a specific element. Default: false.
- **content** (string|element|function) - Optional - Default content value if data-content attribute isn't present.
- **delay** (number|object) - Optional - Delay showing and hiding the popover (ms). Default: 0.
- **html** (boolean) - Optional - Insert HTML into the popover. Default: false.
- **placement** (string|function) - Optional - How to position the popover (auto, top, bottom, left, right). Default: 'right'.
- **selector** (string) - Optional - If a selector is provided, popover objects will be delegated to the specified targets.
- **template** (string) - Optional - Base HTML to use when creating the popover.
- **title** (string|element|function) - Optional - Default title value if title attribute isn't present.
- **trigger** (string) - Optional - How popover is triggered (click, hover, focus, manual). Default: 'click'.
- **offset** (number|string) - Optional - Offset of the popover relative to its target. Default: 0.
- **fallbackPlacement** (string|array) - Optional - Allow to specify which position Popper will use on fallback. Default: 'flip'.
- **boundary** (string|element) - Optional - Overflow constraint boundary of the popover. Default: 'scrollParent'.
- **sanitize** (boolean) - Optional - Enable or disable the sanitization. Default: true.
- **whiteList** (object) - Optional - Object which contains allowed attributes and tags.
- **sanitizeFn** (null|function) - Optional - Supply your own sanitize function. Default: null.
```

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

### Create stacked to horizontal layouts

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

Apply .col-sm-* classes to define columns that stack on extra small devices and become horizontal starting at the small breakpoint.

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

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

### Import Bootstrap JavaScript

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

Import the full Bootstrap JavaScript bundle or individual plugins into your entry point file.

```javascript
import 'bootstrap';
```

```javascript
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
```

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

### .modal('show')

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

Manually opens a modal.

```APIDOC
## .modal('show')

### Description
Manually opens a modal.
```

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

### Event Handling

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

Bootstrap provides custom events for plugin actions, supporting both infinitive (start) and past participle (completion) forms. Events support preventDefault() to stop actions.

```APIDOC
## Event Handling

### Description
Listen to custom events triggered by Bootstrap plugins. Infinitive events (e.g., 'show') allow for `preventDefault()` to cancel the action.

### Example
```javascript
$('#myModal').on('show.bs.modal', function (e) {
  if (!data) {
    return e.preventDefault(); // stops modal from being shown
  }
});

// Listen for completion
$('#myCollapse').on('shown.bs.collapse', function (e) {
  // Action to execute once the transition is complete
});
```
```

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

### Implement a basic custom file input

Source: https://getbootstrap.com/docs/4.3/components/forms

Standard HTML structure for a custom file input component.

```html
<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>
```

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

### Create a list-based media object

Source: https://getbootstrap.com/docs/4.3/components/media-object

Apply the .media class to list items within a .list-unstyled container to create a list of media objects.

```html
<ul class="list-unstyled">
  <li class="media">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li class="media my-4">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li class="media">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
</ul>
```

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

### $().popover(options)

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

Initializes popovers for a collection of elements with optional configuration.

```APIDOC
## $().popover(options)

### Description
Initializes popovers for a collection of elements. Accepts an optional object to configure the popover behavior.

### Parameters
- **options** (object) - Optional - Configuration object for the popover.
```

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

### .popover(options)

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

Initializes popovers for an element collection.

```APIDOC
## .popover(options)

### Description
Initializes popovers for an element collection.
```

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

### Precompiled Bootstrap Directory Structure

Source: https://getbootstrap.com/docs/4.3/getting-started/contents

Displays the file hierarchy of the precompiled Bootstrap download, including CSS and JS assets.

```text
bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map
```

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

### Progress Bar with Utility Classes

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

Implementation using Bootstrap width utility classes to configure the progress bar width.

```html
<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
```

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

### Create actionable link badges

Source: https://getbootstrap.com/docs/4.3/components/badge

Use anchor tags with contextual classes to provide hover and focus states.

```html
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>
```

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

### Carousel Initialization and Methods

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

Methods to initialize the carousel, control cycling, navigate between items, and dispose of the instance.

```APIDOC
## .carousel(options)
Initializes the carousel with an optional options object and starts cycling through items.

## .carousel('cycle')
Cycles through the carousel items from left to right.

## .carousel('pause')
Stops the carousel from cycling through items.

## .carousel(number)
Cycles the carousel to a particular frame (0 based).

## .carousel('prev')
Cycles to the previous item.

## .carousel('next')
Cycles to the next item.

## .carousel('dispose')
Destroys an element’s carousel.
```

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

### Initialize List Group Tabs

Source: https://getbootstrap.com/docs/4.3/components/list-group

Structure the list group and tab content, then use the tab method to activate a specific item on load.

```html
<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

<script>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>
```

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

### Initialize Collapse with Options

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

Activate a collapsible element with a custom options object.

```javascript
$('#myCollapsible').collapse({
  toggle: false
})
```

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

### Implement card image overlays

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

Use .card-img-overlay to position card content on top of a background image.

```html
<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <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">Last updated 3 mins ago</p>
  </div>
</div>
```

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

### Browserslist configuration

Source: https://getbootstrap.com/docs/4.3/getting-started/browsers-devices

Defines the range of supported browsers and versions for the project.

```text
# https://github.com/browserslist/browserslist#readme

>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30
```

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

### Create a basic table

Source: https://getbootstrap.com/docs/4.3/content/tables

Apply the .table class to a standard HTML table element to enable Bootstrap styling.

```html
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
```

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

### .modal(options)

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

Activates content as a modal. Accepts an optional options object to configure behavior like backdrop, keyboard support, focus, and initial visibility.

```APIDOC
## .modal(options)

### Description
Activates your content as a modal. Accepts an optional options object.

### Options
- **backdrop** (boolean or 'static') - Default: true - Includes a modal-backdrop element. Use 'static' to prevent closing on click.
- **keyboard** (boolean) - Default: true - Closes the modal when the escape key is pressed.
- **focus** (boolean) - Default: true - Puts the focus on the modal when initialized.
- **show** (boolean) - Default: true - Shows the modal when initialized.

### Example
$('#myModal').modal({
  keyboard: false
})
```

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

### Apply Shadow Utility Classes

Source: https://getbootstrap.com/docs/4.3/utilities/shadows

Use these classes to apply varying levels of box-shadow to elements. Ensure $enable-shadows is configured if global component shadows are desired.

```html
<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>
```

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

### Create a basic toast

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

A standard toast structure including a header with a dismiss button and a body.

```html
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>
```

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

### Implement abbreviations

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

Use the abbr element with the initialism class for smaller font sizes.

```html
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
```

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

### Create a small table

Source: https://getbootstrap.com/docs/4.3/content/tables

Use the table-sm class to make tables more compact by cutting all cell padding in half.

```html
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
```

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

### Create a base navigation with <nav>

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

Uses a <nav> element for a more semantic approach without requiring <ul> or <li> tags.

```html
<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
```

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

### Implement block-level help text

Source: https://getbootstrap.com/docs/4.3/components/forms

Use the .form-text class for block-level help text below inputs. Ensure accessibility by linking the help text to the input via the aria-describedby attribute.

```html
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
```

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

### Implement a basic border spinner

Source: https://getbootstrap.com/docs/4.3/components/spinners

Use the spinner-border class to create a lightweight loading indicator.

```html
<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>
```

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

### Create a fixed-width container

Source: https://getbootstrap.com/docs/4.3/layout/overview

Use the container class for a responsive, fixed-width layout that adjusts at each breakpoint.

```html
<div class="container">
  <!-- Content here -->
</div>
```

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

### Basic Media Object

Source: https://getbootstrap.com/docs/4.3/components/media-object

A standard media object layout using the .media container and .media-body content wrapper.

```html
<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>
```
Tokens:
Raw