How to create centered modal bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Create a Centered Modal in Bootstrap Easily

To create a centered modal in Bootstrap, add the modal-dialog-centered class to the modal-dialog element. This class vertically centers the modal in the viewport while Bootstrap handles horizontal centering automatically.

📐

Syntax

The basic structure of a Bootstrap modal includes a modal container, a modal-dialog wrapper, and a modal-content section. To center the modal vertically, add the modal-dialog-centered class to the modal-dialog element.

modal: The main container with fade and modal classes.
modal-dialog: Wraps the modal content; add modal-dialog-centered here to center vertically.
modal-content: Contains the header, body, and footer of the modal.

html

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <!-- Modal header, body, footer go here -->
    </div>
  </div>
</div>

💻

Example

This example shows a complete centered modal with a header, body, and footer. The modal appears centered vertically and horizontally when triggered by the button.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Centered Modal Bootstrap Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#centeredModal">
    Open Centered Modal
  </button>

  <!-- 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 perfectly centered vertically and horizontally.
        </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

A webpage with a blue button labeled 'Open Centered Modal'. Clicking it opens a popup modal box centered vertically and horizontally with a header 'Centered Modal', body text, and footer buttons 'Close' and 'Save changes'.

⚠️

Common Pitfalls

Common mistakes when creating centered modals include:

Forgetting to add modal-dialog-centered to the modal-dialog element, which results in the modal appearing at the top.
Not including Bootstrap's JavaScript bundle, so the modal does not open or close properly.
Using outdated Bootstrap versions that do not support modal-dialog-centered (introduced in Bootstrap 4).

html

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

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

📊

Quick Reference

To center a Bootstrap modal:

Add modal-dialog-centered to modal-dialog.
Ensure Bootstrap CSS and JS are included.
Use data-bs-toggle="modal" and data-bs-target="#modalId" on trigger elements.
Test responsiveness on different screen sizes.

✅

Key Takeaways

Add the class modal-dialog-centered to the modal-dialog element to center the modal vertically.

Bootstrap automatically centers modals horizontally, so no extra class is needed for that.

Include Bootstrap's CSS and JavaScript bundle for modal functionality to work.

modal-dialog-centered is available from Bootstrap 4 and later versions.

Always test your modal on different screen sizes to ensure proper centering and responsiveness.