Bootstrap

https://getbootstrap.com/docs/3.3/
Admin
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive,...
Tokens:102,049
Snippets:1,062
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install local dependencies with npm

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

Run this command in the root /bootstrap/ directory to install the local dependencies listed in package.json.

```bash
npm install
```

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

### Install Bootstrap with Bower

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

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

```bash
$ bower install bootstrap
```

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

### Install grunt-cli globally

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

Install the Grunt command-line interface globally using npm. This is the first step after installing Node.js.

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

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

### Install Bootstrap with Composer

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

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

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

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

### Install Bootstrap with npm

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

Install Bootstrap using npm. The command installs version 3 of Bootstrap.

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

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

### Popover Live Demo

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

Example of a popover triggered by a button using data attributes.

```APIDOC
## Popover Live Demo

### Description
Example of a popover triggered by a button using data attributes.

### HTML Example
```html
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
```
```

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

### Enable popovers via JavaScript

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

Initializes a popover on the element with id 'example' using the .popover() method.

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

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

### Collapse plugin example

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

Shows how to use the collapse plugin with a link or button to toggle content visibility.

```APIDOC
## Collapse Example

### Description
Click the buttons below to show and hide another element via class changes: `.collapse` hides content, `.collapsing` is applied during transitions, `.collapse.in` shows content. You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="collapse"` is required.

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

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

### Mobile, tablet, and desktop grid example with col-xs-*, col-sm-*, and col-md-* classes

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

Builds on the previous 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 columns and includes an optional clearfix for extra small screens.

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

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

### Basic panel example

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

Creates a default panel with a body containing text. The .panel class applies basic border and padding.

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

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

### Address examples

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

Use the <address> element to present contact information. End lines with <br> to preserve formatting.

```html
<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>
```

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

### Modal with options object

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

Activates content as a modal with an optional options object. Example sets keyboard to false.

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

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

### Run Grunt commands

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

After installation, you can run various Grunt commands from the command line, such as grunt dist, grunt watch, grunt test, grunt docs, or just grunt.

```bash
grunt dist
```

```bash
grunt watch
```

```bash
grunt test
```

```bash
grunt docs
```

```bash
grunt
```

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

### Mobile and desktop grid example with col-xs-* and col-md-* classes

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

Use these Bootstrap 3 grid classes to control column widths on mobile (extra small) and desktop (medium) devices. The example shows three row configurations: one full-width and one half-width column, three columns that are 50% wide on mobile and 33.3% on desktop, and two columns that are always 50% wide.

