Bootstrap JavaScript

Using Bootstrap's JS Components

Bootstrap's JavaScript components add interactivity to your website. In Bootstrap 5, jQuery is no longer required as all components are written in vanilla JavaScript.

Including Bootstrap JavaScript

There are several ways to include Bootstrap's JavaScript:

1. Bundle (Recommended)


<!-- Include both Bootstrap CSS and JS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

The bundle includes Popper.js, which is required for tooltips, popovers, and dropdowns.

2. Separate Files


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>

3. Individual Components (via npm)


// Import just what you need
import Alert from 'bootstrap/js/dist/alert';
import Button from 'bootstrap/js/dist/button';
import Carousel from 'bootstrap/js/dist/carousel';
import Collapse from 'bootstrap/js/dist/collapse';
import Dropdown from 'bootstrap/js/dist/dropdown';
import Modal from 'bootstrap/js/dist/modal';
import Offcanvas from 'bootstrap/js/dist/offcanvas';
import Popover from 'bootstrap/js/dist/popover';
import ScrollSpy from 'bootstrap/js/dist/scrollspy';
import Tab from 'bootstrap/js/dist/tab';
import Toast from 'bootstrap/js/dist/toast';
import Tooltip from 'bootstrap/js/dist/tooltip';

Data Attributes

Most Bootstrap JavaScript components can be enabled and configured through data attributes, without writing any JavaScript code.

Examples of Data Attributes

Modal


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Tooltip


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

Note: Tooltips must be initialized with JavaScript:


// Initialize all tooltips on a page
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Collapse


<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component.
  </div>
</div>

JavaScript API

All Bootstrap components offer a JavaScript API for programmatic control.

Using the JavaScript API

Modal Example


// Initialize a modal
const myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  backdrop: 'static',
  keyboard: false
})

// Show the modal
myModal.show()

// Hide the modal
myModal.hide()

// Toggle the modal
myModal.toggle()

// Update the modal's position
myModal.handleUpdate()

// Dispose of the modal (remove data and event handlers)
myModal.dispose()

Tooltip Example


// Initialize a tooltip
const myTooltip = new bootstrap.Tooltip(document.getElementById('myTooltip'), {
  boundary: 'window',
  delay: { show: 500, hide: 100 },
  html: true,
  placement: 'top',
  template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
  title: 'Custom tooltip content'
})

// Show the tooltip
myTooltip.show()

// Hide the tooltip
myTooltip.hide()

// Toggle the tooltip
myTooltip.toggle()

// Update the tooltip's position
myTooltip.update()

// Dispose of the tooltip
myTooltip.dispose()

Accessing Elements with Data Attributes


// Get all modals on the page
const modals = document.querySelectorAll('[data-bs-toggle="modal"]')

// Initialize a specific modal
const myModalEl = document.getElementById('myModal')
const modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

Events

Bootstrap's JavaScript components emit events that you can hook into for additional functionality.

Working with Events

Modal Events


const myModalEl = document.getElementById('myModal')

// Event fired when the modal is about to be shown
myModalEl.addEventListener('show.bs.modal', event => {
  // do something before the modal is shown
})

// Event fired when the modal is fully shown
myModalEl.addEventListener('shown.bs.modal', event => {
  // do something after the modal is shown
})

// Event fired when the modal is about to be hidden
myModalEl.addEventListener('hide.bs.modal', event => {
  // do something before the modal is hidden
})

// Event fired when the modal is fully hidden
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something after the modal is hidden
})

Tab Events


const triggerTabEl = document.querySelector('#myTab a[href="#profile"]')
const tabEl = document.querySelector('#myTab a[href="#profile"]')

// Event fired when a new tab is about to be shown
tabEl.addEventListener('show.bs.tab', event => {
  // do something before tab is shown
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})

// Event fired when a new tab is fully shown
tabEl.addEventListener('shown.bs.tab', event => {
  // do something after tab is shown
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})

Note: Each Bootstrap component has its own set of events. Check the official documentation for a complete list of events for each component.

Common JavaScript Components

Dropdowns


<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Carousel


<div id="carouselExample" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Tabs


<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
</div>

Toasts


<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

<script>
  const toastTrigger = document.getElementById('liveToastBtn')
  const toastLiveExample = document.getElementById('liveToast')
  
  if (toastTrigger) {
    toastTrigger.addEventListener('click', () => {
      const toast = new bootstrap.Toast(toastLiveExample)
      toast.show()
    })
  }
</script>