Bootstrap 5 Modals Tutorial

Dialog boxes and popup windows for forms, confirmations, media, and workflows.

What are Bootstrap Modals?

Modals are dialog boxes/popup windows that display content on top of the current page. They're built with HTML, CSS, and JavaScript and are used for:

Login/registration forms
Confirmation dialogs
Image galleries
Video embeds
Important notifications
Multi-step wizards

1. Basic Modal Structure

The simplest modal implementation.

<!-- 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">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This is the modal body content.
      </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>

Modal Components Explained:

.modal - Main container (hidden by default)
.fade - Adds animation when showing/hiding
.modal-dialog - Positions and sizes the modal
.modal-content - Contains all modal elements
.modal-header - Top section with title and close button
.modal-body - Main content area
.modal-footer - Bottom section for action buttons
data-bs-toggle="modal" - Triggers modal JavaScript
data-bs-target - References modal ID

2. Modal Sizes

Bootstrap provides different width options for modals.

Small Modal

<div class="modal-dialog modal-sm">
  <!-- modal content -->
</div>

Default Modal

<div class="modal-dialog">
  <!-- modal content -->
</div>

Large Modal

<div class="modal-dialog modal-lg">
  <!-- modal content -->
</div>

Extra Large Modal

<div class="modal-dialog modal-xl">
  <!-- modal content -->
</div>

Full Width Modal

<div class="modal-dialog modal-fullscreen">
  <!-- modal content -->
</div>

Full Screen Below Breakpoints

<div class="modal-dialog modal-fullscreen-sm-down">
  <!-- Full screen on small screens, normal on larger -->
</div>

<div class="modal-dialog modal-fullscreen-md-down">
  <!-- Full screen on medium screens and below -->
</div>

<div class="modal-dialog modal-fullscreen-lg-down">
  <!-- Full screen on large screens and below -->
</div>

<div class="modal-dialog modal-fullscreen-xl-down">
  <!-- Full screen on extra large screens and below -->
</div>

Example with different sizes:

<div class="d-flex gap-2 flex-wrap">
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#smallModal">
    Small Modal
  </button>
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#largeModal">
    Large Modal
  </button>
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#xlModal">
    Extra Large Modal
  </button>
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fullscreenModal">
    Fullscreen Modal
  </button>
</div>

<!-- Small Modal -->
<div class="modal fade" id="smallModal" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Small Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        This is a small modal dialog.
      </div>
    </div>
  </div>
</div>

3. Modal with Different Centering Options

Vertically Centered Modal

<div class="modal-dialog modal-dialog-centered">
  <div class="modal-content">
    <!-- modal content -->
  </div>
</div>

Scrollable Modal (For long content)

<div class="modal-dialog modal-dialog-scrollable">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Scrollable Modal</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
    </div>
    <div class="modal-body">
      <p>Long content goes here...</p>
      <!-- Add lots of content to see scrolling -->
      <p>Content line 1</p>
      <p>Content line 2</p>
      <!-- ... more content ... -->
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    </div>
  </div>
</div>

Centered + Scrollable Combined

<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  <!-- modal content -->
</div>

4. Modal with Forms

Login Form Modal

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

<!-- Login Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="loginModalLabel">
          <i class="bi bi-box-arrow-in-right"></i> Login to Your Account
        </h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="loginForm">
          <div class="mb-3">
            <label for="email" class="form-label">Email address</label>
            <input type="email" class="form-control" id="email" placeholder="name@example.com" required>
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input type="password" class="form-control" id="password" placeholder="Password" required>
          </div>
          <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="rememberMe">
            <label class="form-check-label" for="rememberMe">Remember me</label>
          </div>
          <div class="d-grid">
            <button type="submit" class="btn btn-primary">
              <i class="bi bi-box-arrow-in-right"></i> Login
            </button>
          </div>
          <div class="text-center mt-3">
            <a href="#">Forgot password?</a> | <a href="#" data-bs-toggle="modal" data-bs-target="#signupModal">Create account</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
  document.getElementById('loginForm')?.addEventListener('submit', function(e) {
    e.preventDefault();
    // Handle login logic here
    alert('Login submitted!');
    // Close modal
    bootstrap.Modal.getInstance(document.getElementById('loginModal')).hide();
  });
</script>

Registration Form Modal

<div class="modal fade" id="signupModal" tabindex="-1" aria-labelledby="signupModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-success text-white">
        <h1 class="modal-title fs-5" id="signupModalLabel">
          <i class="bi bi-person-plus-fill"></i> Create New Account
        </h1>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form id="signupForm">
          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="firstName" class="form-label">First Name</label>
              <input type="text" class="form-control" id="firstName" required>
            </div>
            <div class="col-md-6 mb-3">
              <label for="lastName" class="form-label">Last Name</label>
              <input type="text" class="form-control" id="lastName" required>
            </div>
          </div>
          <div class="mb-3">
            <label for="signupEmail" class="form-label">Email address</label>
            <input type="email" class="form-control" id="signupEmail" required>
          </div>
          <div class="mb-3">
            <label for="signupPassword" class="form-label">Password</label>
            <input type="password" class="form-control" id="signupPassword" required>
          </div>
          <div class="mb-3">
            <label for="confirmPassword" class="form-label">Confirm Password</label>
            <input type="password" class="form-control" id="confirmPassword" required>
          </div>
          <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="terms" required>
            <label class="form-check-label" for="terms">
              I agree to the <a href="#">Terms and Conditions</a>
            </label>
          </div>
          <button type="submit" class="btn btn-success w-100">Sign Up</button>
        </form>
      </div>
    </div>
  </div>
</div>

5. Confirmation Dialog Modal

<!-- Delete Button -->
<button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">
  Delete Item
</button>

<!-- Confirmation Modal -->
<div class="modal fade" id="confirmDeleteModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-danger text-white">
        <h5 class="modal-title">
          <i class="bi bi-exclamation-triangle-fill"></i> Confirm Deletion
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to delete this item?</p>
        <p class="text-muted small">This action cannot be undone.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Delete</button>
      </div>
    </div>
  </div>
</div>

<script>
  document.getElementById('confirmDeleteBtn')?.addEventListener('click', function() {
    // Perform delete operation
    alert('Item deleted!');
    // Close modal
    bootstrap.Modal.getInstance(document.getElementById('confirmDeleteModal')).hide();
  });
</script>

6. Modal with Images and Videos

Image Gallery Modal

<!-- Thumbnails -->
<div class="row g-3">
  <div class="col-md-3">
    <img src="https://via.placeholder.com/300x200" class="img-fluid img-thumbnail" 
         data-bs-toggle="modal" data-bs-target="#imageModal" 
         data-img-src="https://via.placeholder.com/800x600" style="cursor: pointer;">
  </div>
  <div class="col-md-3">
    <img src="https://via.placeholder.com/300x200/ff0000" class="img-fluid img-thumbnail" 
         data-bs-toggle="modal" data-bs-target="#imageModal" 
         data-img-src="https://via.placeholder.com/800x600/ff0000" style="cursor: pointer;">
  </div>
  <!-- Add more images -->
</div>

<!-- Image Modal -->
<div class="modal fade" id="imageModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content bg-transparent border-0">
      <div class="modal-body p-0">
        <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-3" 
                data-bs-dismiss="modal"></button>
        <img id="modalImage" src="" class="img-fluid rounded" alt="Modal image">
      </div>
    </div>
  </div>
</div>

<script>
  const imageModal = document.getElementById('imageModal');
  if (imageModal) {
    imageModal.addEventListener('show.bs.modal', function(event) {
      const button = event.relatedTarget;
      const imgSrc = button.getAttribute('data-img-src');
      const modalImage = document.getElementById('modalImage');
      modalImage.src = imgSrc;
    });
  }
</script>

YouTube Video Modal

<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#videoModal">
  <i class="bi bi-play-circle"></i> Watch Video
</button>

<div class="modal fade" id="videoModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Video Tutorial</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-0">
        <div class="ratio ratio-16x9">
          <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=abc123" 
                  title="YouTube video" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

Auto-play/Pause Video Modal