```html
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <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>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <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>

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

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

### Page header example

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

Page header component using h1 with a small subtext element.

```html
<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>
```

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

### Pagination sizing with .pagination-lg and .pagination-sm

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

Add .pagination-lg or .pagination-sm for larger or smaller pagination. The example shows three nav elements with different sizes.

```html
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
```

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

### Chainable programmatic API example

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

Shows that all public APIs are single, chainable methods and return the collection acted upon.

```javascript
$('.btn.danger').button('toggle').addClass('fat')
```

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

### Stacked progress bars with multiple colors

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

Place multiple bars into the same .progress to stack them. Example shows success, warning, and danger bars.

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

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

### Collapse example with link and button

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

Shows how to use the collapse plugin with a link (href) or button (data-target). Both require data-toggle="collapse". The collapse div uses .collapse class.

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

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

### Jumbotron basic example

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

Basic jumbotron component with heading, paragraph, and a call-to-action button. Place inside a container for rounded corners.

```html
<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
```

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

### Dropdown show event example

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

Listen for the show.bs.dropdown event on the dropdown's parent element. The event fires immediately when the show instance method is called.

```javascript
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})
```

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

### Thumbnails default example

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

Default thumbnail grid for linked images. Uses Bootstrap grid columns (col-xs-6 col-md-3) and thumbnail class.

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

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

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

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

Add .btn-lg, .btn-sm, or .btn-xs for additional sizes. The example shows large, default, small, and extra small buttons.

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

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

### Clearfix Mixin and Usage

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

Uses the micro clearfix from Nicolas Gallagher. Add the .clearfix() mixin to an element instead of class="clearfix". The usage example shows applying it to a .container class.

```less
// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}
```

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

### Button group sizing with .btn-group-lg, .btn-group-sm, .btn-group-xs

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

Apply sizing classes to the .btn-group instead of each button. The example shows four groups: large, default, small, and extra-small.

```html
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
```

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

### Media alignment with media-middle

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

Example showing middle alignment for media objects. Add the .media-middle class to the .media-left container to vertically center the image relative to the content. The default alignment is top.

```html
<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>
```

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

### Example usage of mixins to create a two-column layout

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

Shows how to use the mixins with default settings to create a wrapper and two columns (main and secondary) with an offset. The accompanying HTML markup uses the generated classes.

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

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

### Disabled fieldset example

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

Add the `disabled` attribute to a `<fieldset>` to disable all controls within it. Note that browsers treat native form controls as disabled, but anchor elements with `btn` classes only get `pointer-events: none` and may not be fully supported in older browsers.

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

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

### Label in Heading Example

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

Use a label inside a heading to highlight new or updated content. The example shows an h3 heading with a default label.

```html
<h3>Example heading <span class="label label-default">New</span></h3>
```

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

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

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

Creates a radial gradient from two colors.

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

### Description
Creates a radial gradient from two colors.

### Parameters
- **@start** (color) - Required - The starting color.
- **@end** (color) - Required - The ending color.

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

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

### #gradient > .directional(@start; @end; @deg)

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

Creates a linear gradient with a specified angle.

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

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

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

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

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

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

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

Creates a horizontal linear gradient from two colors.

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

### Description
Creates a horizontal linear gradient from two colors.

### Parameters
- **@start** (color) - Required - The starting color.
- **@end** (color) - Required - The ending color.

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

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

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

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

Creates a vertical linear gradient from two colors.

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

### Description
Creates a vertical linear gradient from two colors.

### Parameters
- **@start** (color) - Required - The starting color.
- **@end** (color) - Required - The ending color.

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

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

### Column sizing with grid columns

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

Shows how to wrap inputs in grid columns (e.g., .col-xs-2, .col-xs-3, .col-xs-4) to enforce desired widths.

```html
<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>
```

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

### Contextual progress bar alternatives (success, info, warning, danger)

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

Use these four progress bar examples to apply contextual color classes (progress-bar-success, progress-bar-info, progress-bar-warning, progress-bar-danger) to convey different states. Each bar uses the same structure with role, aria-valuenow, aria-valuemin, aria-valuemax, and inline width style.

```html
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>
```

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

### Listen for hidden.bs.modal event

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

Example of binding to the hidden.bs.modal event, which fires when the modal has finished being hidden.

```javascript
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})
```

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

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

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

Creates a horizontal gradient with three colors.

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

### Description
Creates a horizontal gradient with three colors.

### Parameters
- **@start** (color) - Required - The first color.
- **@mid** (color) - Required - The second color.
- **@color-stop** (percentage) - Required - The position of the second color stop (e.g., 25%).
- **@end** (color) - Required - The third color.

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

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

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

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

Creates a vertical gradient with three colors.

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

### Description
Creates a vertical gradient with three colors.

### Parameters
- **@start** (color) - Required - The first color.
- **@mid** (color) - Required - The second color.
- **@color-stop** (percentage) - Required - The position of the second color stop (e.g., 25%).
- **@end** (color) - Required - The third color.

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

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

### Basic input group examples

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

Shows four input group configurations: add-on on left, add-on on right, add-ons on both sides, and a URL prefix. 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>
```

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

### Using and reassigning brand color variables

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

Shows how to use the brand color variables as-is or reassign them to more meaningful variables for your project.

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

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

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

### Height sizing with .input-lg and .input-sm

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

Shows how to create taller or shorter form controls using .input-lg and .input-sm classes on inputs and selects. Includes a default-sized control for comparison.

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

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>
```

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

### Popover Four Directions

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

Examples of popovers positioned left, top, bottom, and right using data-placement.

```APIDOC
## Popover Four Directions

### Description
Examples of popovers positioned left, top, bottom, and right using `data-placement`.

### HTML Examples
```html
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>
```
```

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

### Basic list group example

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

The most basic list group is an unordered list with the `list-group` and `list-group-item` classes.

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

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

### Precompiled Bootstrap directory structure

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

Shows the file layout of the precompiled Bootstrap download, including CSS, JS, and fonts. Use this to understand what files are provided for quick drop-in usage.

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

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

### Popover Initialization

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

Popovers require the tooltip plugin and are opt-in. Initialize all popovers on a page by selecting them by their data-toggle attribute.

```APIDOC
## Popover Initialization

