The Bootstrap Site Alert module allows people to create a system wide message that is bootstrap themed.

7.x Version

INSTALL
Install the module as you would any other module outlined in this documentation.

CONFIGURATION / ALERTS
Go to : /admin/config/system/bootstrap-site-alert

There you have a few options:
1. Checkbox to enable this Alert
2. The Severity Level
3. If you want to make the button dismissable (has a X on it)
4. Alert Message itself

8.x-1.x Version

INSTALL
Install the module as you would any other module outlined in this documentation.

CONFIGURATION / ALERTS
Go to : /admin/config/system/bootstrap-site-alert

There you have a few options:
This version allows the ability to add multiple alerts. You can also:
1. Checkbox to enable this Alert
2. The Severity Level
3. If you want to make the button dismissable (has a X on it)
4. Show alert only on certain pages
5. Alert Message itself

8.x-2.x Version

INSTALL
Install the module as you would any other module outlined in this documentation.

CONFIGURATION
Go to : /admin/config/system/bootstrap-site-alert

Here you can select the Bootstrap Version (defaults to 4).

ALERTS

This version is completely node based. Create a new node via node/add/bootstrap_site_alert.

1. Checkbox to enable this Alert
2. The Severity Level
3. If you want to make the button dismissable (has a X on it)
4. Show alert only on certain pages
5. Alert Message itself

Notes
1. You can also unpublish a bootstrap site alert node not to show it. The Checkbox to enable this Alert only works on published nodes. Some editors may not have the ability to unpublish nodes, thats why this is setup this way.

People without Bootstrap

You can technically still use this, it just depends on the front end library Bootstrap for CSS / JS.

If you don't want to use Bootstrap, here is the CSS / JS for Bootstrap 3.x you need to implement to make this work:

CSS

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert h4 {
  margin-top: 0;
  color: inherit;
}
.alert .alert-link {
  font-weight: bold;
}
.alert > p,
.alert > ul {
  margin-bottom: 0;
}
.alert > p + p {
  margin-top: 5px;
}
.alert-dismissable,
.alert-dismissible {
  padding-right: 35px;
}
.alert-dismissable .close,
.alert-dismissible .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}
.alert-success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #3c763d;
}
.alert-success hr {
  border-top-color: #c9e2b3;
}
.alert-success .alert-link {
  color: #2b542c;
}
.alert-info {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #31708f;
}
.alert-info hr {
  border-top-color: #a6e1ec;
}
.alert-info .alert-link {
  color: #245269;
}
.alert-warning {
  background-color: #fcf8e3;
  border-color: #faebcc;
  color: #8a6d3b;
}
.alert-warning hr {
  border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
  color: #66512c;
}
.alert-danger {
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #a94442;
}
.alert-danger hr {
  border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
  color: #843534;
}

JS

+function ($) {
  'use strict';

  // ALERT CLASS DEFINITION
  // ======================

  var dismiss = '[data-dismiss="alert"]'
  var Alert   = function (el) {
    $(el).on('click', dismiss, this.close)
  }

  Alert.VERSION = '3.3.6'

  Alert.TRANSITION_DURATION = 150

  Alert.prototype.close = function (e) {
    var $this    = $(this)
    var selector = $this.attr('data-target')

    if (!selector) {
      selector = $this.attr('href')
      selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
    }

    var $parent = $(selector)

    if (e) e.preventDefault()

    if (!$parent.length) {
      $parent = $this.closest('.alert')
    }

    $parent.trigger(e = $.Event('close.bs.alert'))

    if (e.isDefaultPrevented()) return

    $parent.removeClass('in')

    function removeElement() {
      // detach from parent, fire event then clean up data
      $parent.detach().trigger('closed.bs.alert').remove()
    }

    $.support.transition && $parent.hasClass('fade') ?
      $parent
        .one('bsTransitionEnd', removeElement)
        .emulateTransitionEnd(Alert.TRANSITION_DURATION) :
      removeElement()
  }


  // ALERT PLUGIN DEFINITION
  // =======================

  function Plugin(option) {
    return this.each(function () {
      var $this = $(this)
      var data  = $this.data('bs.alert')

      if (!data) $this.data('bs.alert', (data = new Alert(this)))
      if (typeof option == 'string') data[option].call($this)
    })
  }

  var old = $.fn.alert

  $.fn.alert             = Plugin
  $.fn.alert.Constructor = Alert


  // ALERT NO CONFLICT
  // =================

  $.fn.alert.noConflict = function () {
    $.fn.alert = old
    return this
  }


  // ALERT DATA-API
  // ==============

  $(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)

}(jQuery);