JavaScript
Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.
Analytics vendor/data-gtm.js
Already using Google Analytics?
If your project already has Google Analytics tracking, please remove that snippet first.
We use Google Tag Manager (GTM) to collect visitor stats instead of default Google Analytics (GA).
It works by default
If you include the bootstrap-head.js in the <head> of your project you don't have to do anything to make GTM work.
data-gtm attributes
Tracking click events is easy. All you have to do is add data-gtm attributes to your clickable elements. The syntax for data-gtm attributes is lowercase and / (forward slash).
<a href="#" data-gtm="editor/menu/link">click me</button>Be very distinct in your segmentation of the attribute. Make sure there's no room for misinterpretation or ambiguity of the resulting stats.
There's no limit on the amount of segments in your attribute. It can be 2 but it also can be 10. We just ask you to be clear and don't exaggerate.
Postion of the data-gtm attribute
The data-gtm attribute must be placed on the innermost node, if there is any, of the clickable element. Otherwise place it on the element itself.
<!-- WRONG -->
<label class="results-view-label" for="resultsviewlarge" aria-label="Grote tegels" data-gtm="imagepicker/results/large">
<span class="icon icon-grid-large" aria-hidden="true"></span>
</label>
<!-- CORRECT -->
<label class="results-view-label" for="resultsviewlarge" aria-label="Grote tegels" >
<span class="icon icon-grid-large" aria-hidden="true" data-gtm="imagepicker/results/large"></span>
</label>Why?
In GTM you have two types of click listeners: gtm.click and gtm.linkClick. The former will track all clicks while the latter will track click on links. GTM uses event delegation, see here, and will, as defined in your GTM settings, look for attributes in nodes higher in the DOM tree.
Suppose you want to track certain actions on a <a href="#"> and other actions on an inner element (child node) of that <a> you would need to call two event listeners and that would result in a double count.
Examples
<a href="#" class="dropdown-menu-link" data-gtm="header/dropdown/logout">Logout</a>
<a href="/" class="app-link">
<span class="app-icon" aria-hidden="true" data-gtm="header/app-logo/home">Ae</span>
<span class="app-title">Article Editor</span>
</a>Drag 'n' Drop
See HTML5 API for Drag 'n' Drop.
Here are some nice code examples.
States and Drag Events
Dragstart
Fired when the user starts dragging an element or text selection. Add .js-dragstart to the element that's being dragged.
Dragover in Teaser lists
When the dragover event is triggered, add the class .js-dragover to the drop target (not the dropzone).
<li class="list-item is-draggable" draggable="true">
<div class="drag-here fjs-drag-here js-dragover"></div>
<div class="artifact">...</div>
</li>Dummies
Extra placeholder so you can drop something at the last position. e.g. in teaser lists you don't swap but shift each item. Make it interactive with adding .js-dragover on dragover.
-
Sleep hier voor een item als laatste te plaatsen
<ol class="block-list has-dragndrop">
<li class="list-item dnd-dummy js-dragover" draggable="false">
<div class="dnd-dummy-body">Sleep hier voor een item als laatste te plaatsen</div>
</li>
</ol>Dropzone
Container where you drop your files or elements.
Default, simple version
Sleep hier artikelen die je wil versturen
<div class="dnd-dropzone fjs-dnd-dropzone">
<div class="dnd-dropzone-desc">Sleep hier artikelen die je wil versturen</div>
</div>Large version, with icon and "select files" prompt.
You have to write your own JS (in your project) to trigger the prompt when clicking on the CTA.
Sleep hier de foto’s die je wil uploaden of kies foto’s op je computer
<input type="file" class="fjs-dnd-file-select dnd-file-select-hidden" multiple="multiple" accept="image/*" />
<div class="dnd-dropzone dnd-dropzone-large fjs-dnd-dropzone">
<div class="dnd-dropzone-desc">
Sleep hier de foto’s die je wil uploaden of <a href="#" class="fjs-dnd-file-select-trigger">kies foto’s</a> op je computer
</div>
</div>Active state
When the dropzone is targeted, through a dragover event, add class .js-dragover to give it an active state.
Sleep hier de foto’s die je wil uploaden of kies foto’s op je computer
<input type="file" class="fjs-dnd-file-select dnd-file-select-hidden" multiple="multiple" accept="image/*" />
<div class="dnd-dropzone dnd-dropzone-large fjs-dnd-dropzone js-dragover">
<div class="dnd-dropzone-desc">
Sleep hier de foto’s die je wil uploaden of <a href="#" class="fjs-dnd-file-select-trigger">kies foto’s</a> op je computer
</div>
</div>Sandbox
Test the drag and drop behaviour here.
Focuspoint focuspoint.js
Place focuspoints on image to get better crops
BEWARE
This JS component is not yet available in Bootstrap. Please write your own inplementation for now.
Required elements are:
- An image, via an
<img>or an<object>tag. If you use an<object>you can set a fallback image in case the image doesn't get loaded because of a 404 (or other error) in DioContent - The crosshair:
<span class="focuspoint fjs-cropper"></span> - the focuspoint helper:
<div class="focuspoint-helper fjs-cropper-helper"></div>. This creates a clickable area at the same size of our img so we can get the coordinates.
<div class="some-component">
<figure class="some-component-figure fjs-image-focus-cropper js-has-focus-crop">
<div class="some-component-figure-inner">
<object data="url/to/img/" type="image/jpg" class="some-component-img fjs-cropper-img">
<img src="url/to/fallback-dummy-img.png" alt="" />
</object>
<span class="focuspoint fjs-cropper" aria-hidden="true"></span>
<div class="focuspoint-helper fjs-cropper-helper"></div>
</div>
</figure>
</div>Workflow
In this case you click on a hidden checkbox that toggles .js-has-focus-crop on one of the parents of the img. Save the coordinates in the value of hidden inputs and also set them as top and left through inline styling on .fjs-cropper
You have to write your own CSS for [some-component] to style and align the image and its children. The styling of the crosshair is done through the _focuspoint.scss module.
Modals modal.js
Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
Multiple open modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
Modal markup placement
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
Mobile device caveats
There are some caveats regarding using modals on mobile devices. See our browser support docs for details.
Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})Examples
Static example
A rendered modal with header, body, and set of actions in the footer.
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Sluiten"><span class="icon icon-close" aria-hidden="true"></span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->Live demo
Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Sluiten"><span class="icon icon-close" aria-hidden="true"></span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->Make modals accessible
Be sure to add role="dialog" and aria-labelledby="...", referencing the modal title, to .modal, and role="document" to the .modal-dialog itself.
Additionally, you may give a description of your modal dialog with aria-describedby on .modal.
Embedding YouTube videos
Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. See this helpful Stack Overflow post for more information.
Optional sizes
Modals have three optional sizes, .modal-fs, .modal-lg and .modal-sm. They have to be placed on .modal-dialog.
Fullscreen modals
They cover the entire width (not the entire height) of the screen with the exception of a small transparent gutter around the entire modal.
Note the .modal-fs modifier on .modal-dialog
<!-- Fullscreen modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalfullscreen">Fullscreen modal</button>
<div id="modalfullscreen" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myFsModalLabel">
<div class="modal-dialog modal-fs">
<div class="modal-content">
...
</div>
</div>
</div>Large modal
A bit wider than the default modal
Note the .modal-lg modifier on .modal-dialog
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#largemodal">Large modal</button>
<div id="largemodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>Small modal
A bit smaller than the default modal
Note the .modal-sm modifier on .modal-dialog
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#smallmodal">Small modal</button>
<div id="smallmodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>Optional types
With an iframe and/or fixed header
If you want to embed an iframe (e.g. to another application of DNR) the header will always be fixed so you can access the close button and the title is visible.
Note the .modal-has-iframe modifier on .modal
Deprecation warning
In the past we had .modal-has-iframe and .modal-has-fixed-header, but they are actually the same. They can be used individually but the result will be the same.
Required DOM elements
If you want a fixed header and your main content ISN'T an iframe you need to add .modal-body-inner to .modal-body. It's needed to trigger a scrollbar. Otherwise the entire modal is scrollable and won't have a fixed header.
<!-- With iframe in .modal-body -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modaliframe">With iframe in .modal-body</button>
<div id="modaliframe" class="modal modal-has-iframe fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">...</div>
<div class="modal-body">
<iframe src="" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalnotiframe">With regular content in .modal-body</button>
<div id="modalnotiframe" class="modal modal-has-fixed-header fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">...</div>
<div class="modal-body">
<!-- required inner div -->
<div class="modal-body-inner">...</div>
</div>
</div>
</div>
</div>The width and the height of the modal is always 100% of the viewport (with the exception of the transparent gutter around the modal).
Remove animation
For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
...
</div>Using the grid system
To take advantage of the Bootstrap grid system within a modal, just nest .rows within the .modal-body and then use the normal grid system classes.
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="icon icon-close" aria-hidden="true"></span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
</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</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->Usage
The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the <body> to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.
Via data attributes
Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>Via JavaScript
Call a modal with id myModal with a single line of JavaScript:
$('#myModal').modal(options)Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".
| Name | type | default | description |
|---|---|---|---|
| backdrop | boolean or the string 'static' |
true | Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. |
| keyboard | boolean | true | Closes the modal when escape key is pressed |
| show | boolean | true | Shows the modal when initialized. |
| remote | path | false |
This option is deprecated since v3.3.0 and has been removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself. If a remote URL is provided, content will be loaded one time via jQuery's |
Methods
.modal(options)
Activates your content as a modal. Accepts an optional options object.
$('#myModal').modal({
keyboard: false
}).modal('toggle')
Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).
$('#myModal').modal('toggle').modal('show')
Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).
$('#myModal').modal('show').modal('hide')
Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).
$('#myModal').modal('hide').modal('handleUpdate')
Readjusts the modal's positioning to counter a scrollbar in case one should appear, which would make the modal jump to the left.
Only needed when the height of the modal changes while it is open.
$('#myModal').modal('handleUpdate')Events
Bootstrap's modal class exposes a few events for hooking into modal functionality.
All modal events are fired at the modal itself (i.e. at the <div class="modal">).
| Event Type | Description |
|---|---|
| show.bs.modal | This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. |
| shown.bs.modal | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event. |
| hide.bs.modal | This event is fired immediately when the hide instance method has been called. |
| hidden.bs.modal | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
| loaded.bs.modal | This event is fired when the modal has loaded content using the remote option. |
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})Tooltips tooltip.js
Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.
Tooltips with zero-length titles are never displayed.
Examples
Hover over the links below to see tooltips:
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
Static tooltip
Four options are available: top, right, bottom, and left aligned.
Tooltip on the left
Tooltip on the top
Tooltip on the bottom
Tooltip on the right
Four directions
<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>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>Styles
There's the default, blue version and there's a red version. Just add .tooltip-danger to the outer most wrapper element. You will have to do this via the tooltips template JavaScript options
Error tooltip on the top
<div class="tooltip tooltip-danger top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Error tooltip on the top
</div>
</div>You can trigger this red tooltip by adding .fjs-danger-tooltip to the element that triggers the tooltip. You must remove the data-toggle="tooltip" from the trigger element.
<button type="button" class="btn btn-default fjs-danger-tooltip" data-placement="auto top" title="error tooltip">Error tooltip trigger</button>Opt-in functionality
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})Usage
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
Trigger the tooltip via JavaScript:
$('#example').tooltip(options)Markup
The required markup for a tooltip is only a data attribute and title on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top by the plugin).
<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>Multiple-line links
Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add white-space: nowrap; to your anchors to avoid this.
Tooltips in button groups, input groups, and tables require special setting
When using tooltips on elements within a .btn-group or an .input-group, or on table-related elements (<td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), you'll have to specify the option container: 'body' (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).
Accessible tooltips for keyboard and assistive technology users
For users navigating with a keyboard, and in particular users of assistive technologies, you should only add tooltips to keyboard-focusable elements such as links, form controls, or any arbitrary element with a tabindex="0" attribute.
Tooltips on disabled elements require wrapper elements
To add a tooltip to a disabled or .disabled element, put the element inside of a <div> and apply the tooltip to that <div> instead.
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".
| Name | Type | Default | Description |
|---|---|---|---|
| animation | boolean | true | Apply a CSS fade transition to the tooltip |
| container | string | false | false |
Appends the tooltip to a specific element. Example: |
| delay | number | object | 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 is: |
| html | boolean | 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 | 'top' |
How to position the tooltip - top | bottom | left | right | auto. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The |
| selector | string | false | If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See this and an informative example. |
| template | string | '<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
The outermost wrapper element should have the |
| title | string | function | '' |
Default title value if If a function is given, it will be called with its |
| trigger | string | 'hover focus' | How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger. |
| viewport | string | object | function | { selector: 'body', padding: 0 } |
Keeps the tooltip within the bounds of this element. Example: If a function is given, it is called with the triggering element DOM node as its only argument. The |
Data attributes for individual tooltips
Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.
Methods
$().tooltip(options)
Attaches a tooltip handler to an element collection.
.tooltip('show')
Reveals an element's tooltip. Returns to the caller before the tooltip has actually been shown (i.e. before the shown.bs.tooltip event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.
$('#element').tooltip('show').tooltip('hide')
Hides an element's tooltip. Returns to the caller before the tooltip has actually been hidden (i.e. before the hidden.bs.tooltip event occurs). This is considered a "manual" triggering of the tooltip.
$('#element').tooltip('hide').tooltip('toggle')
Toggles an element's tooltip. Returns to the caller before the tooltip has actually been shown or hidden (i.e. before the shown.bs.tooltip or hidden.bs.tooltip event occurs). This is considered a "manual" triggering of the tooltip.
$('#element').tooltip('toggle').tooltip('destroy')
Hides and destroys an element's tooltip. Tooltips that use delegation (which are created using the selector option) cannot be individually destroyed on descendant trigger elements.
$('#element').tooltip('destroy')Events
| Event Type | Description |
|---|---|
| show.bs.tooltip | This event fires immediately when the show instance method is called. |
| shown.bs.tooltip | This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). |
| hide.bs.tooltip | This event is fired immediately when the hide instance method has been called. |
| hidden.bs.tooltip | This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete). |
| inserted.bs.tooltip | This event is fired after the show.bs.tooltip event when the tooltip template has been added to the DOM. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something…
})