Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/twbs/bootlint/wiki/E032 below:

E032 · twbs/bootlint Wiki · GitHub

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 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 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 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 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 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 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>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4