Tutorials


Bootstrap basic modal structure


Basic Modal Structure in Bootstrap

Bootstrap's modal component is a flexible and customizable dialog box that can be used to display content on top of the current page. Modals are commonly used for alerts, forms, or other important information that requires user interaction.

Here's a detailed explanation of the basic modal structure in Bootstrap:

1. Basic Modal Structure

A modal consists of several key elements:

a. Modal Container

The modal container wraps the entire modal dialog and its content. It is responsible for showing and hiding the modal and handling the backdrop (overlay).

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal content goes here -->
    </div>
  </div>
</div>
  • .modal: The base class for the modal. The fade class adds a fading transition effect.
  • id="exampleModal": Unique identifier for the modal. This ID is used by the trigger button to show the modal.
  • tabindex="-1": Ensures the modal can be focused programmatically.
  • aria-labelledby="exampleModalLabel": Associates the modal with its label for accessibility.
  • aria-hidden="true": Hides the modal from screen readers initially.

b. Modal Dialog

The modal dialog is the container for the modal content and is centered within the viewport.

<div class="modal-dialog">
  <div class="modal-content">
    <!-- Modal content goes here -->
  </div>
</div>
  • .modal-dialog: Provides the dialog structure and centers the modal.
  • .modal-content: Wraps the content of the modal, including the header, body, and footer.

c. Modal Header

The modal header typically contains the title of the modal and a close button.

<div class="modal-header">
  <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
  • .modal-header: Styles and positions the header section.
  • .modal-title: Displays the title of the modal.
  • .btn-close: The close button for dismissing the modal.

d. Modal Body

The modal body contains the main content of the modal, such as text, forms, or other elements.

<div class="modal-body">
  Your content goes here.
</div>
  • .modal-body: Styles the content area of the modal.

e. Modal Footer

The modal footer typically includes action buttons like "Save" or "Cancel."

<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>
  • .modal-footer: Styles the footer section and aligns action buttons.

2. Triggering the Modal

You need a trigger element (such as a button) to open the modal. This element should include the data-bs-toggle and data-bs-target attributes to link it with the modal.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>
  • data-bs-toggle="modal": Indicates that this button will trigger a modal.
  • data-bs-target="#exampleModal": Specifies the ID of the modal to be shown.

3. Modal Backdrop

The modal backdrop is the semi-transparent overlay that covers the rest of the page when the modal is open. It is handled automatically by Bootstrap.

  • Backdrops: Can be customized or disabled using JavaScript options.

4. Example of Basic Modal Structure

Here’s a complete example combining all the parts of a basic modal:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Modal Example</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- Trigger Button -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
  </button>

  <!-- Modal Structure -->
  <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">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          Your content goes here.
        </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/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.min.js"></script>
</body>
</html>

Summary of Basic Modal Structure in Bootstrap

  • Modal Container: Wraps the entire modal dialog.
  • Modal Dialog: Centers the modal in the viewport.
  • Modal Content: Contains the modal header, body, and footer.
  • Modal Header: Displays the title and close button.
  • Modal Body: Contains the main content.
  • Modal Footer: Includes action buttons.
  • Trigger Button: Opens the modal using data-bs-toggle and data-bs-target.


Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about