### Description
Popovers require the tooltip plugin to be included. For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

### Usage
```javascript
$(function () {
  $('[data-toggle="popover"]').popover()
})
```
```

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

### Show a tab with .tab('show') method

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

Selects the given tab and shows its associated content. Returns before the tab pane is actually shown (before shown.bs.tab event).

```javascript
$('#someTab').tab('show')
```

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

### .modal('show')

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

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

```APIDOC
## .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).

### Example
```javascript
$('#myModal').modal('show')
```
```

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

### Prevent action with infinitive event preventDefault

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

All infinitive events provide `preventDefault` to stop execution of an action before it starts.

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

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

### Stacked-to-horizontal grid with .col-md-* classes

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

Use a single set of .col-md-* grid classes to create a grid that stacks on mobile/tablet and becomes horizontal on desktop. Place columns in a .row.

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

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

### Jumbotron full width example

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

Full-width jumbotron without rounded corners. Place outside all .containers and add a .container inside.

```html
<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>
```

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

### Affix Methods

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

Methods to activate affix content and recalculate its state.

```APIDOC
## Affix Methods

### Description
Methods to activate affix content and recalculate its state.

### Methods

#### `.affix(options)`
Activates your content as affixed content. Accepts an optional options `object`.

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

#### `.affix('checkPosition')`
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.

Example:
```javascript
$('#myAffix').affix('checkPosition')
```

```

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

### Listen for hidden.bs.tooltip event

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

Fires when the tooltip has finished being hidden from the user (waits for CSS transitions). This example attaches a handler to the hidden.bs.tooltip event.

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

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

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

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

Demonstrates how to use the button plugin's loading and reset methods to show a loading state and then reset the button.

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

### Description
Shows a loading state on a button and then resets it to its original state. The loading method is triggered by the 'loading' string, and reset by 'reset'.

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

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

### Notes
- The `loading` method disables the button and swaps its text to 'loading'.
- The `reset` method resets the button state and swaps text back to original text. This method is asynchronous and returns before the resetting has actually completed.
```

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

### .modal(options)

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

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

```APIDOC
## .modal(options)

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

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

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

### Navbar button with .navbar-btn class

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

Use .navbar-btn on <button> elements not in a <form> to vertically center them in the navbar. This example shows a 'Sign in' button.

```html
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
```

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

### Button loading state with JavaScript

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

Shows how to use the button('loading') and button('reset') methods to show a loading state on a button. The button('reset') method is asynchronous and returns before resetting completes.

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

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

### Carousel with options via JavaScript

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

Initializes the carousel with an options object, e.g., setting interval to 2000 milliseconds. Starts cycling through items.

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

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

### Horizontal description list with .dl-horizontal

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

Make terms and descriptions in a <dl> line up side-by-side. Starts stacked, but becomes horizontal when the navbar expands.

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

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

### Panel with list group

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

Easily include full-width list groups within any panel. This example shows a panel with a heading, body, and a list group.

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

  <!-- List group -->
  <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>
</div>
```

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

### Basic Bootstrap HTML template

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

Minimal HTML document that loads Bootstrap CSS and JavaScript, includes HTML5 shim and Respond.js for IE8 support, and includes jQuery. Note the warning that Respond.js doesn't work when viewing the page 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 href="css/bootstrap.min.css" rel="stylesheet">

    <!-- 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://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
```

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

### Center block mixin usage

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

Use the .center-block() mixin to horizontally center a block-level element. The example sets a container width and applies the mixin.

```less
// Usage
.container {
  width: 940px;
  .center-block();
}
```

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

### Show and hide Less classes and mixins

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

Less definitions for .show, .hidden, and .invisible classes, plus usage as mixins. .invisible toggles only visibility, not display.

```less
// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}
```

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

### Vertically stacked pills with .nav-stacked

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

Pills can be vertically stacked by adding the `.nav-stacked` class to the `.nav-pills` element. The example shows the structure with an ellipsis placeholder.

```html
<ul class="nav nav-pills nav-stacked">
  ...
</ul>
```
Tokens:
Raw