<div class="modal fade" id="autoVideoModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Video Player</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-0">
        <div class="ratio ratio-16x9">
          <iframe id="youtubeVideo" src="" allow="autoplay; fullscreen" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  const videoModal = document.getElementById('autoVideoModal');
  if (videoModal) {
    videoModal.addEventListener('show.bs.modal', function() {
      const iframe = document.getElementById('youtubeVideo');
      iframe.src = "https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1";
    });
    
    videoModal.addEventListener('hide.bs.modal', function() {
      const iframe = document.getElementById('youtubeVideo');
      iframe.src = "";
    });
  }
</script>

7. Modal Events and JavaScript Control

Modal Events
Bootstrap provides several events for modals:

<button class="btn btn-primary" id="eventModalBtn">Open Modal with Events</button>

<div class="modal fade" id="eventModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Event Demo</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div id="eventLog" class="alert alert-info">
          Modal events will appear here
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
  const eventModal = document.getElementById('eventModal');
  const eventLog = document.getElementById('eventLog');
  
  function logEvent(eventName) {
    eventLog.innerHTML += `<div>${eventName} triggered</div>`;
  }
  
  eventModal.addEventListener('show.bs.modal', () => logEvent('show.bs.modal (starts show)'));
  eventModal.addEventListener('shown.bs.modal', () => logEvent('shown.bs.modal (animation complete)'));
  eventModal.addEventListener('hide.bs.modal', () => logEvent('hide.bs.modal (starts hide)'));
  eventModal.addEventListener('hidden.bs.modal', () => logEvent('hidden.bs.modal (animation complete)'));
</script>

Available Modal Events:

show.bs.modal - Fires immediately when show method is called
shown.bs.modal - Fires when modal is fully shown
hide.bs.modal - Fires immediately when hide method is called
hidden.bs.modal - Fires when modal is fully hidden

JavaScript Methods for Modals

<div class="d-flex gap-2 flex-wrap mb-4">
  <button class="btn btn-success" id="openModalBtn">Open Modal</button>
  <button class="btn btn-warning" id="toggleModalBtn">Toggle Modal</button>
  <button class="btn btn-danger" id="closeModalBtn">Close Modal</button>
  <button class="btn btn-info" id="modalStateBtn">Check Modal State</button>
</div>

<div class="modal fade" id="jsModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">JavaScript Controlled Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        This modal is controlled entirely with JavaScript.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
  // Initialize modal instance
  const jsModalElement = document.getElementById('jsModal');
  const jsModal = new bootstrap.Modal(jsModalElement);
  
  document.getElementById('openModalBtn').addEventListener('click', () => {
    jsModal.show();
  });
  
  document.getElementById('toggleModalBtn').addEventListener('click', () => {
    jsModal.toggle();
  });
  
  document.getElementById('closeModalBtn').addEventListener('click', () => {
    jsModal.hide();
  });
  
  document.getElementById('modalStateBtn').addEventListener('click', () => {
    const isShown = jsModalElement.classList.contains('show');
    alert(`Modal is ${isShown ? 'open' : 'closed'}`);
  });
</script>

8. Multiple Modals (Nested Modals)

<!-- First Modal -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#firstModal">
  Open First Modal
</button>

<div class="modal fade" id="firstModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">First Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>This is the first modal.</p>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#secondModal">
          Open Second Modal
        </button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Second Modal -->
<div class="modal fade" id="secondModal" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Second Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        This is nested inside the first modal.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

9. Modal with Progress Bar

<button class="btn btn-primary" id="progressModalBtn">Show Progress Modal</button>

<div class="modal fade" id="progressModal" tabindex="-1" data-bs-backdrop="static">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Processing...</h5>
      </div>
      <div class="modal-body">
        <p id="progressMessage">Please wait while we process your request.</p>
        <div class="progress">
          <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" 
               role="progressbar" style="width: 0%">0%</div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  document.getElementById('progressModalBtn')?.addEventListener('click', function() {
    const modal = new bootstrap.Modal(document.getElementById('progressModal'));
    modal.show();
    
    let progress = 0;
    const interval = setInterval(() => {
      progress += 10;
      const progressBar = document.getElementById('progressBar');
      const progressMessage = document.getElementById('progressMessage');
      
      if (progressBar) {
        progressBar.style.width = progress + '%';
        progressBar.textContent = progress + '%';
      }
      
      if (progress >= 100) {
        clearInterval(interval);
        if (progressMessage) progressMessage.textContent = 'Complete!';
        setTimeout(() => {
          modal.hide();
          // Reset progress for next time
          if (progressBar) {
            progressBar.style.width = '0%';
            progressBar.textContent = '0%';
          }
        }, 1000);
      } else if (progress === 50) {
        if (progressMessage) progressMessage.textContent = 'Almost there...';
      }
    }, 500);
  });
