Bootstrap JS Components

Introduction

Bootstrap includes a wide range of JavaScript-based components that enhance user interactivity, from modals to carousels.

1. Modals

Modals are dialog boxes that appear over the page content.

<!-- 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">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></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>

2. Dropdowns

Toggleable menus for displaying lists of links.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    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>
  </ul>
</div>

3. Tooltips

Tooltips appear on hover. Note: You must initialize them with JavaScript.

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

// JavaScript Initialization
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

4. Carousels

A slideshow component for cycling through elements.

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <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>
</div>

5. Collapse & Alerts

Collapse: Toggle visibility of content.

<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseExample">
  Toggle
</button>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content...
  </div>
</div>

Alerts: Contextual feedback messages.

<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>