Bootstrap 4.5

https://getbootstrap.com/docs/4.5
Admin
Bootstrap is a popular open-source CSS framework for building responsive, mobile-first websites with...
Tokens:122,793
Snippets:1,352
Trust Score:10
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install dependencies

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

Commands to install Node.js and Ruby dependencies required for the build system.

```bash
npm install
```

```bash
gem install bundler
```

```bash
bundle install
```

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

### Install Bootstrap via NuGet

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

Install Bootstrap CSS or Sass packages for .NET development.

```powershell
Install-Package bootstrap
```

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

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

### SCSS Configuration Variables

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

Example of using SCSS variables for component configuration.

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

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

### Install Bootstrap via npm

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

Use npm to add Bootstrap to Node.js applications.

```bash
npm install bootstrap
```

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

### Install Bootstrap via Composer

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

Manage Bootstrap assets in PHP projects using Composer.

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

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

### Listen for tooltip events

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

Example of attaching an event listener to a tooltip element.

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

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

### Install Bootstrap via yarn

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

Use yarn to add Bootstrap to Node.js applications.

```bash
yarn add bootstrap
```

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

### Basic Input Group Examples

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

Demonstrates various configurations of input groups including prepended text, appended text, and multi-sided add-ons.

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

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

### Basic Progress Bar Examples

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

Demonstrates standard progress bars with varying widths using inline styles and required ARIA attributes.

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

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

### Clearfix Usage Example

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

Demonstrates how the clearfix utility prevents layout breakage when containing 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>
```

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

### Breadcrumb navigation examples

Source: https://getbootstrap.com/docs/4.5/components/breadcrumb

Basic implementation of breadcrumb navigation with varying levels of depth.

```html
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>
```

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

### Implement button addons in input groups

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

Examples of prepending and appending single or multiple buttons to input fields using input-group-prepend and input-group-append classes.

```html
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-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="button-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend" id="button-addon3">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons" aria-describedby="button-addon3">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
  <div class="input-group-append" id="button-addon4">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>
```

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

### Configure Popover Container

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

Example of setting the container option to body to prevent positioning issues during window resizing.

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

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

### Install Bootstrap via RubyGems

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

Add Bootstrap to Ruby projects using Bundler or direct gem installation.

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

```bash
gem install bootstrap -v 4.5.3
```

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

### Listen for popover events

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

Example of attaching an event listener to a popover.

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

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

### Grid System Class Usage

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

Example of the updated grid system class naming convention in Bootstrap 4.

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

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

### Use media-breakpoint-up Sass mixins

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

Sass mixins for targeting minimum viewport widths, including an example of conditional display styling.

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

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

### Configure Popover Delay

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

Example of setting specific delay times for showing and hiding a popover using an object.

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

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

### Define Grid Column Counts

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

Examples of setting the number of columns per row using the row-cols utility classes.

```html
<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
```

```html
<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
```

```html
<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
```

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

### Create a Bootstrap 4.5 HTML5 starter template

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

Use this boilerplate to ensure proper responsive behavior and include required Bootstrap dependencies. Choose between the bundle or individual script options for JavaScript.

```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.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    -->
  </body>
</html>
```

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

### Segmented Dropdown Buttons in Input Groups

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

Examples of placing segmented dropdown buttons at the start or end of an input field using input-group-prepend and input-group-append.

```html
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary">Action</button>
    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
  <div class="input-group-append">
    <button type="button" class="btn btn-outline-secondary">Action</button>
    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>
```

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

### Implement basic grid layouts

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

Use .col and .col-* classes to define column widths that remain consistent across all device breakpoints.

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

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

Uses the .media wrapper and .media-body class to align an image with text content.

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

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

### Project file structure without package manager

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

Recommended directory layout when manually managing Bootstrap source files.

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

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

### Create a basic form with Bootstrap

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

A standard form layout using form-group classes for spacing and form-control for input styling.

```html
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <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">
  </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>
```

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

### Navbar Brand Variations

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

Examples of using the navbar-brand class with anchor tags and headings.

```html
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>
```

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

### Project file structure with npm

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

Recommended directory layout when using a package manager to manage Bootstrap dependencies.

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

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

### Define HTML5 Doctype

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

Required at the start of every document to ensure proper styling.

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

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

### Align content flexbox utilities

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

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

### Execute npm build scripts

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

Common npm commands for building distribution files, running tests, and serving documentation.

```bash
npm run dist
```

```bash
npm test
```

```bash
npm run docs
```

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

```bash
npm run
```

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

### View precompiled Bootstrap directory structure

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

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

### Indicate sample output with <samp>

Source: https://getbootstrap.com/docs/4.5/content/code

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

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

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

### Custom CSS transition override

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

Example of applying a custom transition duration to the carousel item using CSS.

```css
transition: transform 2s ease, opacity .5s ease-out
```

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

### Initializing and invoking plugin methods

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

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

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

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

### Initialize Collapse with Options

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

Activate a collapsible element with specific configuration options passed as an object.

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

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

### Input Group with Dropdown Buttons

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

Examples of placing a dropdown button before or after an input field using input-group-prepend and input-group-append classes.

```html
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>
```

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

### Server-Side Form Validation Example

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

Demonstrates the use of .is-valid and .is-invalid classes on form inputs and selects, paired with feedback elements.

```html
<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>
```

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

### Stretched Link Containing Block Examples

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

Demonstrates how position and transform properties on parent elements affect the reach of a stretched link.

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

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

### Import Bootstrap JavaScript

Source: https://getbootstrap.com/docs/4.5/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.5/components/modal

Manually opens a modal.

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

### Description
Manually opens a modal. Returns to the caller before the modal has actually been shown.
```

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

