🎨 Day 42 — JavaScript with Bootstrap UI Components

Hi Guys Welcome to Day 42 🎨 By now you can manipulate DOM elements and validate forms. Today you’ll learn how to combine your JavaScript skills with Bootstrap’s powerful UI components to create beautiful, responsive interfaces with interactive modals, toasts, and alerts.

🧩 1️⃣ Including Bootstrap in Your Project

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

This loads Bootstrap’s CSS and JS components (like modals and carousels).

🪄 2️⃣ Using Alerts with JavaScript

<div class="container mt-3">
  <div id="alertBox" class="alert alert-success d-none">
    Form submitted successfully!
  </div>
  <button id="showAlert" class="btn btn-primary">Show Alert</button>
</div>

<script>
document.getElementById("showAlert").addEventListener("click", ()=>{
  const alertBox = document.getElementById("alertBox");
  alertBox.classList.remove("d-none");
  setTimeout(()=>alertBox.classList.add("d-none"),3000);
});
</script>

💬 3️⃣ Bootstrap Modals (Interactive Popups)

Modals are great for confirmations or forms without navigating away from the page.

<button class="btn btn-info" data-bs-toggle="modal" data-bs-target="#infoModal">Open Modal</button>

<div class="modal fade" id="infoModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Hello Rahul!</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        This is a Bootstrap Modal controlled by JavaScript.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

🔥 4️⃣ Toasts (Notification Messages)

<button class="btn btn-success" id="toastBtn">Show Toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert">
    <div class="toast-header">
      <strong class="me-auto">Bootstrap Toast</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">This is a toast notification!</div>
  </div>
</div>

<script>
document.getElementById("toastBtn").addEventListener("click", ()=>{
  const toastEl = document.getElementById("liveToast");
  const toast = new bootstrap.Toast(toastEl);
  toast.show();
});
</script>

🎠 5️⃣ Bootstrap Carousel Controlled by JavaScript

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/800/300?1" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/800/300?2" class="d-block w-100">
    </div>
  </div>
</div>

<script>
const myCarousel = document.getElementById("myCarousel");
const carousel = new bootstrap.Carousel(myCarousel, { interval: 2000 });
</script>

🎯 Summary

By integrating Bootstrap with JavaScript, you can build dynamic and responsive interfaces without writing tons of CSS. Tomorrow, you’ll build a real interactive Quiz Application using everything you’ve learned so far — from DOM manipulation to timers and storage!

← Prev Next →