Alert Style
Below is the HTML and CSS for the alerts that I have designed based on the alerts of the Bootstrap HTML framework and theming system.
Bootstrap Inspired Alerts
Successful Alert
× Example alert for .alert-success.
HTML
CSS
Informative Alert
× Example alert for .alert-info.
HTML
CSS
Warning Alert
× Example alert for .alert-warning.
HTML
CSS
Error Alert
× Example alert for .alert-error.
HTML
CSS
My Own Custom Alerts
Construction Alert
× Example alert for .alert-caution.
HTML
CSS
Development Alert
× Example alert for .alert-blueprint.
HTML
CSS
Alerts as Sections
Below are alert-styled <section>
elements that already adjust with window resizing.
× Example alert for .alert-success.
× Example alert for .alert-info.
× Example alert for .alert-warning.
× Example alert for .alert-error.
× Example alert for .alert-caution.
× Example alert for .alert-blueprint.
Base CSS
Special Thanks
This page is comprised of my own additions and either partially or heavily modified elements from the following source(s):