CodePen Embed - Awesome Bootstrap Alerts

Live

This Pen is owned by Herman Starikov on CodePen.

External CSS

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; serial *; vr *; web-share *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"BqKQKg\",\"auto_save\":true},\"hashid\":\"BqKQKg\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css\",\"order\":0,\"resource_type\":\"css\",\"par_content\":\"\"},{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css\",\"order\":2,\"resource_type\":\"css\",\"par_content\":\"\"},{\"url\":\"https://use.fontawesome.com/releases/v5.3.1/css/all.css\",\"order\":1,\"resource_type\":\"css\",\"par_content\":\"\"}],\"tags\":[\"functional\",\"bootstrap\",\"font-awesome\",\"animatecss\",\"alerts\"],\"id\":28687756,\"user_id\":1589206,\"html\":\"<div class=\\\"bg-light h-100vh position-relative py-5 overflow-x-hidden\\\">\\n  <div class=\\\"position-relative py-1 mx-auto  rounded z-index-2 animated bounceInUp\\\" style=\\\"max-width: 554px;\\\">\\n    \\n    <h1 class=\\\"font-weight-light mx-3 mb-4 text-center\\\">Awesome Alerts for Bootstrap</h1>\\n    \\n    \\n    <div class=\\\"alert alert-primary mx-3 animated flipInX\\\" role=\\\"alert\\\">\\n      <i class=\\\"fas fa-exclamation-circle opacity-05 mr-1\\\"></i>\\n      Classic Alert\\n    </div>\\n\\n    \\n    <div class=\\\"alert alert-primary rounded-0 border-right-0 border-left-0  animated fadeIn delay-01s\\\" role=\\\"alert\\\">\\n      <i class=\\\"fas fa-exclamation-triangle opacity-05 mr-1\\\"></i>\\n      Fullwidth Alert\\n    </div>\\n\\n    \\n    <div class=\\\"border-primary border-left border-width-4 px-4 py-3 mx-3 mb-3 bg-white text-black shadow-sm animated flipInX delay-02s\\\" role=\\\"alert\\\">\\n      <i class=\\\"fas fa-exclamation opacity-05 mr-3\\\"></i>\\n      Border-left Alert\\n    </div>\\n\\n    \\n    <div class=\\\"d-flex justify-content-between border-primary border-top border-width-4 px-4 py-3 mx-3 mb-3 bg-secondary text-white shadow animated flipInX delay-03s\\\" role=\\\"alert\\\">\\n      <span>Border-top Alert</span>\\n      <i class=\\\"fas fa-exclamation-circle opacity-05 mt-1\\\"></i>\\n    </div>\\n\\n    \\n    <div class=\\\"alert alert-primary bg-primary border-0 text-white mx-3 animated flipInX delay-04s\\\" role=\\\"alert\\\">\\n      <i class=\\\"fas fa-exclamation-triangle opacity-05 mr-2\\\"></i>\\n      Colorful Alert\\n      <button type=\\\"button\\\" class=\\\"close\\\" aria-label=\\\"Close\\\">\\n  <span aria-hidden=\\\"true\\\" style=\\\"text-shadow: none;\\\">&times;</span>\\n</button>\\n    </div>\\n\\n    \\n    <div role=\\\"alert\\\" class=\\\"mx-3 mb-3 shadow-lg animated flipInX delay-05s\\\">\\n      <div class=\\\"px-4 py-1 bg-primary text-white rounded-top\\\">Detailed Alert</div>\\n      <div class=\\\"px-4 py-3 bg-white d-flex rounded-bottom\\\">\\n        <i class=\\\"fas fa-exclamation-circle opacity-05 text-dark my-1 mr-3\\\"></i>\\n        <p>This alert contains additional infromation, such as steps the user can follow to resolve the situation.</p></div>\\n    </div>\\n    \\n    <div class=\\\"small mx-3 text-muted text-center\\\">Made with Bootstrap v4.1.2, Font Awesome v5.3.1 and Animate.css v3.7.0</div>\\n  </div>\\n  \\n  <i class=\\\"position-absolute fas fa-exclamation-triangle text-white animated infinite pulse slower\\\" style=\\\"top: 0; left: 0; font-size: 15em;\\\"></i>\\n  <i class=\\\"position-absolute fas fa-exclamation-circle text-white animated infinite pulse slower delay-1s\\\" style=\\\"bottom: 0; right: -0.5em; font-size: 30em\\\"></i>\\n</div>\",\"css\":\".border-width-4 {\\n  border-width: 4px !important;\\n}\\n.overflow-x-hidden {\\n  overflow-x: hidden;  \\n}\\n.h-100vh {\\n  height: 100vh;\\n}\\n.z-index-1 {\\n  z-index: 1;\\n}\\n.z-index-2 {\\n  z-index: 2;\\n}\\n.opacity-05 {\\n  opacity: 0.5;\\n}\\n.delay-01s {\\n  animation-delay: 0.2s;\\n}\\n.delay-02s {\\n  animation-delay: 0.4s;\\n}\\n.delay-03s {\\n  animation-delay: 0.6s;\\n}\\n.delay-04s {\\n  animation-delay: 0.8s;\\n}\\n.delay-05s {\\n  animation-delay: 1s;\\n}\",\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2018-10-04T00:47:10.000Z\",\"updated_at\":\"2018-10-05T13:10:15.000Z\",\"title\":\"Awesome Bootstrap Alerts\",\"description\":\"This is a bunch of cool looking alerts, built with Bootstrap, Font Awesome and Animate.css. Bootstrap has only one kind of an alert by default. I'm building more based on functional Bootsrap utilities classes.\",\"slug_hash\":\"BqKQKg\",\"head\":\"\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":9,\"pick\":false,\"popularity\":347,\"views_count\":3018,\"pick_visible_at\":null,\"cpid\":\"01663c8a-eeb0-7644-a631-4f0243b3728b\",\"is_new_editor_pen\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://public.codepenassets.com/css/normalize-5.0.0.min.css","__pen_prefix_free_url":"https://public.codepenassets.com/js/prefixfree-1.0.7.min.js","__pen_reset_css_url":"https://public.codepenassets.com/css/reset-2.0.min.css"}