Bootstrap Modal Components

Basic Modal Structure

The modal component consists of several parts: the modal container, dialog, content, header, body, and footer.

<!-- 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">
        <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">
        Modal body 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>

Modal Sizes

Bootstrap provides different modal sizes to suit various content needs.

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

<!-- Default modal -->
<div class="modal-dialog">...</div>

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

<!-- Extra large modal -->
<div class="modal-dialog modal-xl">...</div>

Modal Positioning

You can change the position of modals using Bootstrap's positioning utilities.

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

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">...</div>

<!-- Combine both -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">...</div>

Modal Content

Modals can contain various types of content, from simple text to complex forms.

JavaScript Methods

Bootstrap provides JavaScript methods to control modals programmatically.

// Initialize a modal
var myModal = new bootstrap.Modal(document.getElementById('myModal'))

// Show the modal
myModal.show()

// Hide the modal
myModal.hide()

// Toggle the modal
myModal.toggle()

// Update the modal (recalculate position)
myModal.handleUpdate()

// Dispose of the modal
myModal.dispose()

Events

Bootstrap's modal class exposes a few events for hooking into modal functionality.

var myModal = document.getElementById('myModal')

// Event fired when the modal is about to be shown
myModal.addEventListener('show.bs.modal', function (event) {
  // Do something before the modal is shown
})

// Event fired when the modal is fully shown
myModal.addEventListener('shown.bs.modal', function (event) {
  // Do something after the modal is shown
})

// Event fired when the modal is about to be hidden
myModal.addEventListener('hide.bs.modal', function (event) {
  // Do something before the modal is hidden
})

// Event fired when the modal is fully hidden
myModal.addEventListener('hidden.bs.modal', function (event) {
  // Do something after the modal is hidden
})

Accessibility Considerations

Ensure your modals are accessible to all users, including those using assistive technologies.

• Always include aria-labelledby on the modal, referencing the modal title
• Include aria-hidden="true" on the modal when it's not visible
• Add role="dialog" and aria-modal="true" to the modal
• Ensure focus is properly managed when opening and closing modals
• Make sure all interactive elements in the modal are keyboard accessible

<div class="modal fade" id="accessibleModal" tabindex="-1" role="dialog" aria-labelledby="accessibleModalLabel" aria-hidden="true" aria-modal="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="accessibleModalLabel">Accessible Modal Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Modal content...
      </div>
    </div>
  </div>
</div>

Best Practices