Bootstrap is more than just CSS—it comes with built-in JavaScript libraries (also called components) that provide interactive functionality like modals, carousels, dropdowns, and tooltips. Working with these libraries allows you to add dynamic behavior to your website without writing complex JavaScript from scratch.

Bootstrap Libraries Overview

Bootstrap 5 (latest stable version) uses vanilla JavaScript—no jQuery required.

Some key JavaScript components include:

Step 1: Include Bootstrap JS Library

Bootstrap JS is required for interactive components. You can include it via CDN:

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JS Bundle (includes Popper) -->
<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 needed for dropdowns, tooltips, and popovers.

Step 2: Using Bootstrap Components

1️⃣ Modal (Pop-up)

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open Modal
</button>

<!-- Modal structure -->
<div class="modal fade" id="myModal" tabindex="-1" aria-hidden="true">
  <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">
        This is a Bootstrap modal!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

data-bs-toggle="modal" → triggers the modal
data-bs-target="#myModal" → links to the modal ID

2️⃣ Carousel (Image Slider)

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/600x300.png?text=Slide+1" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/600x300.png?text=Slide+2" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/600x300.png?text=Slide+3" class="d-block w-100">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

data-bs-ride="carousel" → auto-rotates slides
Navigation arrows use data-bs-slide="prev" and next

3️⃣ Tooltip

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

<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
tooltipTriggerList.forEach(function (tooltipTriggerEl) {
  new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>

Tooltips require initialization via JavaScript
title attribute holds tooltip text

4️⃣ Dropdown Menu

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action 1</a></li>
    <li><a class="dropdown-item" href="#">Action 2</a></li>
    <li><a class="dropdown-item" href="#">Action 3</a></li>
  </ul>
</div>

data-bs-toggle="dropdown" activates the menu
Automatically handles hiding/showing

Step 3: Customizing Bootstrap Components

You can add your own classes or CSS to override Bootstrap styles:

<style>
.carousel-item img {
    border-radius: 10px;
    border: 2px solid #333;
}
</style>

✅ Key Points:

Bootstrap JS libraries add interactive components
Include bootstrap.bundle.min.js (includes Popper)
Many components can be activated via data attributes or JavaScript
Tooltips and popovers require initialization
Combine CSS and JS for fully functional, responsive components

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Libraries Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="text-center mt-5">

    <!-- Tooltip Button -->
    <button class="btn btn-secondary" data-bs-toggle="tooltip" title="This is a tooltip!">Hover me</button>

    <!-- Modal Trigger -->
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open 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">Bootstrap Modal</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            This is a modal window.
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Carousel -->
    <div id="carouselExample" class="carousel slide mt-4" data-bs-ride="carousel" style="max-width:600px; margin:auto;">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://via.placeholder.com/600x300.png?text=Slide+1" class="d-block w-100">
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/600x300.png?text=Slide+2" class="d-block w-100">
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/600x300.png?text=Slide+3" class="d-block w-100">
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    tooltipTriggerList.forEach(function (el) {
      new bootstrap.Tooltip(el)
    })
    </script>

</body>
</html>

Working with Libraries in Bootstrap

Test Your Understanding

All Courses

Bootstrap