Skip to content
This repository has been archived by the owner on Feb 1, 2022. It is now read-only.

E032

Jump to bottom
cvrebert edited this page Oct 17, 2014 · 3 revisions

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>

Bootlint documentation wiki content is licensed under the CC BY 3.0 License, and based on Bootstrap's docs which are copyright Twitter, Inc.

Clone this wiki locally