Skip to content


Modals are useful for displaying messages or content to users when they perform a certain action.


Modals are hidden by default and should be embed in your page using the following markup:

View code example
<div class="modal fade">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal title</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
      <div class="modal-body">
        <p>Modal body content...........</p>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Static Modal Example

Working Modal Example

Modal Sizing

Add .modal-sm or .modal-lg classes to the modal-dialog element to alter the size of the modals.

Dismissing Modals

To allow users to dismiss a modal add a link or button with the attribute data-dismiss="modal" within the modal.

Timed Modals

To allow a modal to be opened for a specific duration (in milliseconds) and then have it close itself simply add a data-modal-duration="DURATION-IN-MILLISECONDS" attribute to the .modal element.

Also see modals onload.

Awesome Features

99.9% Uptime / Free Upgrades / Fully Responsive / Bug Free
Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage