The javascript is located in: tekFn.messagesHelper
  Use the showMessage function

  Alert Display: 
  
    <div class="messages">
      <div class="messages-content hidden">
        <div class="message message-example1">
          This is a message-example1 message.
        </div>
        <div class="message message-example2">
          This is a message-example2 message.
        </div>
        <div class="message message-example3">
          This is a message-example3 message.
        </div>
      </div>
      <div class="message-container hidden-without-important">
        <div class="alert margin-20 alert-dismissable" role="alert">
          <span class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">×</span>
          </span>
        </div>
      </div>
    </div>


  Alert Button:
  
    <button style="font-size: 13px; color: green;">
      <button class="btn btn-primary alert"
       onclick="messagesHelper.showMessage('danger-alert', true, 'alert-danger');">Danger</button>
     </button>
  

  Alert Button Breakdown:
  onclick method used to trigger showMessage()

  showMessage has 3 parameters:

    1. showMessage('parameter 1', true, 'alert-danger'); 
      - References Alert Display message class
          <div class="message danger-alert">
                  This is a danger message.
            </div>
      
    2. showMessage('parameter 1', true, 'alert-danger'); 
      - a true or false value indicating whether the message should be cleared before another alert is triggered.
    
    3. showMessage('parameter 1', true, 'alert-danger'); 
      - Type of alert message you want to display. Based on this the alert message will be a different color.
          List of Alert Types:
            alert-primary
            alert-secondary
            alert-success
            alert-danger
            alert-warning
            alert-info
            alert-lighter
            alert-dark

          

Alert Message Breakdown
    <div class="messages-content hidden">
    messages-content is used to locate the alert message.
    hidden keeps it from displaying the page before the alert is called.  
    <div class="message parameter">This is an example message.</div>
    This is the message displayed in the alert
    Parameter is used in showMessage(parameter, .. , ..)
    <div class="message-container hidden-without-important">
        <div class="alert margin-20 alert-dismissable" role="alert">
            <span class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">×</span>
            </span>
        </div>
    </div> 
     Closes the alert window

Example: