Bootstrap

https://getbootstrap.com/docs/3.4/
Admin
Bootstrap is an open-source HTML, CSS, and JavaScript framework for developing responsive,...
Tokens:101,945
Snippets:1,142
Trust Score:10
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install Bootstrap with Bower

Source: https://getbootstrap.com/docs/3.4/getting-started

Install and manage Bootstrap's Less, CSS, JavaScript, and fonts using Bower.

```bash
bower install bootstrap
```

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

### Install Grunt CLI and dependencies

Source: https://getbootstrap.com/docs/3.4/getting-started

Install the Grunt CLI globally, then install local dependencies from package.json in the Bootstrap root directory.

```bash
npm install -g grunt-cli
```

```bash
npm install
```

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

### Install Bootstrap with Composer

Source: https://getbootstrap.com/docs/3.4/getting-started

Install and manage Bootstrap's Less, CSS, JavaScript, and fonts using Composer.

```bash
composer require twbs/bootstrap
```

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

### Basic Dropdown Example

Source: https://getbootstrap.com/docs/3.4/components

Wrap the dropdown trigger and menu within .dropdown (or an element with position: relative) and add the menu HTML. This is the basic dropdown example, made interactive with the dropdown JavaScript plugin.

```html
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
```

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

### Basic panel example

Source: https://getbootstrap.com/docs/3.4/components

Basic panel structure using the .panel and .panel-body classes. By default, .panel applies basic border and padding to contain content.

```html
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>
```

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

### Install Bootstrap with npm

Source: https://getbootstrap.com/docs/3.4/getting-started

Install Bootstrap using npm. The 'bootstrap' module loads all jQuery plugins onto the jQuery object and does not export anything.

```bash
npm install bootstrap@3
```

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

### Basic button group example

Source: https://getbootstrap.com/docs/3.4/components

Wrap a series of buttons with .btn in .btn-group. Use role="group" and an aria-label for assistive technologies.

```html
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
```

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

### Static modal example

Source: https://getbootstrap.com/docs/3.4/javascript

Static modal markup with header, body, and footer actions. Uses Bootstrap classes modal, modal-dialog, modal-content, modal-header, modal-body, and modal-footer.

```html
<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
```

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

### Dropup Example

Source: https://getbootstrap.com/docs/3.4/components

Change the dropdown to expand upwards by adding .dropup to the parent element instead of .dropdown.

```html
<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
```

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

### Using and reassigning color variables

Source: https://getbootstrap.com/docs/3.4/css

Shows two ways to use the color variables: directly in a rule or by reassigning them to a more meaningful variable for your project. The example uses @brand-primary and @brand-info.

```less
// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}
```

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

### Links in alerts with .alert-link

Source: https://getbootstrap.com/docs/3.4/components

Use the .alert-link utility class to provide matching colored links within any alert. This example shows the four contextual classes with alert-link anchors.

```html
<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
```

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

### Show and hide content with .show and .hidden classes

Source: https://getbootstrap.com/docs/3.4/css

HTML example showing how to apply the .show and .hidden classes to force an element to be displayed or hidden, including for screen readers. These classes use !important to avoid specificity conflicts and are only available for block level toggling.

```html
<div class="show">...</div>
<div class="hidden">...</div>
```

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

### Static tooltip directions (left, top, bottom)

Source: https://getbootstrap.com/docs/3.4/javascript

Static tooltip examples for left, top, and bottom placements. The fourth direction (right) is not shown in this snippet. Tooltips with zero-length titles are never displayed.

```html
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
```

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

### Collapse with link and button

Source: https://getbootstrap.com/docs/3.4/javascript

Collapse example with a link using href and a button using data-target. Both require data-toggle="collapse". The collapse element uses .collapse to hide content, .collapsing during transitions, and .collapse.in to show.

```html
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" 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>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>
```

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

### Panel with table and no body

Source: https://getbootstrap.com/docs/3.4/components

Use this panel when you want the table to start immediately after the heading, without a panel body. The component moves from panel header to table without interruption.

```html
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>
```

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

### Basic list group with .list-group and .list-group-item

Source: https://getbootstrap.com/docs/3.4/components

Basic list group using an unordered list with the .list-group and .list-group-item classes. Use as a starting point for more complex list groups.

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

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

### Dropdown Divider Example

Source: https://getbootstrap.com/docs/3.4/components

Add a divider to separate series of links in a dropdown menu using <li role="separator" class="divider">.

```html
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>
```

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

### Panel with heading and panel-title

Source: https://getbootstrap.com/docs/3.4/components

Two panel examples: one with a plain .panel-heading and one with a .panel-title heading. The .panel-heading overrides font sizes of h1-h6, and links inside .panel-title are properly colored.

```html
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>
```

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

### Basic input group examples with add-ons

Source: https://getbootstrap.com/docs/3.4/components

Shows four input-group variations: add-on on the left, add-on on the right, add-ons on both sides, and a label with a left add-on. Multiple add-ons on a single side and multiple form-controls in one group are not supported.

```html
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

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

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

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

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

### Basic alert examples with contextual classes

Source: https://getbootstrap.com/docs/3.4/components

Basic alert messages require a contextual class (success, info, warning, or danger) because alerts have no default class. The role="alert" attribute is included for accessibility.

```html
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
```

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

### Media list markup

Source: https://getbootstrap.com/docs/3.4/components

Use this markup to place media objects inside a list, which is useful for comment threads or article lists. The example shows a single list item with a media-left image and a media-body containing a media-heading.

```html
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>
```

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

### Button sizes with .btn-lg, .btn-sm, .btn-xs

Source: https://getbootstrap.com/docs/3.4/css

Use the size classes .btn-lg, .btn-sm, and .btn-xs on button elements to create large, small, and extra small buttons. The example shows primary and default button variants for each size.

```html
<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
```

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

### Basic form with form-group and form-control

Source: https://getbootstrap.com/docs/3.4/css

Basic form example using .form-group for spacing and .form-control for inputs. Includes text, password, file, checkbox, and submit button. Note: do not mix form groups directly with input groups; nest the input group inside the form group instead.

```html
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </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">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
```

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

### Rerun npm install after troubleshooting

Source: https://getbootstrap.com/docs/3.4/getting-started

Rerun npm install after deleting the /node_modules/ directory to resolve dependency or Grunt command issues.

```bash
npm install
```

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

### Build and test docs assets with grunt docs

Source: https://getbootstrap.com/docs/3.4/getting-started

Builds and tests CSS, JavaScript, and other assets used for local documentation via bundle exec jekyll serve.

```bash
grunt docs
```

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

### #gradient > .radial(#start; #end)

Source: https://getbootstrap.com/docs/3.4/css

Creates a radial background gradient from two colors.

```APIDOC
## #gradient > .radial(#start; #end)

### Description
Creates a radial background gradient from the start color to the end color.

### Method
Mixin

### Parameters
- **start** (color) - Required - The starting color of the gradient.
- **end** (color) - Required - The ending color of the gradient.

### Usage Example
```less
#gradient > .radial(#333; #000);
```
```

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

### Build everything and run tests with grunt

Source: https://getbootstrap.com/docs/3.4/getting-started

Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator, and regenerates Customizer assets. Requires Jekyll and is usually only needed when hacking on Bootstrap itself.

```bash
grunt
```

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

### $(selector).tooltip(options)

Source: https://getbootstrap.com/docs/3.4/javascript

Initializes tooltips on selected elements with configurable options.

```APIDOC
## [JS] $(selector).tooltip(options)

### Description
Initializes tooltips on selected elements. The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.

### Method
JavaScript function call

### Endpoint
$(selector).tooltip(options)

### Parameters
#### Options
- **animation** (boolean) - Optional - Default: true - Apply a CSS fade transition to the tooltip.
- **container** (string | false) - Optional - Default: false - Appends the tooltip to a specific element. Example: `container: 'body'`. Useful to position the tooltip in the flow of the document near the triggering element.
- **delay** (number | object) - Optional - Default: 0 - Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure: `delay: { "show": 500, "hide": 100 }`.
- **html** (boolean) - Optional - Default: false - Insert HTML into the tooltip. If false, jQuery's `text` method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
- **placement** (string | function) - Optional - Default: 'top' - How to position the tooltip - top | bottom | left | right | auto. When "auto" is specified, it will dynamically reorient the tooltip. When a function is used, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the tooltip instance.
- **selector** (string | false) - Optional - Default: false - If a selector is provided, tooltip objects will be delegated to the specified targets. Used to apply tooltips to dynamically added DOM elements.
- **template** (string) - Optional - Default: `'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'` - Base HTML to use when creating the tooltip. The tooltip's `title` will be injected into the `.tooltip-inner`. `.tooltip-arrow` will become the tooltip's arrow. The outermost wrapper element should have the `.tooltip` class.

