Working with Libraries in Bootstrap

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:

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