### Customize grid column gutters

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

Example of using negative margins on a parent row to counteract increased padding on child columns.

```html
<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>
```

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

### Create a basic list group

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

Use an unordered list with the list-group class and list-group-item class on items to create a standard list.

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

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

### Define spacing utility classes

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

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

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

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

### Use media-breakpoint-down Sass mixins

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

Sass mixins for targeting maximum viewport widths, with an example of applying styles from a medium breakpoint and down.

```scss
@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}
```

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

### Progress Bar with Width Utilities

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

Shows how to use 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>
```

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

### Implement a default responsive container

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

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

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

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

### .popover(options)

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

Initializes popovers for an element collection.

```APIDOC
## .popover(options)

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

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

### Create stacked to horizontal grids

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

Apply .col-sm-* classes to ensure columns stack on extra-small devices and transition to horizontal layouts 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>
```

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

### Initialize List Group Tabs

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

Sets up a list group with data-toggle attributes and initializes a specific tab via JavaScript.

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

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

### Remove gutters from grid

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

The .no-gutters class removes negative margins from rows and horizontal padding from columns. This example shows the CSS implementation and the HTML usage.

```css
.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}
```

```html
<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
```

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

### Generate Responsive Utilities

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

Combine @each loops with media query mixins to generate 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; }
  }
}
```

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

### .modal(options)

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

### Parameters
- **options** (object) - Optional - Configuration object containing properties: backdrop (boolean|string), keyboard (boolean), focus (boolean), show (boolean).
```

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

### Add Multiple Addons to Input Groups

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

Stack multiple addons using input-group-prepend or input-group-append.

```html
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
  <div class="input-group-append">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
</div>
```

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

### Implement custom file input groups

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

Wrap custom-file inputs in input-group containers, using input-group-text or buttons as addons.

```html
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
  </div>
</div>

<div class="input-group mb-3">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile02">
    <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose file</label>
  </div>
  <div class="input-group-append">
    <span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
    <label class="custom-file-label" for="inputGroupFile03">Choose file</label>
  </div>
</div>

<div class="input-group">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
    <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
  </div>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
  </div>
</div>
```

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

### Create file input control

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

Use the .form-control-file class specifically for file input elements.

```html
<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>
```

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

### Responsive Nav with Flexbox Utilities

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

Uses flexbox utilities to create a nav that stacks vertically on small screens and expands horizontally on larger breakpoints.

```html
<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
```

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

### Apply viewport sizing utilities

Source: https://getbootstrap.com/docs/4.5/utilities/sizing

Use these classes to set width and height relative to the viewport dimensions.

```html
<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>
```

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

### Create an auto-sizing form with custom controls

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

Demonstrates the use of custom select and custom checkbox components within an auto-sizing layout.

```html
<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>
```

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

### Apply responsive behavior to images

Source: https://getbootstrap.com/docs/4.5/content/images

Use the .img-fluid class to ensure images scale with their parent element.

```html
<img src="..." class="img-fluid" alt="Responsive image">
```

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

### Include Bootstrap with Popper.js via CDN

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

Load jQuery, Popper.js, and Bootstrap separately using CDN links.

```html
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
```

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

### $().toast(options)

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

Initializes a toast component on an element collection with optional configuration.

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

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

### Options
- **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
```javascript
$('.toast').toast({ animation: true, autohide: true, delay: 500 });
```
```

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

### Implement responsive containers

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

Use responsive container classes to maintain 100% width until a specific breakpoint is reached, after which max-widths are applied.

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

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

### Inline help text implementation

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

Use inline HTML elements with utility classes to display help text alongside form controls in an inline layout.

```html
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>
```

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

### Initialize Popovers via JavaScript

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

Use this method to enable popovers on specific elements by passing an options object.

```javascript
$('#example').popover(options)
```

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

### Create a basic card with image and content

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

Displays a card with a fixed width, an image, a title, descriptive text, and a call-to-action button.

```html
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
```

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

### Block-level help text implementation

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

Use the .form-text class to create block-level help text that is properly associated with an input via aria-describedby.

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

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

### Importing all of Bootstrap

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

Include the entire Bootstrap framework in your custom Sass file.

```scss
// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";
```

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

### Initialize Carousel with Options

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

Initialize the carousel with a custom configuration object, such as setting the interval duration.

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

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

### Create actionable list group items with links

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

Use the .list-group-item-action class on anchor tags to enable hover, active, and disabled states. Do not use standard .btn classes with these items.

```html
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
</div>
```

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

### Implement a custom file input

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

Basic HTML structure for a custom file input component using Bootstrap classes.

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

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

### .toast('show')

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

Reveals the toast element.

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

### Description
Reveals an element’s toast. This method returns to the caller before the toast has actually been shown.

### Usage
```javascript
$('#element').toast('show');
```
```
Tokens:
Raw