E032 - Herst/bootlint-ng GitHub Wiki

Note: Below is the original page from the Bootlint documentation, some of the info here might not apply to Bootlint-NG!


E032

The DOM structure required for Bootstrap modals is pretty specific. The layering of .modal, .modal-dialog, .modal-content, and .modal-body is required mainly in order to make modal scrolling work properly in all supported browsers. Other parts of the modal DOM are optional, but when present must conform to a specific structure.

Correct modal example that includes all optional parts:

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

.modal-dialog must be a child of .modal

.modal-dialog is required and must be a direct child of .modal.

Wrong:

<div class="modal fade">
  <div class="my-awesome-wrapper">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <p>One fine body</p>
        </div>
      </div>
    </div>
  </div>
</div>

Right:

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>One fine body</p>
      </div>
    </div>
  </div>
</div>

.modal-content must be a child of .modal-dialog

.modal-content is required and must be a direct child of .modal-dialog.

Wrong:

<div class="modal fade">
  <div class="modal-content">
    <div class="modal-body">
      <p>One fine body</p>
    </div>
  </div>
</div>

Right:

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>One fine body</p>
      </div>
    </div>
  </div>
</div>

.modal-header must be a child of .modal-content

.modal-header is optional, but if present, it must be a direct child of .modal-content.

Wrong:

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
      Modal title
    </div>
    <div class="modal-content">
      <div class="modal-body">
        <p>One fine body</p>
      </div>
    </div>
  </div>
</div>

Right:

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        Modal title
      </div>
      <div class="modal-body">
        <p>One fine body</p>
      </div>
    </div>
  </div>
</div>

.modal-body must be a child of .modal-content

.modal-body is required and must be a direct child of .modal-content.

Wrong:

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-body">
      <p>One fine body</p>
    </div>
  </div>
</div>

Right:

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>One fine body</p>
      </div>
    </div>
  </div>
</div>

.modal-footer must be a child of .modal-content

.modal-footer is optional, but if present, it must be a direct child of .modal-content.

Wrong:

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>One fine body</p>
      </div>
    </div>
    <div class="modal-footer">
      One pretty footer
    </div>
  </div>
</div>

Right:

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>One fine body</p>
      </div>
      <div class="modal-footer">
        One pretty footer
      </div>
    </div>
  </div>
</div>

.modal-title must be a child of .modal-header

.modal-title is optional, but if present, it must be a direct child of .modal-header.

Wrong:

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <h4 class="modal-title">Modal title</h4>
      <div class="modal-body">
        <p>One fine body</p>
      </div>
    </div>
  </div>
</div>

Right:

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body</p>
      </div>
    </div>
  </div>
</div>
⚠️ **GitHub.com Fallback** ⚠️