</script>

10. Custom Modal Examples

Newsletter Subscription Modal

<!-- Show automatically after page load -->
<div class="modal fade" id="newsletterModal" tabindex="-1" data-bs-backdrop="static">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header border-0 pb-0">
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body text-center">
        <i class="bi bi-envelope-paper-fill" style="font-size: 4rem; color: #0d6efd;"></i>
        <h3 class="mt-3">Subscribe to Newsletter</h3>
        <p class="text-muted">Get the latest updates and offers delivered to your inbox.</p>
        <form id="newsletterForm">
          <div class="input-group mb-3">
            <input type="email" class="form-control" placeholder="Your email address" required>
            <button class="btn btn-primary" type="submit">Subscribe</button>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="dontShowAgain">
            <label class="form-check-label small" for="dontShowAgain">
              Don't show this again
            </label>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
  // Check if user has opted out
  if (!localStorage.getItem('newsletterOptOut')) {
    setTimeout(() => {
      const newsletterModal = new bootstrap.Modal(document.getElementById('newsletterModal'));
      newsletterModal.show();
    }, 2000);
  }
  
  document.getElementById('dontShowAgain')?.addEventListener('change', function(e) {
    if (e.target.checked) {
      localStorage.setItem('newsletterOptOut', 'true');
    }
  });
</script>

Terms and Conditions Modal

<button class="btn btn-link" data-bs-toggle="modal" data-bs-target="#termsModal">
  View Terms & Conditions
</button>

<div class="modal fade" id="termsModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Terms and Conditions</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <h6>1. Acceptance of Terms</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        <h6>2. User Responsibilities</h6>
        <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
        <h6>3. Privacy Policy</h6>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco...</p>
        <!-- Add more terms as needed -->
      </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" data-bs-dismiss="modal" id="acceptTermsBtn">
          I Accept
        </button>
      </div>
    </div>
  </div>
</div>

11. Modal Options and Configuration

// Modal options
const modalOptions = {
  backdrop: 'static',     // Clicking backdrop doesn't close modal ('static' or boolean)
  keyboard: false,        // Disable ESC key closing
  focus: true,           // Focus on modal when opened
  backdrop: true         // Enable backdrop (default)
};

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

// Or set via data attributes
// <div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false">

Available Options:

Option	Type	Default	Description
`backdrop`	boolean or `'static'`	`true`	Includes backdrop element. `'static'` prevents closing on click
`keyboard`	boolean	`true`	Closes modal when ESC key is pressed
`focus`	boolean	`true`	Puts focus on modal when opened

12. Modal Accessibility Best Practices

<!-- ✅ Good: Proper ARIA attributes -->
<div class="modal fade" id="accessibleModal" tabindex="-1" 
     aria-labelledby="accessibleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="accessibleModalLabel">Modal Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" 
                aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- Content -->
      </div>
    </div>
  </div>
</div>

<!-- ✅ Good: Focus management -->
<script>
  const accessibleModal = document.getElementById('accessibleModal');
  accessibleModal.addEventListener('shown.bs.modal', function() {
    // Set focus to first interactive element
    const firstInput = this.querySelector('input, button, textarea, select');
    if (firstInput) firstInput.focus();
  });
</script>

<!-- ❌ Bad: Missing ARIA labels -->
<div class="modal fade">
  <!-- Missing aria-labelledby and aria-hidden -->
</div>

Quick Reference Table

