« Previous Next »

What is a Modal?

A modal is a dialog box or popup window that appears on top of the main content of a webpage. It captures user attention by temporarily halting interaction with the rest of the page. Modals are used for various purposes, such as displaying forms, alerts, or additional information, without navigating away from the current page.

Why Use Modals?

  • Improved User Experience: Modals allow users to interact with essential information or options without leaving their current context on the page.
  • Focused Attention: By appearing as a popup, modals help bring user attention to specific content, such as alerts or important messages.
  • Efficient Data Collection: Modals are commonly used for forms or input fields, enabling seamless data collection without redirecting users to another page.

Carousel Code Examples

    
    <!DOCTYPE html>
      <html lang="en">
        <head>
          <title>Bootstrap Carousel Examples</title>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
        </head>
        <body>
        
          <!-- Types of Modals -->
          <h2>Types of Modals</h2>
          <p>Below are some common types of Bootstrap modals:</p>
          
          <!-- Trigger Buttons for Different Modals -->
          <button type="button" class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#basicModal">Basic Modal</button>
          <button type="button" class="btn btn-secondary mb-3" data-bs-toggle="modal" data-bs-target="#scrollableModal">Scrollable Modal</button>
          <button type="button" class="btn btn-success mb-3" data-bs-toggle="modal" data-bs-target="#centeredModal">Centered Modal</button>
          <button type="button" class="btn btn-warning mb-3" data-bs-toggle="modal" data-bs-target="#largeModal">Large Modal</button>
          <button type="button" class="btn btn-info mb-3" data-bs-toggle="modal" data-bs-target="#smallModal">Small Modal</button>
          
          <!-- Basic Modal -->
          <div class="modal fade" id="basicModal" tabindex="-1" aria-labelledby="basicModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="basicModalLabel">Basic Modal</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  This is a basic modal with some simple text 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>
          
          <!-- Scrollable Modal -->
          <div class="modal fade" id="scrollableModal" tabindex="-1" aria-labelledby="scrollableModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="scrollableModalLabel">Scrollable Modal</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <p>This modal has a scrollable body content. You can add as much content as you want here, and the modal will be scrollable.</p>
                  <p>Scrollable content...</p>
                  <p>Scrollable content...</p>
                  <p>Scrollable content...</p>
                  <p>Scrollable content...</p>
                  <p>Scrollable content...</p>
                  <p>Scrollable content...</p>
                  <p>Scrollable content...</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>
          
          <!-- Vertically Centered Modal -->
          <div class="modal fade" id="centeredModal" tabindex="-1" aria-labelledby="centeredModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="centeredModalLabel">Centered Modal</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  This modal is vertically centered.
                </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>
          
          <!-- Large Modal -->
          <div class="modal fade" id="largeModal" tabindex="-1" aria-labelledby="largeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="largeModalLabel">Large Modal</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  This is a larger modal, useful for displaying more 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>
          
          <!-- Small Modal -->
          <div class="modal fade" id="smallModal" tabindex="-1" aria-labelledby="smallModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="smallModalLabel">Small Modal</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  This is a small modal, ideal for quick messages or alerts.
                </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>
        
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
      </body>
    </html>

Output Example

Types of Modals

Below are some common types of Bootstrap modals:

« Previous Next »