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 class="modal-body">
        <p>One fine body…</p>
      <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><!-- /.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
  • Earnings
  • Orders
More Sparklines
See all activities
UI Design
UX Design
Frontend Development
Backend Development
See All
Demo Settings
Fixed Header
Boxed Layout
Collapse Leftbar
Collapse Rightbar
Horizontal Icons
Header Colors
Sidebar Colors
Boxed Layout Options