Skip to content

Elements:Modals

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

Setup

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>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body content...........</p>
      </div>
      <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>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Static Modal Example

Modal title

Modal body content...........

Working Modal Example

Modal Vertically Centered

Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

Modal Sizing

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

Modal Animation Effects with animate.css

Add animate.css effects to modals coming in and going out by applying the following attributes to the .modal element: data-modal-animate-in="IN-EFFECT" and data-modal-animate-out="OUT-EFFECT" .

Here are some examples:

bounceIn

data-modal-animate-in="bounceIn" + data-modal-animate-out="bounceOut"

bounceInDown

data-modal-animate-in="bounceInDown" + data-modal-animate-out="bounceOutDown"

bounceInLeft

data-modal-animate-in="bounceInLeft" + data-modal-animate-out="bounceOutLeft"

bounceInRight

data-modal-animate-in="bounceInRight" + data-modal-animate-out="bounceOutRight"

bounceInUp

data-modal-animate-in="bounceInUp" + data-modal-animate-out="bounceOutUp"

fadeIn

data-modal-animate-in="fadeIn" + data-modal-animate-out="fadeOut"

fadeInDown

data-modal-animate-in="fadeInDown" + data-modal-animate-out="fadeOutDown"

fadeInDownBig

data-modal-animate-in="fadeInDownBig" + data-modal-animate-out="fadeOutDownBig"

fadeInLeft

data-modal-animate-in="fadeInLeft" + data-modal-animate-out="fadeOutLeft"

fadeInLeftBig

data-modal-animate-in="fadeInLeftBig" + data-modal-animate-out="fadeOutLeftBig"

fadeInRight

data-modal-animate-in="fadeInRight" + data-modal-animate-out="fadeOutRight"

fadeInRightBig

data-modal-animate-in="fadeInRightBig" + data-modal-animate-out="fadeOutRightBig"

fadeInUp

data-modal-animate-in="fadeInUp" + data-modal-animate-out="fadeOutUp"

fadeInUpBig

data-modal-animate-in="fadeInUpBig" + data-modal-animate-out="fadeOutUpBig"

flipInX

data-modal-animate-in="flipInX" + data-modal-animate-out="flipOutX"

flipInY

data-modal-animate-in="flipInY" + data-modal-animate-out="flipOutY"

lightSpeedIn

data-modal-animate-in="lightSpeedIn" + data-modal-animate-out="lightSpeedOut"

rotateIn

data-modal-animate-in="rotateIn" + data-modal-animate-out="rotateOut"

rotateInDownLeft

data-modal-animate-in="rotateInDownLeft" + data-modal-animate-out="rotateOutDownLeft"

rotateInDownRight

data-modal-animate-in="rotateInDownRight" + data-modal-animate-out="rotateOutDownRight"

rotateInUpLeft

data-modal-animate-in="rotateInUpLeft" + data-modal-animate-out="rotateOutUpLeft"

rotateInUpRight

data-modal-animate-in="rotateInUpRight" + data-modal-animate-out="rotateOutUpRight"

rollIn

data-modal-animate-in="rollIn" + data-modal-animate-out="rollOut"

zoomIn

data-modal-animate-in="zoomIn" + data-modal-animate-out="zoomOut"

zoomInDown

data-modal-animate-in="zoomInDown" + data-modal-animate-out="zoomOutDown"

zoomInLeft

data-modal-animate-in="zoomInLeft" + data-modal-animate-out="zoomOutLeft"

zoomInRight

data-modal-animate-in="zoomInRight" + data-modal-animate-out="zoomOutRight"

zoomInUp

data-modal-animate-in="zoomInUp" + data-modal-animate-out="zoomOutUp"

slideInDown

data-modal-animate-in="slideInDown" + data-modal-animate-out="slideOutDown"

slideInLeft

data-modal-animate-in="slideInLeft" + data-modal-animate-out="slideOutLeft"

slideInRight

data-modal-animate-in="slideInRight" + data-modal-animate-out="slideOutRight"

slideInUp

data-modal-animate-in="slideInUp" + data-modal-animate-out="slideOutUp"

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

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

Back to intro page