Page Views
1,600
Likes
345
Bugs Fixed
21
New Members
124
Gifts
16
Tasks
17

Modal Dialog Boxes

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Static example

A rendered modal with header, body, and set of actions in the footer.

<div class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h2 class="modal-title">Modal title</h2>
      </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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Live demo

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Launch demo modal
Demo Settings
Fixed Header
Boxed Layout
Collapse Leftbar
Topnav
Sidebar