### Request Example
```javascript
$('#example').tooltip(options)
```

### Response
No return value documented.

### Notes
- Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.
- For security reasons, the `sanitize`, `sanitizeFn` and `whiteList` options cannot be supplied using data attributes.
- The tooltip plugin is opt-in; you must initialize it yourself.
- When using tooltips on elements within a `.btn-group` or `.input-group`, or on table-related elements, specify `container: 'body'` to avoid unwanted side effects.
- Invoking `$(...).tooltip('show')` when the target element is `display: none;` will cause the tooltip to be incorrectly positioned.
- Only add tooltips to keyboard-focusable elements for accessibility.
- To add a tooltip to a disabled element, wrap it in a `<div>` and apply the tooltip to that `<div>`.
```

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

### #gradient > .horizontal(#start; #end)

Source: https://getbootstrap.com/docs/3.4/css

Creates a horizontal background gradient from two colors.

```APIDOC
## #gradient > .horizontal(#start; #end)

### Description
Creates a horizontal background gradient from the start color to the end color.

### Method
Mixin

### Parameters
- **start** (color) - Required - The starting color of the gradient.
- **end** (color) - Required - The ending color of the gradient.

### Usage Example
```less
#gradient > .horizontal(#333; #000);
```
```

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

### Example usage of grid mixins with HTML

Source: https://getbootstrap.com/docs/3.4/css

Shows how to use the default mixins to create a two-column layout with a gap. The Less defines .wrapper, .content-main, and .content-secondary classes; the HTML uses those classes to structure the page. The layout uses .make-lg-column(8) and .make-lg-column(3) with an offset of 1.

```less
.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}
```

```html
<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>
```

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

### #gradient > .vertical(#start; #end)

Source: https://getbootstrap.com/docs/3.4/css

Creates a vertical background gradient from two colors.

```APIDOC
## #gradient > .vertical(#start; #end)

### Description
Creates a vertical background gradient from the start color to the end color.

### Method
Mixin

### Parameters
- **start** (color) - Required - The starting color of the gradient.
- **end** (color) - Required - The ending color of the gradient.

### Usage Example
```less
#gradient > .vertical(#333; #000);
```
```

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

### #gradient > .horizontal-three-colors(#start; #mid; #stop; #end)

Source: https://getbootstrap.com/docs/3.4/css

Creates a horizontal gradient with three colors.

```APIDOC
## #gradient > .horizontal-three-colors(#start; #mid; #stop; #end)

### Description
Creates a horizontal gradient with three colors, where the middle color stops at a specified percentage.

### Method
Mixin

### Parameters
- **start** (color) - Required - The starting color of the gradient.
- **mid** (color) - Required - The middle color of the gradient.
- **stop** (percentage) - Required - The color stop percentage for the middle color.
- **end** (color) - Required - The ending color of the gradient.

### Usage Example
```less
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);
```
```

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

### Mobile, tablet, and desktop grid with .col-sm-*

Source: https://getbootstrap.com/docs/3.4/css

Build on the mobile/desktop example by adding tablet (.col-sm-*) classes for more dynamic layouts. The first row uses .col-xs-12 .col-sm-6 .col-md-8 and .col-xs-6 .col-md-4; the second row uses .col-xs-6 .col-sm-4 and includes an optional .clearfix .visible-xs-block to clear extra small columns when content heights differ.

```html
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
```

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

### #gradient > .vertical-three-colors(#start; #mid; #stop; #end)

Source: https://getbootstrap.com/docs/3.4/css

Creates a vertical gradient with three colors.

```APIDOC
## #gradient > .vertical-three-colors(#start; #mid; #stop; #end)

### Description
Creates a vertical gradient with three colors, where the middle color stops at a specified percentage.

### Method
Mixin

### Parameters
- **start** (color) - Required - The starting color of the gradient.
- **mid** (color) - Required - The middle color of the gradient.
- **stop** (percentage) - Required - The color stop percentage for the middle color.
- **end** (color) - Required - The ending color of the gradient.

