Home Web Development Bootstrap Solution to: Why won’t by Bootstrap 3 modal dialog display?

Get social!

Using the example from the Bootstrap 3 docs (I think — maybe it was another website), I set up a modal dialog on a web page:

<div class="modal fade" id="description" tabindex="-1" role="dialog" aria-labelledby="descriptionLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="descriptionLabel">Modal header</h3>
      </div>
      <div class="modal-body">
        <p>Modal body text</p>
      </div>
</div>

When I clicked on the associated “a” tag, the screen dimmed but the dialog didn’t display.

Solution

Somehow I missed two crucial div tags:

 <div class="modal-dialog">
    <div class="modal-content">

So the final code looked like this:

<div class="modal fade" id="description" tabindex="-1" role="dialog" aria-labelledby="descriptionLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="descriptionLabel">Modal header</h3>
      </div>
      <div class="modal-body">
        <p>Modal body text</p>
      </div>
    </div>
  </div>
</div>

Problem solved!

Bad Behavior has blocked 143 access attempts in the last 7 days.