Alerts | Soft UI Dashboard Bootstrap @ Creative Tim

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="apple-touch-icon" sizes="76x76" href="https://demos.creative-tim.com/argon-design-system-pro/assets/img/apple-icon.png"> <link rel="icon" href="https://demos.creative-tim.com/argon-design-system-pro/assets/img/apple-icon.png" type="image/png"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="author" content="Creative Tim"> <title> Alerts | Soft UI Dashboard Bootstrap @ Creative Tim </title> <link rel="canonical" href="https://www.creative-tim.com/learning-lab/bootstrap/alerts/soft-ui-dashboard" /> <meta name="keywords" content=""> <meta name="description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible Bootstrap alerts."> <meta name="twitter:card" content="product"> <meta name="twitter:site" content="@creativetim"> <meta name="twitter:title" content="Alerts | Soft UI Dashboard Bootstrap @ Creative Tim"> <meta name="twitter:description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible Bootstrap alerts."> <meta name="twitter:creator" content="@creativetim"> <meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/450/original/opt_sd_free_thumbnail.png"> <meta property="fb:app_id" content="655968634437471"> <meta property="og:title" content="Alerts | Soft UI Dashboard Bootstrap @ Creative Tim" /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://demos.creative-tim.com/soft-ui-dashboard/index.html" /> <meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/450/original/opt_sd_free_thumbnail.png" /> <meta property="og:description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible Bootstrap alerts." /> <meta property="og:site_name" content="Creative Tim" /> <link href="" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <link rel="stylesheet" href="https://demos.creative-tim.com/test/soft-ui-dashboard-pro/assets/css/soft-ui-dashboard.min.css?v=1.0.0" type="text/css"> <link href="https://demos.creative-tim.com/test/soft-ui-dashboard-pro/assets/css/soft-ui-dashboard.min.css?v=1.0.0" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet"> <link href="https://demos.creative-tim.com/argon-design-system-pro/assets/css/nucleo-icons.css" rel="stylesheet"> <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>  <style> .async-hide { opacity: 0 !important } </style> <script> (function(a, s, y, n, c, h, i, d, e) { s.className += ' ' + y; h.start = 1 * new Date; h.end = i = function() { s.className = s.className.replace(RegExp(' ?' + y), '') }; (a[n] = a[n] || []).hide = h; setTimeout(function() { i(); h.end = null }, c); h.timeout = c; })(window, document.documentElement, 'async-hide', 'dataLayer', 4000, { 'GTM-K9BGS8K': true }); </script>  <script> (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-46172202-22', 'auto', { allowLinker: true }); ga('set', 'anonymizeIp', true); ga('require', 'GTM-K9BGS8K'); ga('require', 'displayfeatures'); ga('require', 'linker'); ga('linker:autoLink', ["2checkout.com", "avangate.com"]); </script>   <script> (function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-NKDMSK6'); </script>   <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet"> <link href="../../assets/docs-soft.css" rel="stylesheet" /> </head> <body class="docs ">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <header class="ct-docs-navbar"> <a class="ct-docs-navbar-brand" href="javascript:void(0)" aria-label="Bootstrap"> <a href="https://www.creative-tim.com/" class="ct-docs-navbar-text" target="_blank"> Creative Tim </a> <div class="ct-docs-navbar-border"></div> <a href="../overview/soft-ui-dashboard" class="ct-docs-navbar-text"> Docs </a> </a> <ul class="ct-docs-navbar-nav-left"> <li class="ct-docs-nav-item-dropdown"> <a href="javascript:;" class="ct-docs-navbar-nav-link" role="button"> <span class="ct-docs-navbar-nav-link-inner--text">Live Preview</span> </a> <div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownPreview"> <a class="ct-docs-navbar-dropdown-item" href="https://demos.creative-tim.com/soft-ui-dashboard/pages/dashboard.html" target="_blank"> Soft UI Dashboard </a> <a class="ct-docs-navbar-dropdown-item" href="https://demos.creative-tim.com/soft-ui-dashboard-pro/pages/dashboards/default.html" target="_blank"> Soft UI Dashboard Pro </a> </div> </li> <li class="ct-docs-nav-item-dropdown"> <a href="javascript:;" class="ct-docs-navbar-nav-link" role="button"> <span class="ct-docs-navbar-nav-link-inner--text">Support</span> </a> <div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownSupport"> <a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/soft-ui-dashboard/issues" target="_blank"> Soft UI Dashboard </a> <a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro/issues" target="_blank"> Soft UI Dashboard Pro </a> </div> </li> </ul> <ul class="ct-docs-navbar-nav-right"> <li class="ct-docs-navbar-nav-item"> <a class="ct-docs-navbar-nav-link" href="https://www.creative-tim.com/product/soft-ui-dashboard" target="_blank">Download Free</a> </li> <li class="ct-docs-navbar-nav-item"> <a class="ct-docs-navbar-nav-link" href="https://www.creative-tim.com/builder?ref=navbar-soft-dashboard-docs" target="_blank">Online Builder</a> </li> </ul> <a href="https://www.creative-tim.com/product/soft-ui-dashboard-pro" target="_blank" class="ct-docs-btn-upgrade"> <span class="ct-docs-btn-inner--icon"> <i class="fas fa-download mr-2"></i> </span> <span class="ct-docs-navbar-nav-link-inner--text">Upgrade to PRO</span> </a> <button class="ct-docs-navbar-toggler" type="button"> <span class="ct-docs-navbar-toggler-icon"></span> </button> </header> <div class="ct-docs-main-container"> <div class="ct-docs-main-content-row"> <div class="ct-docs-sidebar-col"> <nav class="ct-docs-sidebar-collapse-links"> <div class="ct-docs-sidebar-product"> <div class="ct-docs-sidebar-product-image"> <img src="../../assets/images/bootstrap-5.svg"> </div> <p class="ct-docs-sidebar-product-text">Soft UI Dashboard</p> </div> <div class="ct-docs-toc-item-active"> <a class="ct-docs-toc-link" href="javascript:void(0)"> <div class="d-inline-block"> <div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1"> <i class="ni ni-active-40 text-white"></i> </div> </div> Getting started </a> <ul class="ct-docs-nav-sidenav ms-4 ps-1"> <li class=""> <a href="../../bootstrap/overview/soft-ui-dashboard"> Overview </a> </li> <li class=""> <a href="../../bootstrap/license/soft-ui-dashboard"> License </a> </li> <li class=""> <a href="../../bootstrap/quick-start/soft-ui-dashboard"> Quick Start </a> </li> <li class=""> <a href="../../bootstrap/build-tools/soft-ui-dashboard"> Build Tools </a> </li> <li class=""> <a href="../../bootstrap/what-is-bootstrap/soft-ui-dashboard"> What is Bootstrap </a> </li> </ul> </div> <div class="ct-docs-toc-item-active"> <a class="ct-docs-toc-link" href="javascript:void(0)"> <div class="d-inline-block"> <div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1"> <i class="ni ni-active-40 text-white"></i> </div> </div> Django Integration </a> <ul class="ct-docs-nav-sidenav ms-4 ps-1"> <li class=""> <a href="../../bootstrap/build-tools-free/soft-ui-dashboard"> Build Tools Free </a> </li> <li class=""> <a href="../../bootstrap/build-tools-pro/soft-ui-dashboard"> Build Tools Pro </a> </li> </ul> </div> <div class="ct-docs-toc-item-active"> <a class="ct-docs-toc-link" href="javascript:void(0)"> <div class="d-inline-block"> <div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1"> <i class="ni ni-folder-17 text-white"></i> </div> </div> Foundation </a> <ul class="ct-docs-nav-sidenav ms-4 ps-1"> <li class=""> <a href="../../bootstrap/colors/soft-ui-dashboard"> Colors </a> </li> <li class=""> <a href="../../bootstrap/grid/soft-ui-dashboard"> Grid </a> </li> <li class=""> <a href="../../bootstrap/typography/soft-ui-dashboard"> Typography </a> </li> <li class=""> <a href="../../bootstrap/icons/soft-ui-dashboard"> Icons </a> </li> <li class=""> <a href="../../bootstrap/utilities/soft-ui-dashboard"> Utilities </a> </li> </ul> </div> <div class="ct-docs-toc-item-active"> <a class="ct-docs-toc-link" href="javascript:void(0)"> <div class="d-inline-block"> <div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1"> <i class="ni ni-app text-white"></i> </div> </div> Components </a> <ul class="ct-docs-nav-sidenav ms-4 ps-1"> <li class=" ct-docs-nav-sidenav-active "> <a href="../../bootstrap/alerts/soft-ui-dashboard"> Alerts </a> </li> <li class=""> <a href="../../bootstrap/badge/soft-ui-dashboard"> Badge </a> </li> <li class=""> <a href="../../bootstrap/buttons/soft-ui-dashboard"> Buttons </a> </li> <li class=""> <a href="../../bootstrap/social-buttons/soft-ui-dashboard"> Social Buttons <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/cards/soft-ui-dashboard"> Cards </a> </li> <li class=""> <a href="../../bootstrap/carousel/soft-ui-dashboard"> Carousel </a> </li> <li class=""> <a href="../../bootstrap/collapse/soft-ui-dashboard"> Collapse <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/dropdowns/soft-ui-dashboard"> Dropdowns </a> </li> <li class=""> <a href="../../bootstrap/forms/soft-ui-dashboard"> Forms </a> </li> <li class=""> <a href="../../bootstrap/input-group/soft-ui-dashboard"> Input Group </a> </li> <li class=""> <a href="../../bootstrap/list-group/soft-ui-dashboard"> List Group <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/modal/soft-ui-dashboard"> Modal </a> </li> <li class=""> <a href="../../bootstrap/navs/soft-ui-dashboard"> Navs </a> </li> <li class=""> <a href="../../bootstrap/navbar/soft-ui-dashboard"> Navbar </a> </li> <li class=""> <a href="../../bootstrap/pagination/soft-ui-dashboard"> Pagination </a> </li> <li class=""> <a href="../../bootstrap/popovers/soft-ui-dashboard"> Popovers </a> </li> <li class=""> <a href="../../bootstrap/progress/soft-ui-dashboard"> Progress </a> </li> <li class=""> <a href="../../bootstrap/spinners/soft-ui-dashboard"> Spinners <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/tables/soft-ui-dashboard"> Tables </a> </li> <li class=""> <a href="../../bootstrap/tooltips/soft-ui-dashboard"> Tooltips </a> </li> </ul> </div> <div class="ct-docs-toc-item-active"> <a class="ct-docs-toc-link" href="javascript:void(0)"> <div class="d-inline-block"> <div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1"> <i class="ni ni-settings text-white"></i> </div> </div> Plugins </a> <ul class="ct-docs-nav-sidenav ms-4 ps-1"> <li class=""> <a href="../../bootstrap/countup-js/soft-ui-dashboard"> CountUp JS <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/charts/soft-ui-dashboard"> Charts </a> </li> <li class=""> <a href="../../bootstrap/datepicker/soft-ui-dashboard"> Datepicker <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/fullcalendar/soft-ui-dashboard"> Fullcalendar <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/sliders/soft-ui-dashboard"> Sliders <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/choices/soft-ui-dashboard"> Choices <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/dropzone/soft-ui-dashboard"> Dropzone <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/datatables/soft-ui-dashboard"> Datatables <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/kanban/soft-ui-dashboard"> Kanban <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/photo-swipe/soft-ui-dashboard"> Photo Swipe <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/quill/soft-ui-dashboard"> Quill <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/sweet-alerts/soft-ui-dashboard"> Sweet Alerts <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/three-js/soft-ui-dashboard"> Three JS <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> <li class=""> <a href="../../bootstrap/wizard/soft-ui-dashboard"> Wizard <span class="ct-docs-sidenav-pro-badge">Pro</span> </a> </li> </ul> </div> </nav> </div> <div class="ct-docs-toc-col"> <ul class="section-nav"> <li class="toc-entry toc-h2"><a href="#examples">Examples</a></li> <li class="toc-entry toc-h2"><a href="#with-icon">With icon</a></li> <li class="toc-entry toc-h2"><a href="#dismissing">Dismissing</a></li> </ul> </div> <main class="ct-docs-content-col" role="main"> <div class="ct-docs-page-title"> <h1 class="ct-docs-page-h1-title" id="content"> Bootstrap Alerts </h1> </div> <p class="ct-docs-page-title-lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible Bootstrap alerts.</p> <hr class="ct-docs-hr"> <h2 id="examples">Examples</h2> <div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;"> <div class="alert alert-primary font-weight-bold text-white " role="alert"> <strong>Primary!</strong> This is a primary alert鈥攃heck it out! </div> <div class="alert alert-secondary font-weight-bold text-white " role="alert"> <strong>Secondary!</strong> This is a secondary alert鈥攃heck it out! </div> <div class="alert alert-info font-weight-bold text-white " role="alert"> <strong>Info!</strong> This is a info alert鈥攃heck it out! </div> <div class="alert alert-success font-weight-bold text-white " role="alert"> <strong>Success!</strong> This is a success alert鈥攃heck it out! </div> <div class="alert alert-danger font-weight-bold text-white " role="alert"> <strong>Danger!</strong> This is a danger alert鈥攃heck it out! </div> <div class="alert alert-warning font-weight-bold text-white " role="alert"> <strong>Warning!</strong> This is a warning alert鈥攃heck it out! </div> <div class="alert alert-light font-weight-bold text-white " role="alert"> <strong>Light!</strong> This is a light alert鈥攃heck it out! </div> <div class="alert alert-dark font-weight-bold text-white " role="alert"> <strong>Dark!</strong> This is a dark alert鈥攃heck it out! </div> </div> <div class="position-relative"> <figure class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-primary"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span> <span class="nt"><strong></span>Primary!<span class="nt"></strong></span> This is a primary alert鈥攃heck it out! <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-secondary"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span> <span class="nt"><strong></span>Secondary!<span class="nt"></strong></span> This is a secondary alert鈥攃heck it out! <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-info"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span> <span class="nt"><strong></span>Info!<span class="nt"></strong></span> This is a info alert鈥攃heck it out! <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span> <span class="nt"><strong></span>Success!<span class="nt"></strong></span> This is a success alert鈥攃heck it out! <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span> <span class="nt"><strong></span>Danger!<span class="nt"></strong></span> This is a danger alert鈥攃heck it out! <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-warning"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span> <span class="nt"><strong></span>Warning!<span class="nt"></strong></span> This is a warning alert鈥攃heck it out! <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-light"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span> <span class="nt"><strong></span>Light!<span class="nt"></strong></span> This is a light alert鈥攃heck it out! <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-dark"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span> <span class="nt"><strong></span>Dark!<span class="nt"></strong></span> This is a dark alert鈥攃heck it out! <span class="nt"></div></span> </code></pre> </figure> </div> <h2 id="with-icon">With icon</h2> <div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;"> <div class="alert alert-warning text-white" role="alert"> <span class="alert-icon"><i class="ni ni-like-2"></i></span> <span class="alert-text"><strong>Warning!</strong> This is a warning alert鈥攃heck it out that has an icon too!</span> </div> </div> <div class="position-relative"> <figure class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-warning"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"alert-icon"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"ni ni-like-2"</span><span class="nt">></i></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"alert-text"</span><span class="nt">><strong></span>Warning!<span class="nt"></strong></span> This is a warning alert鈥攃heck it out that has an icon too!<span class="nt"></span></span> <span class="nt"></div></span></code></pre> </figure> </div> <h2 id="dismissing">Dismissing</h2> <div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;"> <div class="alert alert-primary alert-dismissible fade show text-white " role="alert"> <span class="alert-icon"><i class="ni ni-like-2"></i></span> <span class="alert-text"><strong>Primary!</strong> This is a primary alert鈥攃heck it out!</span> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="alert alert-secondary alert-dismissible fade show text-white " role="alert"> <span class="alert-icon"><i class="ni ni-like-2"></i></span> <span class="alert-text"><strong>Secondary!</strong> This is a secondary alert鈥攃heck it out!</span> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="alert alert-info alert-dismissible fade show text-white " role="alert"> <span class="alert-icon"><i class="ni ni-like-2"></i></span> <span class="alert-text"><strong>Info!</strong> This is a info alert鈥攃heck it out!</span> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="alert alert-success alert-dismissible fade show text-white " role="alert"> <span class="alert-icon"><i class="ni ni-like-2"></i></span> <span class="alert-text"><strong>Success!</strong> This is a success alert鈥攃heck it out!</span> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="alert alert-danger alert-dismissible fade show text-white " role="alert"> <span class="alert-icon"><i class="ni ni-like-2"></i></span> <span class="alert-text"><strong>Danger!</strong> This is a danger alert鈥攃heck it out!</span> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="alert alert-warning alert-dismissible fade show text-white " role="alert"> <span class="alert-icon"><i class="ni ni-like-2"></i></span> <span class="alert-text"><strong>Warning!</strong> This is a warning alert鈥攃heck it out!</span> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="alert alert-light alert-dismissible fade show text-white " role="alert"> <span class="alert-icon"><i class="ni ni-like-2"></i></span> <span class="alert-text"><strong>Light!</strong> This is a light alert鈥攃heck it out!</span> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="alert alert-dark alert-dismissible fade show text-white " role="alert"> <span class="alert-icon"><i class="ni ni-like-2"></i></span> <span class="alert-text"><strong>Dark!</strong> This is a dark alert鈥攃heck it out!</span> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> </div> <div class="position-relative"> <figure class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-primary alert-dismissible fade show"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"alert-icon"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"ni ni-like-2"</span><span class="nt">></i></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"alert-text"</span><span class="nt">><strong></span>Primary!<span class="nt"></strong></span> This is a primary alert鈥攃heck it out!<span class="nt"></span></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span> <span class="nt"></button></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-secondary alert-dismissible fade show"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"alert-icon"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"ni ni-like-2"</span><span class="nt">></i></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"alert-text"</span><span class="nt">><strong></span>Secondary!<span class="nt"></strong></span> This is a secondary alert鈥攃heck it out!<span class="nt"></span></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span> <span class="nt"></button></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-info alert-dismissible fade show"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"alert-icon"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"ni ni-like-2"</span><span class="nt">></i></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"alert-text"</span><span class="nt">><strong></span>Info!<span class="nt"></strong></span> This is a info alert鈥攃heck it out!<span class="nt"></span></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span> <span class="nt"></button></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-success alert-dismissible fade show"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"alert-icon"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"ni ni-like-2"</span><span class="nt">></i></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"alert-text"</span><span class="nt">><strong></span>Success!<span class="nt"></strong></span> This is a success alert鈥攃heck it out!<span class="nt"></span></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span> <span class="nt"></button></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-danger alert-dismissible fade show"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"alert-icon"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"ni ni-like-2"</span><span class="nt">></i></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"alert-text"</span><span class="nt">><strong></span>Danger!<span class="nt"></strong></span> This is a danger alert鈥攃heck it out!<span class="nt"></span></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span> <span class="nt"></button></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-warning alert-dismissible fade show"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"alert-icon"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"ni ni-like-2"</span><span class="nt">></i></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"alert-text"</span><span class="nt">><strong></span>Warning!<span class="nt"></strong></span> This is a warning alert鈥攃heck it out!<span class="nt"></span></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span> <span class="nt"></button></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-light alert-dismissible fade show"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"alert-icon"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"ni ni-like-2"</span><span class="nt">></i></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"alert-text"</span><span class="nt">><strong></span>Light!<span class="nt"></strong></span> This is a light alert鈥攃heck it out!<span class="nt"></span></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span> <span class="nt"></button></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-dark alert-dismissible fade show"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"alert-icon"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"ni ni-like-2"</span><span class="nt">></i></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"alert-text"</span><span class="nt">><strong></span>Dark!<span class="nt"></strong></span> This is a dark alert鈥攃heck it out!<span class="nt"></span></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span> <span class="nt"></button></span> <span class="nt"></div></span> </code></pre> </figure> </div> </main> </div> <div class="ct-docs-main-footer-row"> <div class="ct-docs-main-footer-blank-col"> </div> <div class="ct-docs-main-footer-col"> <footer class="ct-docs-footer"> <div class="ct-docs-footer-inner-row"> <div class="ct-docs-footer-col"> <div class="ct-docs-footer-copyright"> 漏 <script> document.write(new Date().getFullYear()) </script> <a href="https://creative-tim.com" class="ct-docs-footer-copyright-author" target="_blank">Creative Tim</a> </div> </div> <div class="ct-docs-footer-col"> <ul class="ct-docs-footer-nav-footer"> <li> <a href="https://creative-tim.com" class="ct-docs-footer-nav-link" target="_blank">Creative Tim</a> </li> <li> <a href="https://www.creative-tim.com/contact-us" class="ct-docs-footer-nav-link" target="_blank">Contact Us</a> </li> <li> <a href="https://creative-tim.com/blog" class="ct-docs-footer-nav-link" target="_blank">Blog</a> </li> </ul> </div> </div> </footer> </div> </div> </div> <script src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/vendor/jquery/dist/jquery.min.js" type="text/javascript"></script> <script src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/js/core/popper.min.js" type="text/javascript"></script> <script src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/js/core/bootstrap.min.js" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/vendor/prismjs/prism.js" type="text/javascript"></script> <script src="https://demos.creative-tim.com/argon-design-system-pro/assets/demo/docs.min.js" type="text/javascript"></script> <script src="https://demos.creative-tim.com/argon-design-system-pro/assets/demo/vendor/holder.min.js" type="text/javascript"></script> <script src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/js/plugins/moment.min.js" type="text/javascript"></script> <script src="https://demos.creative-tim.com/test/soft-ui-dashboard-pro/assets/js/soft-ui-dashboard.min.js?v=1.0.0" type="text/javascript"></script> <script> Holder.addTheme('gray', { bg: '#777', fg: 'rgba(255,255,255,.75)', font: 'Helvetica', fontweight: 'normal' }) </script>  <script> ! function(f, b, e, v, n, t, s) { if (f.fbq) return; n = f.fbq = function() { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments) }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s) }(window, document, 'script', '//connect.facebook.net/en_US/fbevents.js'); try { fbq('init', '111649226022273'); fbq('track', "PageView"); } catch (err) { console.log('Facebook Track Error:', err); } </script> <script src="../../assets/docs.js"></script> </body> </html>

CINXE.COM

Alerts | Soft UI Dashboard Bootstrap @ Creative Tim