### Usage Example
```less
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
```
```

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

### .modal('show')

Source: https://getbootstrap.com/docs/3.4/javascript

Manually opens a modal.

```APIDOC
## [JavaScript] .modal('show')

### Description
Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).

### Method
JavaScript

### Endpoint
$('#myModal').modal('show')

### Parameters
None

### Request Example
$('#myModal').modal('show')

### Response
#### Success Response
No return value documented.

```

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

### #gradient > .directional(#start; #end; #angle)

Source: https://getbootstrap.com/docs/3.4/css

Creates a linear background gradient with a specified angle.

```APIDOC
## #gradient > .directional(#start; #end; #angle)

### Description
Creates a linear background gradient with a specified angle.

### Method
Mixin

### Parameters
- **start** (color) - Required - The starting color of the gradient.
- **end** (color) - Required - The ending color of the gradient.
- **angle** (deg) - Required - The angle of the gradient.

### Usage Example
```less
#gradient > .directional(#333; #000; 45deg);
```
```

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

### Sizing helpers: .size() and .square()

Source: https://getbootstrap.com/docs/3.4/css

Set dimensions with .size() or create a square with .square(). The .square() mixin calls .size() with equal values.

```less
// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }
```

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

### Event: show.bs.modal

Source: https://getbootstrap.com/docs/3.4/javascript

Infinitive event triggered at the start of a modal show action. Provides preventDefault functionality to stop the action.

```APIDOC
## Event: show.bs.modal

### Description
Triggered at the start of the modal show action. Provides preventDefault functionality to stop the modal from being shown.

### Event Name
`show.bs.modal`

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


### Parameters
- **e** (Event) - The event object. Calling `e.preventDefault()` stops the modal from being shown.

### Notes
- All infinitive events provide `preventDefault` functionality.
- Events are namespaced with `.bs.modal`.
```

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

### Default blockquote

Source: https://getbootstrap.com/docs/3.4/css

Wrap any HTML inside a <blockquote> element to create a default blockquote. The example uses a <p> for the quoted text.

```html
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
```

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

### Initialize modal with options

Source: https://getbootstrap.com/docs/3.4/javascript

Activates content as a modal with an optional options object. Here, keyboard is set to false to disable closing on escape key.

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

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

### Default thumbnail with linked image

Source: https://getbootstrap.com/docs/3.4/components

Default thumbnail example for linked images. Uses grid columns to create a responsive layout.

```html
<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>
```

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

### Image replacement with .text-hide class

Source: https://getbootstrap.com/docs/3.4/css

HTML example of using the .text-hide class to replace an element's text content with a background image.

```html
<h1 class="text-hide">Custom heading</h1>
```

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

### Stacked progress bars with contextual classes

Source: https://getbootstrap.com/docs/3.4/components

Place multiple bars into the same `.progress` to stack them. Each bar uses a contextual class (`progress-bar-success`, `progress-bar-warning`, `progress-bar-danger`) and a width style.

```html
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>
```

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

### Button loading and reset methods

Source: https://getbootstrap.com/docs/3.4/javascript

Shows how to use the loading and reset methods on a button via a click event. The loading method is called first, then after business logic, the reset method is called.

```html
<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>
```

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

### Dropdown Header Example

Source: https://getbootstrap.com/docs/3.4/components

Add a header to label sections of actions in a dropdown menu by using <li class="dropdown-header">.

```html
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>
```

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

### Bootstrap carousel with interval option

Source: https://getbootstrap.com/docs/3.4/javascript

Initializes a Bootstrap carousel with an options object, here setting the interval to 2000 milliseconds. The carousel starts cycling through items.

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

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

### show.bs.collapse

Source: https://getbootstrap.com/docs/3.4/javascript

Event that fires immediately when the show instance method is called.

```APIDOC
## [Event] show.bs.collapse

### Description
This event fires immediately when the `show` instance method is called.

### Event Type
show.bs.collapse

### Usage
Attach an event listener to the collapsible element.

### Example
```javascript
$('#myCollapsible').on('show.bs.collapse', function () {
  // do something…
})
```
```

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

### Use .navbar-text for navbar text

Source: https://getbootstrap.com/docs/3.4/components

Wrap text in an element with the .navbar-text class, typically on a <p> tag, to get proper leading and color in the navbar.

```html
<p class="navbar-text">Signed in as Mark Otto</p>
```

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

### Block level buttons with .btn-block

Source: https://getbootstrap.com/docs/3.4/css

Add .btn-block to a button to make it span the full width of its parent. The example shows primary and default block-level buttons.

```html
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
```

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

### $().button('loading')

Source: https://getbootstrap.com/docs/3.4/javascript

Sets a button to loading state.

```APIDOC
## `$().button('loading')`