Class/Method	Purpose
`.modal`	Main modal container
`.modal-dialog`	Modal size and positioning
`.modal-content`	Container for modal sections
`.modal-header`	Top section
`.modal-body`	Main content area
`.modal-footer`	Action button area
`.modal-sm`	Small modal
`.modal-lg`	Large modal
`.modal-xl`	Extra large modal
`.modal-fullscreen`	Full screen modal
`.modal-dialog-centered`	Vertically centered
`.modal-dialog-scrollable`	Scrollable body
`data-bs-toggle="modal"`	Triggers modal
`data-bs-dismiss="modal"`	Closes modal
`.modal('show')`	JavaScript show method
`.modal('hide')`	JavaScript hide method
`.modal('toggle')`	JavaScript toggle method

Complete Demo HTML Page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 Modals - Complete Tutorial</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
  <style>
    body {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      padding: 2rem;
    }
    .demo-container {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      margin-bottom: 2rem;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }
    h1 {
      color: white;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
    .demo-title {
      color: #333;
      border-left: 4px solid #0d6efd;
      padding-left: 1rem;
      margin-bottom: 1.5rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="text-center mb-5 display-4">
      <i class="bi bi-window"></i> Bootstrap 5 Modals Tutorial
    </h1>
    
    <!-- Basic Modal Demo -->
    <div class="demo-container">
      <h2 class="demo-title">1. Basic Modal</h2>
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#basicModal">
        Launch Basic Modal
      </button>
      
      <div class="modal fade" id="basicModal" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Basic Modal Example</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
              <p>This is a basic modal example with header, body, and footer.</p>
            </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>
    </div>
    
    <!-- Modal Sizes Demo -->
    <div class="demo-container">
      <h2 class="demo-title">2. Modal Sizes</h2>
      <div class="d-flex gap-2 flex-wrap">
        <button class="btn btn-info" data-bs-toggle="modal" data-bs-target="#smallModalDemo">Small</button>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#defaultModal">Default</button>
        <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#largeModalDemo">Large</button>
        <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#xlModalDemo">Extra Large</button>
        <button class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#fullscreenModalDemo">Fullscreen</button>
      </div>
    </div>
    
    <!-- Form Modal Demo -->
    <div class="demo-container">
      <h2 class="demo-title">3. Login Form Modal</h2>
      <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#loginModalDemo">
        <i class="bi bi-box-arrow-in-right"></i> Login
      </button>
      
      <div class="modal fade" id="loginModalDemo" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Login</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
              <form>
                <div class="mb-3">
                  <label class="form-label">Email</label>
                  <input type="email" class="form-control" placeholder="Enter email">
                </div>
                <div class="mb-3">
                  <label class="form-label">Password</label>
                  <input type="password" class="form-control" placeholder="Password">
                </div>
                <button type="submit" class="btn btn-primary w-100">Login</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Confirmation Modal Demo -->
    <div class="demo-container">
      <h2 class="demo-title">4. Confirmation Dialog</h2>
      <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#confirmModalDemo">
        <i class="bi bi-trash"></i> Delete Item
      </button>
      
      <div class="modal fade" id="confirmModalDemo" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header bg-danger text-white">
              <h5 class="modal-title">Confirm Delete</h5>
              <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
              Are you sure you want to delete this item?
            </div>
            <div class="modal-footer">
              <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
              <button class="btn btn-danger" data-bs-dismiss="modal">Delete</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <!-- Additional modals for sizes demo -->
  <div class="modal fade" id="smallModalDemo"><div class="modal-dialog modal-sm"><div class="modal-content"><div class="modal-header"><h5>Small Modal</h5><button class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body">Small modal content</div></div></div></div>
  <div class="modal fade" id="defaultModal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5>Default Modal</h5><button class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body">Default size modal</div></div></div></div>
  <div class="modal fade" id="largeModalDemo"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header"><h5>Large Modal</h5><button class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body">Large modal content</div></div></div></div>
  <div class="modal fade" id="xlModalDemo"><div class="modal-dialog modal-xl"><div class="modal-content"><div class="modal-header"><h5>Extra Large Modal</h5><button class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body">XL modal content</div></div></div></div>
  <div class="modal fade" id="fullscreenModalDemo"><div class="modal-dialog modal-fullscreen"><div class="modal-content"><div class="modal-header"><h5>Fullscreen Modal</h5><button class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body">Fullscreen modal content</div></div></div></div>
</body>
</html>