### Description
Sets a button to loading state. This feature is deprecated since v3.3.5 and has been removed in v4.

### Method
`$().button('loading')`

### Usage
```
$('#myButton').button('loading')
```

```

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

### Bootstrap 3 Basic HTML Template

Source: https://getbootstrap.com/docs/3.4/getting-started

Minimal Bootstrap 3.4.1 HTML document with required meta tags, CDN links for CSS and JavaScript, jQuery 1.12.4, and HTML5 shim/Respond.js for IE8 support. Includes a warning that Respond.js does not work when viewing via file://.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>
```

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

### Horizontal description list with .dl-horizontal

Source: https://getbootstrap.com/docs/3.4/css

Makes terms and descriptions in a <dl> line up side-by-side. Starts stacked like default <dl>s and expands when the navbar expands.

```html
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>
```

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

### Remove gutters with .row-no-gutters

Source: https://getbootstrap.com/docs/3.4/css

Use the `.row-no-gutters` class on a row to remove gutters from its columns. The example shows three rows with different column combinations, all using the class.

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

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

### Affix Methods

Source: https://getbootstrap.com/docs/3.4/javascript

Methods for the Bootstrap affix plugin to activate and recalculate affixed content.

```APIDOC
## .affix(options)

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

### Method
.affix(options)

### Parameters
- **options** (object) - Optional - An object containing configuration options.

### Request Example
$('#myAffix').affix({
  offset: 15
})

### Response
No return value.
```

```APIDOC
## .affix('checkPosition')

### Description
Recalculates the state of the affix based on the dimensions, position, and scroll position of the relevant elements. The `.affix`, `.affix-top`, and `.affix-bottom` classes are added to or removed from the affixed content according to the new state. This method needs to be called whenever the dimensions of the affixed content or the target element are changed, to ensure correct positioning of the affixed content.

### Method
.affix('checkPosition')

### Parameters
None

### Request Example
$('#myAffix').affix('checkPosition')

### Response
No return value.
```

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

### Override offsets with .col-*-offset-0

Source: https://getbootstrap.com/docs/3.4/css

Override offsets from lower grid tiers with `.col-*-offset-0` classes. This example uses `.col-xs-offset-3` and `.col-sm-offset-0` to reset the offset at the small breakpoint.

```html
<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>
```

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

### .modal(options)

Source: https://getbootstrap.com/docs/3.4/javascript

Activates your content as a modal with optional options.

```APIDOC
## [JavaScript] .modal(options)

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

### Method
JavaScript

### Endpoint
$('#myModal').modal(options)

### Parameters
#### Options
- **backdrop** (boolean or string 'static') - Optional - Includes a modal-backdrop element. Alternatively, specify 'static' for a backdrop which doesn't close the modal on click.
- **keyboard** (boolean) - Optional - Closes the modal when escape key is pressed.
- **show** (boolean) - Optional - Shows the modal when initialized.
- **remote** (path) - Optional - Deprecated since v3.3.0 and removed in v4. If a remote URL is provided, content will be loaded one time via jQuery's load method and injected into the .modal-content div.

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

### Response
#### Success Response
No return value documented.

```

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

### Use custom sanitizeFn with DOMPurify

Source: https://getbootstrap.com/docs/3.4/javascript

Bypass Bootstrap's built-in sanitizer by providing a custom sanitizeFn, for example using DOMPurify. This is useful when you prefer a dedicated sanitization library.

```javascript
$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})
```

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

### Precompiled Bootstrap directory structure

Source: https://getbootstrap.com/docs/3.4/getting-started

Directory structure of the precompiled Bootstrap download. Includes compiled and minified CSS/JS, CSS source maps, the optional Bootstrap theme, and Glyphicons fonts.

```text
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2
```

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

### Activate tabs by selector

Source: https://getbootstrap.com/docs/3.4/javascript

Shows how to activate individual tabs by name, position, or index using the .tab('show') method.

```javascript
$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)
```
Tokens:
Raw