Home Explore Help
Sign In
SMusatov
/
tabler
mirror of https://github.com/tabler/tabler.git
1
0
Fork 0
Files
Branch: dev-easepick
Branches Tags
tabler
/
demo
/
docs
/
alerts.html

alerts.html 122 KB
Permalink History Raw

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552 
  1. <!doctype html>
    2. 

  2. <!--
    3. 

  3. * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
    4. 

  4. * @version 1.0.0-beta14
    5. 

  5. * @link https://tabler.io
    6. 

  6. * Copyright 2018-2022 The Tabler Authors
    7. 

  7. * Copyright 2018-2022 codecalm.net Paweł Kuna
    8. 

  8. * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
    9. 

  9. -->
    10. 

  10. <html lang="en">
    11. 

  11.   <head>
    12. 

  12.     <meta charset="utf-8"/>
    13. 

  13.     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    14. 

  14.     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    15. 

  15.     <title>Alerts - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
    16. 

  16.     <!-- CSS files -->
    17. 

  17.     <link href="../dist/css/tabler.min.css?1666304673" rel="stylesheet"/>
    18. 

  18.     <link href="../dist/css/tabler-flags.min.css?1666304673" rel="stylesheet"/>
    19. 

  19.     <link href="../dist/css/tabler-payments.min.css?1666304673" rel="stylesheet"/>
    20. 

  20.     <link href="../dist/css/tabler-vendors.min.css?1666304673" rel="stylesheet"/>
    21. 

  21.     <link href="../dist/css/demo.min.css?1666304673" rel="stylesheet"/>
    22. 

  22.     <style>
    23. 

  23.       @import url('https://rsms.me/inter/inter.css');
    24. 

  24.       :root {
    25. 

  25.       	--tblr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
    26. 

  26.       }
    27. 

  27.     </style>
    28. 

  28.   </head>
    29. 

  29.   <body >
    30. 

  30.     <script src="../dist/js/demo-theme.min.js?1666304673"></script>
    31. 

  31.     <div class="page">
    32. 

  32.       <!-- Navbar -->
    33. 

  33.       <header class="navbar navbar-expand-md navbar-light d-print-none">
    34. 

  34.         <div class="container-xl">
    35. 

  35.           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
    36. 

  36.             <span class="navbar-toggler-icon"></span>
    37. 

  37.           </button>
    38. 

  38.           <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
    39. 

  39.             <a href="..">
    40. 

  40.               <img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
    41. 

  41.             </a>
    42. 

  42.           </h1>
    43. 

  43.           <div class="navbar-nav flex-row order-md-last">
    44. 

  44.             <div class="nav-item d-none d-md-flex me-3">
    45. 

  45.               <div class="btn-list">
    46. 

  46.                 <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
    47. 

  47.                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
    48. 

  48.                   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
    49. 

  49.                   Source code
    50. 

  50.                 </a>
    51. 

  51.                 <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
    52. 

  52.                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
    53. 

  53.                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
    54. 

  54.                   Sponsor
    55. 

  55.                 </a>
    56. 

  56.               </div>
    57. 

  57.             </div>
    58. 

  58.             <div class="d-none d-md-flex">
    59. 

  59.               <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
    60. 

  60. 		   data-bs-placement="bottom">
    61. 

  61.                 <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
    62. 

  62.                 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
    63. 

  63.               </a>
    64. 

  64.               <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
    65. 

  65. 		   data-bs-placement="bottom">
    66. 

  66.                 <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
    67. 

  67.                 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
    68. 

  68.               </a>
    69. 

  69.               <div class="nav-item dropdown d-none d-md-flex me-3">
    70. 

  70.                 <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
    71. 

  71.                   <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
    72. 

  72.                   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
    73. 

  73.                   <span class="badge bg-red"></span>
    74. 

  74.                 </a>
    75. 

  75.                 <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
    76. 

  76.                   <div class="card">
    77. 

  77.                     <div class="card-header">
    78. 

  78.                       <h3 class="card-title">Last updates</h3>
    79. 

  79.                     </div>
    80. 

  80.                     <div class="list-group list-group-flush list-group-hoverable">
    81. 

  81.                       <div class="list-group-item">
    82. 

  82.                         <div class="row align-items-center">
    83. 

  83.                           <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
    84. 

  84.                           <div class="col text-truncate">
    85. 

  85.                             <a href="#" class="text-body d-block">Example 1</a>
    86. 

  86.                             <div class="d-block text-muted text-truncate mt-n1">
    87. 

  87.                               Change deprecated html tags to text decoration classes (#29604)
    88. 

  88.                             </div>
    89. 

  89.                           </div>
    90. 

  90.                           <div class="col-auto">
    91. 

  91.                             <a href="#" class="list-group-item-actions">
    92. 

  92.                               <!-- Download SVG icon from http://tabler-icons.io/i/star -->
    93. 

  93.                               <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
    94. 

  94.                             </a>
    95. 

  95.                           </div>
    96. 

  96.                         </div>
    97. 

  97.                       </div>
    98. 

  98.                       <div class="list-group-item">
    99. 

  99.                         <div class="row align-items-center">
    100. 

  100.                           <div class="col-auto"><span class="status-dot d-block"></span></div>
    101. 

  101.                           <div class="col text-truncate">
    102. 

  102.                             <a href="#" class="text-body d-block">Example 2</a>
    103. 

  103.                             <div class="d-block text-muted text-truncate mt-n1">
    104. 

  104.                               justify-content:between ⇒ justify-content:space-between (#29734)
    105. 

  105.                             </div>
    106. 

  106.                           </div>
    107. 

  107.                           <div class="col-auto">
    108. 

  108.                             <a href="#" class="list-group-item-actions show">
    109. 

  109.                               <!-- Download SVG icon from http://tabler-icons.io/i/star -->
    110. 

  110.                               <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
    111. 

  111.                             </a>
    112. 

  112.                           </div>
    113. 

  113.                         </div>
    114. 

  114.                       </div>
    115. 

  115.                       <div class="list-group-item">
    116. 

  116.                         <div class="row align-items-center">
    117. 

  117.                           <div class="col-auto"><span class="status-dot d-block"></span></div>
    118. 

  118.                           <div class="col text-truncate">
    119. 

  119.                             <a href="#" class="text-body d-block">Example 3</a>
    120. 

  120.                             <div class="d-block text-muted text-truncate mt-n1">
    121. 

  121.                               Update change-version.js (#29736)
    122. 

  122.                             </div>
    123. 

  123.                           </div>
    124. 

  124.                           <div class="col-auto">
    125. 

  125.                             <a href="#" class="list-group-item-actions">
    126. 

  126.                               <!-- Download SVG icon from http://tabler-icons.io/i/star -->
    127. 

  127.                               <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
    128. 

  128.                             </a>
    129. 

  129.                           </div>
    130. 

  130.                         </div>
    131. 

  131.                       </div>
    132. 

  132.                       <div class="list-group-item">
    133. 

  133.                         <div class="row align-items-center">
    134. 

  134.                           <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
    135. 

  135.                           <div class="col text-truncate">
    136. 

  136.                             <a href="#" class="text-body d-block">Example 4</a>
    137. 

  137.                             <div class="d-block text-muted text-truncate mt-n1">
    138. 

  138.                               Regenerate package-lock.json (#29730)
    139. 

  139.                             </div>
    140. 

  140.                           </div>
    141. 

  141.                           <div class="col-auto">
    142. 

  142.                             <a href="#" class="list-group-item-actions">
    143. 

  143.                               <!-- Download SVG icon from http://tabler-icons.io/i/star -->
    144. 

  144.                               <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
    145. 

  145.                             </a>
    146. 

  146.                           </div>
    147. 

  147.                         </div>
    148. 

  148.                       </div>
    149. 

  149.                     </div>
    150. 

  150.                   </div>
    151. 

  151.                 </div>
    152. 

  152.               </div>
    153. 

  153.             </div>
    154. 

  154.             <div class="nav-item dropdown">
    155. 

  155.               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
    156. 

  156.                 <span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
    157. 

  157.                 <div class="d-none d-xl-block ps-2">
    158. 

  158.                   <div>Paweł Kuna</div>
    159. 

  159.                   <div class="mt-1 small text-muted">UI Designer</div>
    160. 

  160.                 </div>
    161. 

  161.               </a>
    162. 

  162.               <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
    163. 

  163.                 <a href="#" class="dropdown-item">Status</a>
    164. 

  164.                 <a href="#" class="dropdown-item">Profile</a>
    165. 

  165.                 <a href="#" class="dropdown-item">Feedback</a>
    166. 

  166.                 <div class="dropdown-divider"></div>
    167. 

  167.                 <a href="../settings.html" class="dropdown-item">Settings</a>
    168. 

  168.                 <a href="../sign-in.html" class="dropdown-item">Logout</a>
    169. 

  169.               </div>
    170. 

  170.             </div>
    171. 

  171.           </div>
    172. 

  172.         </div>
    173. 

  173.       </header>
    174. 

  174.       <div class="navbar-expand-md">
    175. 

  175.         <div class="collapse navbar-collapse" id="navbar-menu">
    176. 

  176.           <div class="navbar navbar-light">
    177. 

  177.             <div class="container-xl">
    178. 

  178.               <ul class="navbar-nav">
    179. 

  179.                 <li class="nav-item">
    180. 

  180.                   <a class="nav-link" href="../index.html" >
    181. 

  181.                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
    182. 

  182.                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
    183. 

  183.                     </span>
    184. 

  184.                     <span class="nav-link-title">
    185. 

  185.                       Home
    186. 

  186.                     </span>
    187. 

  187.                   </a>
    188. 

  188.                 </li>
    189. 

  189.                 <li class="nav-item dropdown">
    190. 

  190.                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
    191. 

  191.                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
    192. 

  192.                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
    193. 

  193.                     </span>
    194. 

  194.                     <span class="nav-link-title">
    195. 

  195.                       Interface
    196. 

  196.                     </span>
    197. 

  197.                   </a>
    198. 

  198.                   <div class="dropdown-menu">
    199. 

  199.                     <div class="dropdown-menu-columns">
    200. 

  200.                       <div class="dropdown-menu-column">
    201. 

  201.                         <a class="dropdown-item" href="../empty.html">
    202. 

  202.                           Empty page
    203. 

  203.                         </a>
    204. 

  204.                         <a class="dropdown-item" href="../accordion.html">
    205. 

  205.                           Accordion
    206. 

  206.                         </a>
    207. 

  207.                         <a class="dropdown-item" href="../blank.html">
    208. 

  208.                           Blank page
    209. 

  209.                         </a>
    210. 

  210.                         <a class="dropdown-item" href="../buttons.html">
    211. 

  211.                           Buttons
    212. 

  212.                         </a>
    213. 

  213.                         <div class="dropend">
    214. 

  214.                           <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
    215. 

  215.                             Cards
    216. 

  216.                             <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    217. 

  217.                           </a>
    218. 

  218.                           <div class="dropdown-menu">
    219. 

  219.                             <a href="../cards.html" class="dropdown-item">
    220. 

  220.                               Sample cards
    221. 

  221.                             </a>
    222. 

  222.                             <a href="../card-actions.html" class="dropdown-item">
    223. 

  223.                               Card actions
    224. 

  224.                               <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    225. 

  225.                             </a>
    226. 

  226.                             <a href="../cards-masonry.html" class="dropdown-item">
    227. 

  227.                               Cards Masonry
    228. 

  228.                             </a>
    229. 

  229.                           </div>
    230. 

  230.                         </div>
    231. 

  231.                         <a class="dropdown-item" href="../colors.html">
    232. 

  232.                           Colors
    233. 

  233.                         </a>
    234. 

  234.                         <a class="dropdown-item" href="../datagrid.html">
    235. 

  235.                           Data grid
    236. 

  236.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    237. 

  237.                         </a>
    238. 

  238.                         <a class="dropdown-item" href="../datatables.html">
    239. 

  239.                           Datatables
    240. 

  240.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    241. 

  241.                         </a>
    242. 

  242.                         <a class="dropdown-item" href="../dropdowns.html">
    243. 

  243.                           Dropdowns
    244. 

  244.                         </a>
    245. 

  245.                         <a class="dropdown-item" href="../modals.html">
    246. 

  246.                           Modals
    247. 

  247.                         </a>
    248. 

  248.                         <a class="dropdown-item" href="../maps.html">
    249. 

  249.                           Maps
    250. 

  250.                         </a>
    251. 

  251.                         <a class="dropdown-item" href="../map-fullsize.html">
    252. 

  252.                           Map fullsize
    253. 

  253.                         </a>
    254. 

  254.                         <a class="dropdown-item" href="../maps-vector.html">
    255. 

  255.                           Vector maps
    256. 

  256.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    257. 

  257.                         </a>
    258. 

  258.                         <a class="dropdown-item" href="../navigation.html">
    259. 

  259.                           Navigation
    260. 

  260.                         </a>
    261. 

  261.                         <a class="dropdown-item" href="../charts.html">
    262. 

  262.                           Charts
    263. 

  263.                         </a>
    264. 

  264.                       </div>
    265. 

  265.                       <div class="dropdown-menu-column">
    266. 

  266.                         <a class="dropdown-item" href="../pagination.html">
    267. 

  267.                           <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
    268. 

  268.                           Pagination
    269. 

  269.                         </a>
    270. 

  270.                         <a class="dropdown-item" href="../placeholder.html">
    271. 

  271.                           Placeholder
    272. 

  272.                         </a>
    273. 

  273.                         <a class="dropdown-item" href="../tabs.html">
    274. 

  274.                           Tabs
    275. 

  275.                         </a>
    276. 

  276.                         <a class="dropdown-item" href="../tables.html">
    277. 

  277.                           Tables
    278. 

  278.                         </a>
    279. 

  279.                         <a class="dropdown-item" href="../carousel.html">
    280. 

  280.                           Carousel
    281. 

  281.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    282. 

  282.                         </a>
    283. 

  283.                         <a class="dropdown-item" href="../lists.html">
    284. 

  284.                           Lists
    285. 

  285.                         </a>
    286. 

  286.                         <a class="dropdown-item" href="../typography.html">
    287. 

  287.                           Typography
    288. 

  288.                         </a>
    289. 

  289.                         <a class="dropdown-item" href="../offcanvas.html">
    290. 

  290.                           Offcanvas
    291. 

  291.                         </a>
    292. 

  292.                         <a class="dropdown-item" href="../markdown.html">
    293. 

  293.                           Markdown
    294. 

  294.                         </a>
    295. 

  295.                         <a class="dropdown-item" href="../dropzone.html">
    296. 

  296.                           Dropzone
    297. 

  297.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    298. 

  298.                         </a>
    299. 

  299.                         <a class="dropdown-item" href="../lightbox.html">
    300. 

  300.                           Lightbox
    301. 

  301.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    302. 

  302.                         </a>
    303. 

  303.                         <a class="dropdown-item" href="../tinymce.html">
    304. 

  304.                           TinyMCE
    305. 

  305.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    306. 

  306.                         </a>
    307. 

  307.                         <a class="dropdown-item" href="../inline-player.html">
    308. 

  308.                           Inline player
    309. 

  309.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    310. 

  310.                         </a>
    311. 

  311.                         <div class="dropend">
    312. 

  312.                           <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
    313. 

  313.                             Authentication
    314. 

  314.                           </a>
    315. 

  315.                           <div class="dropdown-menu">
    316. 

  316.                             <a href="../sign-in.html" class="dropdown-item">
    317. 

  317.                               Sign in
    318. 

  318.                             </a>
    319. 

  319.                             <a href="../sign-in-illustration.html" class="dropdown-item">
    320. 

  320.                               Sign in with illustration
    321. 

  321.                             </a>
    322. 

  322.                             <a href="../sign-in-cover.html" class="dropdown-item">
    323. 

  323.                               Sign in with cover
    324. 

  324.                             </a>
    325. 

  325.                             <a href="../sign-up.html" class="dropdown-item">
    326. 

  326.                               Sign up
    327. 

  327.                             </a>
    328. 

  328.                             <a href="../forgot-password.html" class="dropdown-item">
    329. 

  329.                               Forgot password
    330. 

  330.                             </a>
    331. 

  331.                             <a href="../terms-of-service.html" class="dropdown-item">
    332. 

  332.                               Terms of service
    333. 

  333.                             </a>
    334. 

  334.                             <a href="../auth-lock.html" class="dropdown-item">
    335. 

  335.                               Lock screen
    336. 

  336.                             </a>
    337. 

  337.                           </div>
    338. 

  338.                         </div>
    339. 

  339.                         <div class="dropend">
    340. 

  340.                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
    341. 

  341.                             <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
    342. 

  342.                             <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
    343. 

  343.                             Error pages
    344. 

  344.                           </a>
    345. 

  345.                           <div class="dropdown-menu">
    346. 

  346.                             <a href="../error-404.html" class="dropdown-item">
    347. 

  347.                               404 page
    348. 

  348.                             </a>
    349. 

  349.                             <a href="../error-500.html" class="dropdown-item">
    350. 

  350.                               500 page
    351. 

  351.                             </a>
    352. 

  352.                             <a href="../error-maintenance.html" class="dropdown-item">
    353. 

  353.                               Maintenance page
    354. 

  354.                             </a>
    355. 

  355.                           </div>
    356. 

  356.                         </div>
    357. 

  357.                       </div>
    358. 

  358.                     </div>
    359. 

  359.                   </div>
    360. 

  360.                 </li>
    361. 

  361.                 <li class="nav-item">
    362. 

  362.                   <a class="nav-link" href="../form-elements.html" >
    363. 

  363.                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
    364. 

  364.                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
    365. 

  365.                     </span>
    366. 

  366.                     <span class="nav-link-title">
    367. 

  367.                       Form elements
    368. 

  368.                     </span>
    369. 

  369.                   </a>
    370. 

  370.                 </li>
    371. 

  371.                 <li class="nav-item dropdown">
    372. 

  372.                   <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
    373. 

  373.                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
    374. 

  374.                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
    375. 

  375.                     </span>
    376. 

  376.                     <span class="nav-link-title">
    377. 

  377.                       Extra
    378. 

  378.                     </span>
    379. 

  379.                   </a>
    380. 

  380.                   <div class="dropdown-menu">
    381. 

  381.                     <div class="dropdown-menu-columns">
    382. 

  382.                       <div class="dropdown-menu-column">
    383. 

  383.                         <a class="dropdown-item" href="../activity.html">
    384. 

  384.                           Activity
    385. 

  385.                         </a>
    386. 

  386.                         <a class="dropdown-item" href="../gallery.html">
    387. 

  387.                           Gallery
    388. 

  388.                         </a>
    389. 

  389.                         <a class="dropdown-item" href="../invoice.html">
    390. 

  390.                           Invoice
    391. 

  391.                         </a>
    392. 

  392.                         <a class="dropdown-item" href="../search-results.html">
    393. 

  393.                           Search results
    394. 

  394.                         </a>
    395. 

  395.                         <a class="dropdown-item" href="../pricing.html">
    396. 

  396.                           Pricing cards
    397. 

  397.                         </a>
    398. 

  398.                         <a class="dropdown-item" href="../pricing-table.html">
    399. 

  399.                           Pricing table
    400. 

  400.                         </a>
    401. 

  401.                         <a class="dropdown-item" href="../faq.html">
    402. 

  402.                           FAQ
    403. 

  403.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    404. 

  404.                         </a>
    405. 

  405.                         <a class="dropdown-item" href="../users.html">
    406. 

  406.                           Users
    407. 

  407.                         </a>
    408. 

  408.                         <a class="dropdown-item" href="../license.html">
    409. 

  409.                           License
    410. 

  410.                         </a>
    411. 

  411.                       </div>
    412. 

  412.                       <div class="dropdown-menu-column">
    413. 

  413.                         <a class="dropdown-item" href="../logs.html">
    414. 

  414.                           Logs
    415. 

  415.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    416. 

  416.                         </a>
    417. 

  417.                         <a class="dropdown-item" href="../music.html">
    418. 

  418.                           Music
    419. 

  419.                         </a>
    420. 

  420.                         <a class="dropdown-item" href="../tasks.html">
    421. 

  421.                           Tasks
    422. 

  422.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    423. 

  423.                         </a>
    424. 

  424.                         <a class="dropdown-item" href="../uptime.html">
    425. 

  425.                           Uptime monitor
    426. 

  426.                         </a>
    427. 

  427.                         <a class="dropdown-item" href="../widgets.html">
    428. 

  428.                           Widgets
    429. 

  429.                         </a>
    430. 

  430.                         <a class="dropdown-item" href="../wizard.html">
    431. 

  431.                           Wizard
    432. 

  432.                         </a>
    433. 

  433.                         <a class="dropdown-item" href="../settings.html">
    434. 

  434.                           Settings
    435. 

  435.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    436. 

  436.                         </a>
    437. 

  437.                         <a class="dropdown-item" href="../job-listing.html">
    438. 

  438.                           Job listing
    439. 

  439.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    440. 

  440.                         </a>
    441. 

  441.                       </div>
    442. 

  442.                     </div>
    443. 

  443.                   </div>
    444. 

  444.                 </li>
    445. 

  445.                 <li class="nav-item dropdown">
    446. 

  446.                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
    447. 

  447.                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
    448. 

  448.                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
    449. 

  449.                     </span>
    450. 

  450.                     <span class="nav-link-title">
    451. 

  451.                       Layout
    452. 

  452.                     </span>
    453. 

  453.                   </a>
    454. 

  454.                   <div class="dropdown-menu">
    455. 

  455.                     <div class="dropdown-menu-columns">
    456. 

  456.                       <div class="dropdown-menu-column">
    457. 

  457.                         <a class="dropdown-item" href="../layout-horizontal.html">
    458. 

  458.                           Horizontal
    459. 

  459.                         </a>
    460. 

  460.                         <a class="dropdown-item" href="../layout-boxed.html">
    461. 

  461.                           Boxed
    462. 

  462.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    463. 

  463.                         </a>
    464. 

  464.                         <a class="dropdown-item" href="../layout-vertical.html">
    465. 

  465.                           Vertical
    466. 

  466.                         </a>
    467. 

  467.                         <a class="dropdown-item" href="../layout-vertical-transparent.html">
    468. 

  468.                           Vertical transparent
    469. 

  469.                         </a>
    470. 

  470.                         <a class="dropdown-item" href="../layout-vertical-right.html">
    471. 

  471.                           Right vertical
    472. 

  472.                         </a>
    473. 

  473.                         <a class="dropdown-item" href="../layout-condensed.html">
    474. 

  474.                           Condensed
    475. 

  475.                         </a>
    476. 

  476.                         <a class="dropdown-item" href="../layout-combo.html">
    477. 

  477.                           Combined
    478. 

  478.                         </a>
    479. 

  479.                       </div>
    480. 

  480.                       <div class="dropdown-menu-column">
    481. 

  481.                         <a class="dropdown-item" href="../layout-navbar-dark.html">
    482. 

  482.                           Navbar dark
    483. 

  483.                         </a>
    484. 

  484.                         <a class="dropdown-item" href="../layout-navbar-sticky.html">
    485. 

  485.                           Navbar sticky
    486. 

  486.                         </a>
    487. 

  487.                         <a class="dropdown-item" href="../layout-navbar-overlap.html">
    488. 

  488.                           Navbar overlap
    489. 

  489.                         </a>
    490. 

  490.                         <a class="dropdown-item" href="../layout-rtl.html">
    491. 

  491.                           RTL mode
    492. 

  492.                         </a>
    493. 

  493.                         <a class="dropdown-item" href="../layout-fluid.html">
    494. 

  494.                           Fluid
    495. 

  495.                         </a>
    496. 

  496.                         <a class="dropdown-item" href="../layout-fluid-vertical.html">
    497. 

  497.                           Fluid vertical
    498. 

  498.                         </a>
    499. 

  499.                       </div>
    500. 

  500.                     </div>
    501. 

  501.                   </div>
    502. 

  502.                 </li>
    503. 

  503.                 <li class="nav-item">
    504. 

  504.                   <a class="nav-link" href="../icons.html" >
    505. 

  505.                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
    506. 

  506.                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
    507. 

  507.                     </span>
    508. 

  508.                     <span class="nav-link-title">
    509. 

  509.                       2853 icons
    510. 

  510.                     </span>
    511. 

  511.                   </a>
    512. 

  512.                 </li>
    513. 

  513.                 <li class="nav-item active dropdown">
    514. 

  514.                   <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
    515. 

  515.                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
    516. 

  516.                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
    517. 

  517.                     </span>
    518. 

  518.                     <span class="nav-link-title">
    519. 

  519.                       Help
    520. 

  520.                     </span>
    521. 

  521.                   </a>
    522. 

  522.                   <div class="dropdown-menu">
    523. 

  523.                     <a class="dropdown-item" href="../docs/index.html">
    524. 

  524.                       Documentation
    525. 

  525.                     </a>
    526. 

  526.                     <a class="dropdown-item" href="../changelog.html">
    527. 

  527.                       Changelog
    528. 

  528.                     </a>
    529. 

  529.                     <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
    530. 

  530.                       Source code
    531. 

  531.                     </a>
    532. 

  532.                     <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
    533. 

  533.                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
    534. 

  534.                       <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
    535. 

  535.                       Sponsor project!
    536. 

  536.                     </a>
    537. 

  537.                   </div>
    538. 

  538.                 </li>
    539. 

  539.               </ul>
    540. 

  540.               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
    541. 

  541.                 <form action="../" method="get" autocomplete="off" novalidate>
    542. 

  542.                   <div class="input-icon">
    543. 

  543.                     <span class="input-icon-addon">
    544. 

  544.                       <!-- Download SVG icon from http://tabler-icons.io/i/search -->
    545. 

  545.                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
    546. 

  546.                     </span>
    547. 

  547.                     <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
    548. 

  548.                   </div>
    549. 

  549.                 </form>
    550. 

  550.               </div>
    551. 

  551.             </div>
    552. 

  552.           </div>
    553. 

  553.         </div>
    554. 

  554.       </div>
    555. 

  555.       <div class="page-wrapper">
    556. 

  556.         <!-- Page header -->
    557. 

  557.         <div class="page-header d-print-none">
    558. 

  558.           <div class="container-xl">
    559. 

  559.             <div class="row g-2 align-items-center">
    560. 

  560.               <div class="col">
    561. 

  561.                 <h2 class="page-title">
    562. 

  562.                   Documentation
    563. 

  563.                 </h2>
    564. 

  564.               </div>
    565. 

  565.             </div>
    566. 

  566.           </div>
    567. 

  567.         </div>
    568. 

  568.         <!-- Page body -->
    569. 

  569.         <div class="page-body">
    570. 

  570.           <div class="container-xl">
    571. 

  571.             <div class="row gx-lg-5">
    572. 

  572.               <div class="d-none d-lg-block col-lg-3">
    573. 

  573.                 <ul class="nav nav-pills nav-vertical">
    574. 

  574.                   <li class="nav-item">
    575. 

  575.                     <a href="../docs/" class="nav-link">
    576. 

  576.                       Introduction
    577. 

  577.                     </a>
    578. 

  578.                   </li>
    579. 

  579.                   <li class="nav-item">
    580. 

  580.                     <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
    581. 

  581.                       Getting started
    582. 

  582.                       <span class="nav-link-toggle"></span>
    583. 

  583.                     </a>
    584. 

  584.                     <ul class="nav nav-pills collapse" id="menu-base">
    585. 

  585.                       <li class="nav-item">
    586. 

  586.                         <a href="../docs/getting-started.html" class="nav-link">
    587. 

  587.                           Getting Started
    588. 

  588.                         </a>
    589. 

  589.                       </li>
    590. 

  590.                       <li class="nav-item">
    591. 

  591.                         <a href="../docs/download.html" class="nav-link">
    592. 

  592.                           Download
    593. 

  593.                         </a>
    594. 

  594.                       </li>
    595. 

  595.                       <li class="nav-item">
    596. 

  596.                         <a href="../docs/browser-support.html" class="nav-link">
    597. 

  597.                           Browser Support
    598. 

  598.                         </a>
    599. 

  599.                       </li>
    600. 

  600.                     </ul>
    601. 

  601.                   </li>
    602. 

  602.                   <li class="nav-item">
    603. 

  603.                     <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
    604. 

  604.                       Content
    605. 

  605.                       <span class="nav-link-toggle"></span>
    606. 

  606.                     </a>
    607. 

  607.                     <ul class="nav nav-pills collapse" id="menu-content">
    608. 

  608.                       <li class="nav-item">
    609. 

  609.                         <a href="../docs/colors.html" class="nav-link">
    610. 

  610.                           Colors
    611. 

  611.                         </a>
    612. 

  612.                       </li>
    613. 

  613.                       <li class="nav-item">
    614. 

  614.                         <a href="../docs/typography.html" class="nav-link">
    615. 

  615.                           Typography
    616. 

  616.                         </a>
    617. 

  617.                       </li>
    618. 

  618.                       <li class="nav-item">
    619. 

  619.                         <a href="../docs/icons.html" class="nav-link">
    620. 

  620.                           Icons
    621. 

  621.                         </a>
    622. 

  622.                       </li>
    623. 

  623.                       <li class="nav-item">
    624. 

  624.                         <a href="../docs/customize.html" class="nav-link">
    625. 

  625.                           Customize Tabler
    626. 

  626.                         </a>
    627. 

  627.                       </li>
    628. 

  628.                     </ul>
    629. 

  629.                   </li>
    630. 

  630.                   <li class="nav-item">
    631. 

  631.                     <a href="#menu-layout" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
    632. 

  632.                       Layout
    633. 

  633.                       <span class="nav-link-toggle"></span>
    634. 

  634.                     </a>
    635. 

  635.                     <ul class="nav nav-pills collapse" id="menu-layout">
    636. 

  636.                       <li class="nav-item">
    637. 

  637.                         <a href="../docs/page-headers.html" class="nav-link">
    638. 

  638.                           Page headers
    639. 

  639.                         </a>
    640. 

  640.                       </li>
    641. 

  641.                     </ul>
    642. 

  642.                   </li>
    643. 

  643.                   <li class="nav-item">
    644. 

  644.                     <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
    645. 

  645.                       Form components
    646. 

  646.                       <span class="nav-link-toggle"></span>
    647. 

  647.                     </a>
    648. 

  648.                     <ul class="nav nav-pills collapse" id="menu-forms">
    649. 

  649.                       <li class="nav-item">
    650. 

  650.                         <a href="../docs/form-elements.html" class="nav-link">
    651. 

  651.                           Form elements
    652. 

  652.                         </a>
    653. 

  653.                       </li>
    654. 

  654.                       <li class="nav-item">
    655. 

  655.                         <a href="../docs/form-helpers.html" class="nav-link">
    656. 

  656.                           Form helpers
    657. 

  657.                         </a>
    658. 

  658.                       </li>
    659. 

  659.                       <li class="nav-item">
    660. 

  660.                         <a href="../docs/form-validation.html" class="nav-link">
    661. 

  661.                           Validation states
    662. 

  662.                         </a>
    663. 

  663.                       </li>
    664. 

  664.                       <li class="nav-item">
    665. 

  665.                         <a href="../docs/form-image-check.html" class="nav-link">
    666. 

  666.                           Image check
    667. 

  667.                         </a>
    668. 

  668.                       </li>
    669. 

  669.                       <li class="nav-item">
    670. 

  670.                         <a href="../docs/form-color-check.html" class="nav-link">
    671. 

  671.                           Color check
    672. 

  672.                         </a>
    673. 

  673.                       </li>
    674. 

  674.                       <li class="nav-item">
    675. 

  675.                         <a href="../docs/form-selectboxes.html" class="nav-link">
    676. 

  676.                           Form selectboxes
    677. 

  677.                         </a>
    678. 

  678.                       </li>
    679. 

  679.                       <li class="nav-item">
    680. 

  680.                         <a href="../docs/form-fieldset.html" class="nav-link">
    681. 

  681.                           Form fieldset
    682. 

  682.                         </a>
    683. 

  683.                       </li>
    684. 

  684.                     </ul>
    685. 

  685.                   </li>
    686. 

  686.                   <li class="nav-item">
    687. 

  687.                     <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
    688. 

  688.                       Components
    689. 

  689.                       <span class="nav-link-toggle"></span>
    690. 

  690.                     </a>
    691. 

  691.                     <ul class="nav nav-pills collapse" id="menu-components">
    692. 

  692.                       <li class="nav-item">
    693. 

  693.                         <a href="../docs/alerts.html" class="nav-link">
    694. 

  694.                           Alerts
    695. 

  695.                         </a>
    696. 

  696.                       </li>
    697. 

  697.                       <li class="nav-item">
    698. 

  698.                         <a href="../docs/avatars.html" class="nav-link">
    699. 

  699.                           Avatars
    700. 

  700.                         </a>
    701. 

  701.                       </li>
    702. 

  702.                       <li class="nav-item">
    703. 

  703.                         <a href="../docs/badges.html" class="nav-link">
    704. 

  704.                           Badges
    705. 

  705.                         </a>
    706. 

  706.                       </li>
    707. 

  707.                       <li class="nav-item">
    708. 

  708.                         <a href="../docs/breadcrumb.html" class="nav-link">
    709. 

  709.                           Breadcrumb
    710. 

  710.                         </a>
    711. 

  711.                       </li>
    712. 

  712.                       <li class="nav-item">
    713. 

  713.                         <a href="../docs/buttons.html" class="nav-link">
    714. 

  714.                           Buttons
    715. 

  715.                         </a>
    716. 

  716.                       </li>
    717. 

  717.                       <li class="nav-item">
    718. 

  718.                         <a href="../docs/cards.html" class="nav-link">
    719. 

  719.                           Cards
    720. 

  720.                         </a>
    721. 

  721.                       </li>
    722. 

  722.                       <li class="nav-item">
    723. 

  723.                         <a href="../docs/carousel.html" class="nav-link">
    724. 

  724.                           Carousel
    725. 

  725.                         </a>
    726. 

  726.                       </li>
    727. 

  727.                       <li class="nav-item">
    728. 

  728.                         <a href="../docs/datagrid.html" class="nav-link">
    729. 

  729.                           Data grid
    730. 

  730.                         </a>
    731. 

  731.                       </li>
    732. 

  732.                       <li class="nav-item">
    733. 

  733.                         <a href="../docs/dropdowns.html" class="nav-link">
    734. 

  734.                           Dropdowns
    735. 

  735.                         </a>
    736. 

  736.                       </li>
    737. 

  737.                       <li class="nav-item">
    738. 

  738.                         <a href="../docs/divider.html" class="nav-link">
    739. 

  739.                           Divider
    740. 

  740.                         </a>
    741. 

  741.                       </li>
    742. 

  742.                       <li class="nav-item">
    743. 

  743.                         <a href="../docs/empty.html" class="nav-link">
    744. 

  744.                           Empty states
    745. 

  745.                         </a>
    746. 

  746.                       </li>
    747. 

  747.                       <li class="nav-item">
    748. 

  748.                         <a href="../docs/modals.html" class="nav-link">
    749. 

  749.                           Modals
    750. 

  750.                         </a>
    751. 

  751.                       </li>
    752. 

  752.                       <li class="nav-item">
    753. 

  753.                         <a href="../docs/page-headers.html" class="nav-link">
    754. 

  754.                           Page headers
    755. 

  755.                         </a>
    756. 

  756.                       </li>
    757. 

  757.                       <li class="nav-item">
    758. 

  758.                         <a href="../docs/progress.html" class="nav-link">
    759. 

  759.                           Progress
    760. 

  760.                         </a>
    761. 

  761.                       </li>
    762. 

  762.                       <li class="nav-item">
    763. 

  763.                         <a href="../docs/range-slider.html" class="nav-link">
    764. 

  764.                           Range slider
    765. 

  765.                         </a>
    766. 

  766.                       </li>
    767. 

  767.                       <li class="nav-item">
    768. 

  768.                         <a href="../docs/ribbons.html" class="nav-link">
    769. 

  769.                           Ribbons
    770. 

  770.                         </a>
    771. 

  771.                       </li>
    772. 

  772.                       <li class="nav-item">
    773. 

  773.                         <a href="../docs/placeholder.html" class="nav-link">
    774. 

  774.                           Placeholder
    775. 

  775.                         </a>
    776. 

  776.                       </li>
    777. 

  777.                       <li class="nav-item">
    778. 

  778.                         <a href="../docs/spinners.html" class="nav-link">
    779. 

  779.                           Spinners
    780. 

  780.                         </a>
    781. 

  781.                       </li>
    782. 

  782.                       <li class="nav-item">
    783. 

  783.                         <a href="../docs/statuses.html" class="nav-link">
    784. 

  784.                           Statuses
    785. 

  785.                         </a>
    786. 

  786.                       </li>
    787. 

  787.                       <li class="nav-item">
    788. 

  788.                         <a href="../docs/steps.html" class="nav-link">
    789. 

  789.                           Steps
    790. 

  790.                         </a>
    791. 

  791.                       </li>
    792. 

  792.                       <li class="nav-item">
    793. 

  793.                         <a href="../docs/switch-icon.html" class="nav-link">
    794. 

  794.                           Switch icon
    795. 

  795.                         </a>
    796. 

  796.                       </li>
    797. 

  797.                       <li class="nav-item">
    798. 

  798.                         <a href="../docs/tables.html" class="nav-link">
    799. 

  799.                           Tables
    800. 

  800.                         </a>
    801. 

  801.                       </li>
    802. 

  802.                       <li class="nav-item">
    803. 

  803.                         <a href="../docs/tabs.html" class="nav-link">
    804. 

  804.                           Tabs
    805. 

  805.                         </a>
    806. 

  806.                       </li>
    807. 

  807.                       <li class="nav-item">
    808. 

  808.                         <a href="../docs/timelines.html" class="nav-link">
    809. 

  809.                           Timelines
    810. 

  810.                         </a>
    811. 

  811.                       </li>
    812. 

  812.                       <li class="nav-item">
    813. 

  813.                         <a href="../docs/toasts.html" class="nav-link">
    814. 

  814.                           Toasts
    815. 

  815.                         </a>
    816. 

  816.                       </li>
    817. 

  817.                       <li class="nav-item">
    818. 

  818.                         <a href="../docs/tracking.html" class="nav-link">
    819. 

  819.                           Tracking
    820. 

  820.                         </a>
    821. 

  821.                       </li>
    822. 

  822.                       <li class="nav-item">
    823. 

  823.                         <a href="../docs/tooltips.html" class="nav-link">
    824. 

  824.                           Tooltips
    825. 

  825.                         </a>
    826. 

  826.                       </li>
    827. 

  827.                       <li class="nav-item">
    828. 

  828.                         <a href="../docs/popover.html" class="nav-link">
    829. 

  829.                           Popover
    830. 

  830.                         </a>
    831. 

  831.                       </li>
    832. 

  832.                     </ul>
    833. 

  833.                   </li>
    834. 

  834.                   <li class="nav-item">
    835. 

  835.                     <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
    836. 

  836.                       Utilities
    837. 

  837.                       <span class="nav-link-toggle"></span>
    838. 

  838.                     </a>
    839. 

  839.                     <ul class="nav nav-pills collapse" id="menu-utils">
    840. 

  840.                       <li class="nav-item">
    841. 

  841.                         <a href="../docs/borders.html" class="nav-link">
    842. 

  842.                           Borders
    843. 

  843.                         </a>
    844. 

  844.                       </li>
    845. 

  845.                       <li class="nav-item">
    846. 

  846.                         <a href="../docs/cursors.html" class="nav-link">
    847. 

  847.                           Cursors
    848. 

  848.                         </a>
    849. 

  849.                       </li>
    850. 

  850.                       <li class="nav-item">
    851. 

  851.                         <a href="../docs/interactions.html" class="nav-link">
    852. 

  852.                           Interactions
    853. 

  853.                         </a>
    854. 

  854.                       </li>
    855. 

  855.                     </ul>
    856. 

  856.                   </li>
    857. 

  857.                   <li class="nav-item">
    858. 

  858.                     <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
    859. 

  859.                       Plugins
    860. 

  860.                       <span class="nav-link-toggle"></span>
    861. 

  861.                     </a>
    862. 

  862.                     <ul class="nav nav-pills collapse" id="menu-plugins">
    863. 

  863.                       <li class="nav-item">
    864. 

  864.                         <a href="../docs/autosize.html" class="nav-link">
    865. 

  865.                           Autosize
    866. 

  866.                         </a>
    867. 

  867.                       </li>
    868. 

  868.                       <li class="nav-item">
    869. 

  869.                         <a href="../docs/input-mask.html" class="nav-link">
    870. 

  870.                           Form input mask
    871. 

  871.                         </a>
    872. 

  872.                       </li>
    873. 

  873.                       <li class="nav-item">
    874. 

  874.                         <a href="../docs/flags.html" class="nav-link">
    875. 

  875.                           Flags
    876. 

  876.                         </a>
    877. 

  877.                       </li>
    878. 

  878.                       <li class="nav-item">
    879. 

  879.                         <a href="../docs/payments.html" class="nav-link">
    880. 

  880.                           Payments
    881. 

  881.                         </a>
    882. 

  882.                       </li>
    883. 

  883.                       <li class="nav-item">
    884. 

  884.                         <a href="../docs/charts.html" class="nav-link">
    885. 

  885.                           Charts
    886. 

  886.                         </a>
    887. 

  887.                       </li>
    888. 

  888.                       <li class="nav-item">
    889. 

  889.                         <a href="../docs/dropzone.html" class="nav-link">
    890. 

  890.                           Dropzone
    891. 

  891.                         </a>
    892. 

  892.                       </li>
    893. 

  893.                       <li class="nav-item">
    894. 

  894.                         <a href="../docs/inline-player.html" class="nav-link">
    895. 

  895.                           Inline player
    896. 

  896.                         </a>
    897. 

  897.                       </li>
    898. 

  898.                       <li class="nav-item">
    899. 

  899.                         <a href="../docs/tinymce.html" class="nav-link">
    900. 

  900.                           TinyMCE
    901. 

  901.                         </a>
    902. 

  902.                       </li>
    903. 

  903.                     </ul>
    904. 

  904.                   </li>
    905. 

  905.                   <li class="nav-item">
    906. 

  906.                     <a href="../changelog.html" class="nav-link">
    907. 

  907.                       Changelog
    908. 

  908.                       <span class="badge bg-primary-lt ms-auto">1.0.0-beta14</span>
    909. 

  909.                     </a>
    910. 

  910.                   </li>
    911. 

  911.                 </ul>
    912. 

  912.               </div>
    913. 

  913.               <div class="col-lg-9">
    914. 

  914.                 <div class="card card-lg">
    915. 

  915.                   <div class="card-body">
    916. 

  916.                     <div class="markdown">
    917. 

  917.                       <div>
    918. 

  918.                         <div class="d-flex mb-3">
    919. 

  919.                           <h1 class="m-0">Alerts</h1>
    920. 

  920.                           <p class="ms-auto">
    921. 

  921.                             <a href="https://getbootstrap.com/docs/5.0/components/alerts/" target="_blank" class="d-flex align-items-center">
    922. 

  922.                               <!-- Download SVG icon from http://tabler-icons.io/i/external-link -->
    923. 

  923.                               <svg xmlns="http://www.w3.org/2000/svg" class="icon pe-1 text-primary" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
    924. 

  924.                               Bootstrap documentation
    925. 

  925.                             </a>
    926. 

  926.                           </p>
    927. 

  927.                         </div>
    928. 

  928.                         <p class="h3 fw-normal mb-4 text-muted">Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app.</p>
    929. 

  929.                       </div>
    930. 

  930.                       <h2 id="default-markup">Default markup</h2>
    931. 

  931.                       <p>Depending on the information you need to convey, you can use one of the following types of alert messages - <strong>success</strong>, <strong>info</strong>, <strong>warning</strong> or <strong>danger</strong>. Using the right type of alert modal will help draw users’ attention to the message and prompt them to take action.</p>
    932. 

  932.                       <div class="example no_toc_section">
    933. 

  933.                         <div class="example-content">
    934. 

  934.                           <div class="alert alert-success" role="alert">
    935. 

  935.                             <h4 class="alert-title">Wow! Everything worked!</h4>
    936. 

  936.                             <div class="text-muted">Your account has been saved!</div>
    937. 

  937.                           </div>
    938. 

  938.                           <div class="alert alert-info" role="alert">
    939. 

  939.                             <h4 class="alert-title">Did you know?</h4>
    940. 

  940.                             <div class="text-muted">Here is something that you might like to know.</div>
    941. 

  941.                           </div>
    942. 

  942.                           <div class="alert alert-warning" role="alert">
    943. 

  943.                             <h4 class="alert-title">Uh oh, something went wrong</h4>
    944. 

  944.                             <div class="text-muted">Sorry! There was a problem with your request.</div>
    945. 

  945.                           </div>
    946. 

  946.                           <div class="alert alert-danger" role="alert">
    947. 

  947.                             <h4 class="alert-title">I'm so sorry&hellip;</h4>
    948. 

  948.                             <div class="text-muted">Your account has been deleted and can't be restored.</div>
    949. 

  949.                           </div>
    950. 

  950.                         </div>
    951. 

  951.                       </div>
    952. 

  952.                       <div class="example-code">
    953. 

  953.                         <figure class="highlight">
    954. 

  954.                           <pre><code class="language-html" data-lang="html"><span class="nt">&lt;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">&gt;</span>
    955. 

  955.   <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>Wow! Everything worked!<span class="nt">&lt;/h4&gt;</span>
    956. 

  956.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Your account has been saved!<span class="nt">&lt;/div&gt;</span>
    957. 

  957. <span class="nt">&lt;/div&gt;</span>
    958. 

  958. <span class="nt">&lt;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">&gt;</span>
    959. 

  959.   <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>Did you know?<span class="nt">&lt;/h4&gt;</span>
    960. 

  960.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Here is something that you might like to know.<span class="nt">&lt;/div&gt;</span>
    961. 

  961. <span class="nt">&lt;/div&gt;</span>
    962. 

  962. <span class="nt">&lt;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">&gt;</span>
    963. 

  963.   <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>Uh oh, something went wrong<span class="nt">&lt;/h4&gt;</span>
    964. 

  964.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Sorry! There was a problem with your request.<span class="nt">&lt;/div&gt;</span>
    965. 

  965. <span class="nt">&lt;/div&gt;</span>
    966. 

  966. <span class="nt">&lt;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">&gt;</span>
    967. 

  967.   <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>I'm so sorry<span class="ni">&amp;hellip;</span><span class="nt">&lt;/h4&gt;</span>
    968. 

  968.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Your account has been deleted and can't be restored.<span class="nt">&lt;/div&gt;</span>
    969. 

  969. <span class="nt">&lt;/div&gt;</span></code></pre>
    970. 

  970.                         </figure>
    971. 

  971.                       </div>
    972. 

  972.                       <h2 id="alert-links">Alert links</h2>
    973. 

  973.                       <p>Add a link to your alert message to redirect users to the details they need to complete or additional information they should read.</p>
    974. 

  974.                       <div class="example no_toc_section">
    975. 

  975.                         <div class="example-content">
    976. 

  976.                           <div class="alert alert-success" role="alert">
    977. 

  977.                             This is a success alert — <a href="javascript:void(0)" class="alert-link">check it out</a>!
    978. 

  978.                           </div>
    979. 

  979.                           <div class="alert alert-info" role="alert">
    980. 

  980.                             This is a info alert — <a href="javascript:void(0)" class="alert-link">check it out</a>!
    981. 

  981.                           </div>
    982. 

  982.                           <div class="alert alert-warning" role="alert">
    983. 

  983.                             This is a warning alert — <a href="javascript:void(0)" class="alert-link">check it out</a>!
    984. 

  984.                           </div>
    985. 

  985.                           <div class="alert alert-danger" role="alert">
    986. 

  986.                             This is a danger alert — <a href="javascript:void(0)" class="alert-link">check it out</a>!
    987. 

  987.                           </div>
    988. 

  988.                         </div>
    989. 

  989.                       </div>
    990. 

  990.                       <div class="example-code">
    991. 

  991.                         <figure class="highlight">
    992. 

  992.                           <pre><code class="language-html" data-lang="html"><span class="nt">&lt;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">&gt;</span>
    993. 

  993.   This is a success alert — <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">&gt;</span>check it out<span class="nt">&lt;/a&gt;</span>!
    994. 

  994. <span class="nt">&lt;/div&gt;</span>
    995. 

  995. <span class="nt">&lt;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">&gt;</span>
    996. 

  996.   This is a info alert — <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">&gt;</span>check it out<span class="nt">&lt;/a&gt;</span>!
    997. 

  997. <span class="nt">&lt;/div&gt;</span>
    998. 

  998. <span class="nt">&lt;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">&gt;</span>
    999. 

  999.   This is a warning alert — <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">&gt;</span>check it out<span class="nt">&lt;/a&gt;</span>!
    1000. 

  1000. <span class="nt">&lt;/div&gt;</span>
    1001. 

  1001. <span class="nt">&lt;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">&gt;</span>
    1002. 

  1002.   This is a danger alert — <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"alert-link"</span><span class="nt">&gt;</span>check it out<span class="nt">&lt;/a&gt;</span>!
    1003. 

  1003. <span class="nt">&lt;/div&gt;</span></code></pre>
    1004. 

  1004.                         </figure>
    1005. 

  1005.                       </div>
    1006. 

  1006.                       <h2 id="dismissible-alerts">Dismissible alerts</h2>
    1007. 

  1007.                       <p>Add the <code class="language-plaintext highlighter-rouge">x</code> close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it.</p>
    1008. 

  1008.                       <div class="example no_toc_section">
    1009. 

  1009.                         <div class="example-content">
    1010. 

  1010.                           <div class="alert alert-success alert-dismissible" role="alert">
    1011. 

  1011.                             <div class="d-flex">
    1012. 

  1012.                               <div>
    1013. 

  1013.                                 <!-- Download SVG icon from http://tabler-icons.io/i/check -->
    1014. 

  1014.                                 <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M5 12l5 5l10 -10" /></svg>
    1015. 

  1015.                               </div>
    1016. 

  1016.                               <div>
    1017. 

  1017.                                 <h4 class="alert-title">Wow! Everything worked!</h4>
    1018. 

  1018.                                 <div class="text-muted">Your account has been saved!</div>
    1019. 

  1019.                               </div>
    1020. 

  1020.                             </div>
    1021. 

  1021.                             <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
    1022. 

  1022.                           </div>
    1023. 

  1023.                           <div class="alert alert-info alert-dismissible" role="alert">
    1024. 

  1024.                             <div class="d-flex">
    1025. 

  1025.                               <div>
    1026. 

  1026.                                 <!-- Download SVG icon from http://tabler-icons.io/i/info-circle -->
    1027. 

  1027.                                 <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /><line x1="12" y1="8" x2="12.01" y2="8" /><polyline points="11 12 12 12 12 16 13 16" /></svg>
    1028. 

  1028.                               </div>
    1029. 

  1029.                               <div>
    1030. 

  1030.                                 <h4 class="alert-title">Did you know?</h4>
    1031. 

  1031.                                 <div class="text-muted">Here is something that you might like to know.</div>
    1032. 

  1032.                               </div>
    1033. 

  1033.                             </div>
    1034. 

  1034.                             <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
    1035. 

  1035.                           </div>
    1036. 

  1036.                           <div class="alert alert-warning alert-dismissible" role="alert">
    1037. 

  1037.                             <div class="d-flex">
    1038. 

  1038.                               <div>
    1039. 

  1039.                                 <!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle -->
    1040. 

  1040.                                 <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 9v2m0 4v.01" /><path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" /></svg>
    1041. 

  1041.                               </div>
    1042. 

  1042.                               <div>
    1043. 

  1043.                                 <h4 class="alert-title">Uh oh, something went wrong</h4>
    1044. 

  1044.                                 <div class="text-muted">Sorry! There was a problem with your request.</div>
    1045. 

  1045.                               </div>
    1046. 

  1046.                             </div>
    1047. 

  1047.                             <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
    1048. 

  1048.                           </div>
    1049. 

  1049.                           <div class="alert alert-danger alert-dismissible" role="alert">
    1050. 

  1050.                             <div class="d-flex">
    1051. 

  1051.                               <div>
    1052. 

  1052.                                 <!-- Download SVG icon from http://tabler-icons.io/i/alert-circle -->
    1053. 

  1053.                                 <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" /></svg>
    1054. 

  1054.                               </div>
    1055. 

  1055.                               <div>
    1056. 

  1056.                                 <h4 class="alert-title">I'm so sorry&hellip;</h4>
    1057. 

  1057.                                 <div class="text-muted">Your account has been deleted and can't be restored.</div>
    1058. 

  1058.                               </div>
    1059. 

  1059.                             </div>
    1060. 

  1060.                             <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
    1061. 

  1061.                           </div>
    1062. 

  1062.                         </div>
    1063. 

  1063.                       </div>
    1064. 

  1064.                       <div class="example-code">
    1065. 

  1065.                         <figure class="highlight">
    1066. 

  1066.                           <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
    1067. 

  1067.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
    1068. 

  1068.     <span class="nt">&lt;div&gt;</span>
    1069. 

  1069.       <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/check --&gt;</span>
    1070. 

  1070.       <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon alert-icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M5 12l5 5l10 -10"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1071. 

  1071.     <span class="nt">&lt;/div&gt;</span>
    1072. 

  1072.     <span class="nt">&lt;div&gt;</span>
    1073. 

  1073.       <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>Wow! Everything worked!<span class="nt">&lt;/h4&gt;</span>
    1074. 

  1074.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Your account has been saved!<span class="nt">&lt;/div&gt;</span>
    1075. 

  1075.     <span class="nt">&lt;/div&gt;</span>
    1076. 

  1076.   <span class="nt">&lt;/div&gt;</span>
    1077. 

  1077.   <span class="nt">&lt;a</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">&gt;&lt;/a&gt;</span>
    1078. 

  1078. <span class="nt">&lt;/div&gt;</span>
    1079. 

  1079. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-info alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
    1080. 

  1080.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
    1081. 

  1081.     <span class="nt">&lt;div&gt;</span>
    1082. 

  1082.       <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/info-circle --&gt;</span>
    1083. 

  1083.       <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon alert-icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"12"</span> <span class="na">cy=</span><span class="s">"12"</span> <span class="na">r=</span><span class="s">"9"</span> <span class="nt">/&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"8"</span> <span class="na">x2=</span><span class="s">"12.01"</span> <span class="na">y2=</span><span class="s">"8"</span> <span class="nt">/&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"11 12 12 12 12 16 13 16"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1084. 

  1084.     <span class="nt">&lt;/div&gt;</span>
    1085. 

  1085.     <span class="nt">&lt;div&gt;</span>
    1086. 

  1086.       <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>Did you know?<span class="nt">&lt;/h4&gt;</span>
    1087. 

  1087.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Here is something that you might like to know.<span class="nt">&lt;/div&gt;</span>
    1088. 

  1088.     <span class="nt">&lt;/div&gt;</span>
    1089. 

  1089.   <span class="nt">&lt;/div&gt;</span>
    1090. 

  1090.   <span class="nt">&lt;a</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">&gt;&lt;/a&gt;</span>
    1091. 

  1091. <span class="nt">&lt;/div&gt;</span>
    1092. 

  1092. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
    1093. 

  1093.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
    1094. 

  1094.     <span class="nt">&lt;div&gt;</span>
    1095. 

  1095.       <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle --&gt;</span>
    1096. 

  1096.       <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon alert-icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M12 9v2m0 4v.01"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1097. 

  1097.     <span class="nt">&lt;/div&gt;</span>
    1098. 

  1098.     <span class="nt">&lt;div&gt;</span>
    1099. 

  1099.       <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>Uh oh, something went wrong<span class="nt">&lt;/h4&gt;</span>
    1100. 

  1100.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Sorry! There was a problem with your request.<span class="nt">&lt;/div&gt;</span>
    1101. 

  1101.     <span class="nt">&lt;/div&gt;</span>
    1102. 

  1102.   <span class="nt">&lt;/div&gt;</span>
    1103. 

  1103.   <span class="nt">&lt;a</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">&gt;&lt;/a&gt;</span>
    1104. 

  1104. <span class="nt">&lt;/div&gt;</span>
    1105. 

  1105. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
    1106. 

  1106.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
    1107. 

  1107.     <span class="nt">&lt;div&gt;</span>
    1108. 

  1108.       <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/alert-circle --&gt;</span>
    1109. 

  1109.       <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon alert-icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"12"</span> <span class="na">cy=</span><span class="s">"12"</span> <span class="na">r=</span><span class="s">"9"</span> <span class="nt">/&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"8"</span> <span class="na">x2=</span><span class="s">"12"</span> <span class="na">y2=</span><span class="s">"12"</span> <span class="nt">/&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"16"</span> <span class="na">x2=</span><span class="s">"12.01"</span> <span class="na">y2=</span><span class="s">"16"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1110. 

  1110.     <span class="nt">&lt;/div&gt;</span>
    1111. 

  1111.     <span class="nt">&lt;div&gt;</span>
    1112. 

  1112.       <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>I'm so sorry<span class="ni">&amp;hellip;</span><span class="nt">&lt;/h4&gt;</span>
    1113. 

  1113.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Your account has been deleted and can't be restored.<span class="nt">&lt;/div&gt;</span>
    1114. 

  1114.     <span class="nt">&lt;/div&gt;</span>
    1115. 

  1115.   <span class="nt">&lt;/div&gt;</span>
    1116. 

  1116.   <span class="nt">&lt;a</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">&gt;&lt;/a&gt;</span>
    1117. 

  1117. <span class="nt">&lt;/div&gt;</span></code></pre>
    1118. 

  1118.                         </figure>
    1119. 

  1119.                       </div>
    1120. 

  1120.                       <h2 id="alerts-with-icons">Alerts with icons</h2>
    1121. 

  1121.                       <p>Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.</p>
    1122. 

  1122.                       <div class="example no_toc_section">
    1123. 

  1123.                         <div class="example-content">
    1124. 

  1124.                           <div class="alert alert-success" role="alert">
    1125. 

  1125.                             <div class="d-flex">
    1126. 

  1126.                               <div>
    1127. 

  1127.                                 <!-- Download SVG icon from http://tabler-icons.io/i/check -->
    1128. 

  1128.                                 <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M5 12l5 5l10 -10" /></svg>
    1129. 

  1129.                               </div>
    1130. 

  1130.                               <div>
    1131. 

  1131.                                 <h4 class="alert-title">Wow! Everything worked!</h4>
    1132. 

  1132.                                 <div class="text-muted">Your account has been saved!</div>
    1133. 

  1133.                               </div>
    1134. 

  1134.                             </div>
    1135. 

  1135.                           </div>
    1136. 

  1136.                           <div class="alert alert-info" role="alert">
    1137. 

  1137.                             <div class="d-flex">
    1138. 

  1138.                               <div>
    1139. 

  1139.                                 <!-- Download SVG icon from http://tabler-icons.io/i/info-circle -->
    1140. 

  1140.                                 <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /><line x1="12" y1="8" x2="12.01" y2="8" /><polyline points="11 12 12 12 12 16 13 16" /></svg>
    1141. 

  1141.                               </div>
    1142. 

  1142.                               <div>
    1143. 

  1143.                                 <h4 class="alert-title">Did you know?</h4>
    1144. 

  1144.                                 <div class="text-muted">Here is something that you might like to know.</div>
    1145. 

  1145.                               </div>
    1146. 

  1146.                             </div>
    1147. 

  1147.                           </div>
    1148. 

  1148.                           <div class="alert alert-warning" role="alert">
    1149. 

  1149.                             <div class="d-flex">
    1150. 

  1150.                               <div>
    1151. 

  1151.                                 <!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle -->
    1152. 

  1152.                                 <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 9v2m0 4v.01" /><path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" /></svg>
    1153. 

  1153.                               </div>
    1154. 

  1154.                               <div>
    1155. 

  1155.                                 <h4 class="alert-title">Uh oh, something went wrong</h4>
    1156. 

  1156.                                 <div class="text-muted">Sorry! There was a problem with your request.</div>
    1157. 

  1157.                               </div>
    1158. 

  1158.                             </div>
    1159. 

  1159.                           </div>
    1160. 

  1160.                           <div class="alert alert-danger" role="alert">
    1161. 

  1161.                             <div class="d-flex">
    1162. 

  1162.                               <div>
    1163. 

  1163.                                 <!-- Download SVG icon from http://tabler-icons.io/i/alert-circle -->
    1164. 

  1164.                                 <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" /></svg>
    1165. 

  1165.                               </div>
    1166. 

  1166.                               <div>
    1167. 

  1167.                                 <h4 class="alert-title">I'm so sorry&hellip;</h4>
    1168. 

  1168.                                 <div class="text-muted">Your account has been deleted and can't be restored.</div>
    1169. 

  1169.                               </div>
    1170. 

  1170.                             </div>
    1171. 

  1171.                           </div>
    1172. 

  1172.                         </div>
    1173. 

  1173.                       </div>
    1174. 

  1174.                       <div class="example-code">
    1175. 

  1175.                         <figure class="highlight">
    1176. 

  1176.                           <pre><code class="language-html" data-lang="html"><span class="nt">&lt;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">&gt;</span>
    1177. 

  1177.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
    1178. 

  1178.     <span class="nt">&lt;div&gt;</span>
    1179. 

  1179.       <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/check --&gt;</span>
    1180. 

  1180.       <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon alert-icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M5 12l5 5l10 -10"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1181. 

  1181.     <span class="nt">&lt;/div&gt;</span>
    1182. 

  1182.     <span class="nt">&lt;div&gt;</span>
    1183. 

  1183.       <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>Wow! Everything worked!<span class="nt">&lt;/h4&gt;</span>
    1184. 

  1184.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Your account has been saved!<span class="nt">&lt;/div&gt;</span>
    1185. 

  1185.     <span class="nt">&lt;/div&gt;</span>
    1186. 

  1186.   <span class="nt">&lt;/div&gt;</span>
    1187. 

  1187. <span class="nt">&lt;/div&gt;</span>
    1188. 

  1188. <span class="nt">&lt;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">&gt;</span>
    1189. 

  1189.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
    1190. 

  1190.     <span class="nt">&lt;div&gt;</span>
    1191. 

  1191.       <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/info-circle --&gt;</span>
    1192. 

  1192.       <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon alert-icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"12"</span> <span class="na">cy=</span><span class="s">"12"</span> <span class="na">r=</span><span class="s">"9"</span> <span class="nt">/&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"8"</span> <span class="na">x2=</span><span class="s">"12.01"</span> <span class="na">y2=</span><span class="s">"8"</span> <span class="nt">/&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"11 12 12 12 12 16 13 16"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1193. 

  1193.     <span class="nt">&lt;/div&gt;</span>
    1194. 

  1194.     <span class="nt">&lt;div&gt;</span>
    1195. 

  1195.       <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>Did you know?<span class="nt">&lt;/h4&gt;</span>
    1196. 

  1196.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Here is something that you might like to know.<span class="nt">&lt;/div&gt;</span>
    1197. 

  1197.     <span class="nt">&lt;/div&gt;</span>
    1198. 

  1198.   <span class="nt">&lt;/div&gt;</span>
    1199. 

  1199. <span class="nt">&lt;/div&gt;</span>
    1200. 

  1200. <span class="nt">&lt;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">&gt;</span>
    1201. 

  1201.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
    1202. 

  1202.     <span class="nt">&lt;div&gt;</span>
    1203. 

  1203.       <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle --&gt;</span>
    1204. 

  1204.       <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon alert-icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M12 9v2m0 4v.01"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1205. 

  1205.     <span class="nt">&lt;/div&gt;</span>
    1206. 

  1206.     <span class="nt">&lt;div&gt;</span>
    1207. 

  1207.       <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>Uh oh, something went wrong<span class="nt">&lt;/h4&gt;</span>
    1208. 

  1208.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Sorry! There was a problem with your request.<span class="nt">&lt;/div&gt;</span>
    1209. 

  1209.     <span class="nt">&lt;/div&gt;</span>
    1210. 

  1210.   <span class="nt">&lt;/div&gt;</span>
    1211. 

  1211. <span class="nt">&lt;/div&gt;</span>
    1212. 

  1212. <span class="nt">&lt;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">&gt;</span>
    1213. 

  1213.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
    1214. 

  1214.     <span class="nt">&lt;div&gt;</span>
    1215. 

  1215.       <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/alert-circle --&gt;</span>
    1216. 

  1216.       <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon alert-icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"12"</span> <span class="na">cy=</span><span class="s">"12"</span> <span class="na">r=</span><span class="s">"9"</span> <span class="nt">/&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"8"</span> <span class="na">x2=</span><span class="s">"12"</span> <span class="na">y2=</span><span class="s">"12"</span> <span class="nt">/&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"16"</span> <span class="na">x2=</span><span class="s">"12.01"</span> <span class="na">y2=</span><span class="s">"16"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1217. 

  1217.     <span class="nt">&lt;/div&gt;</span>
    1218. 

  1218.     <span class="nt">&lt;div&gt;</span>
    1219. 

  1219.       <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>I'm so sorry<span class="ni">&amp;hellip;</span><span class="nt">&lt;/h4&gt;</span>
    1220. 

  1220.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Your account has been deleted and can't be restored.<span class="nt">&lt;/div&gt;</span>
    1221. 

  1221.     <span class="nt">&lt;/div&gt;</span>
    1222. 

  1222.   <span class="nt">&lt;/div&gt;</span>
    1223. 

  1223. <span class="nt">&lt;/div&gt;</span></code></pre>
    1224. 

  1224.                         </figure>
    1225. 

  1225.                       </div>
    1226. 

  1226.                       <h2 id="alert-with-avatar">Alert with avatar</h2>
    1227. 

  1227.                       <p>Add an avatar to your alert modal to make it more personalized.</p>
    1228. 

  1228.                       <div class="example no_toc_section">
    1229. 

  1229.                         <div class="example-content">
    1230. 

  1230.                           <div class="alert alert-success" role="alert">
    1231. 

  1231.                             <div class="d-flex">
    1232. 

  1232.                               <div>
    1233. 

  1233.                                 <span class="avatar float-start me-3" style="background-image: url(../static/avatars/000m.jpg)"></span>
    1234. 

  1234.                               </div>
    1235. 

  1235.                               <div>
    1236. 

  1236.                                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    1237. 

  1237.                               </div>
    1238. 

  1238.                             </div>
    1239. 

  1239.                           </div>
    1240. 

  1240.                           <div class="alert alert-info" role="alert">
    1241. 

  1241.                             <div class="d-flex">
    1242. 

  1242.                               <div>
    1243. 

  1243.                                 <span class="avatar float-start me-3">JL</span>
    1244. 

  1244.                               </div>
    1245. 

  1245.                               <div>
    1246. 

  1246.                                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    1247. 

  1247.                               </div>
    1248. 

  1248.                             </div>
    1249. 

  1249.                           </div>
    1250. 

  1250.                           <div class="alert alert-warning" role="alert">
    1251. 

  1251.                             <div class="d-flex">
    1252. 

  1252.                               <div>
    1253. 

  1253.                                 <span class="avatar float-start me-3" style="background-image: url(../static/avatars/002m.jpg)"></span>
    1254. 

  1254.                               </div>
    1255. 

  1255.                               <div>
    1256. 

  1256.                                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    1257. 

  1257.                               </div>
    1258. 

  1258.                             </div>
    1259. 

  1259.                           </div>
    1260. 

  1260.                           <div class="alert alert-danger" role="alert">
    1261. 

  1261.                             <div class="d-flex">
    1262. 

  1262.                               <div>
    1263. 

  1263.                                 <span class="avatar float-start me-3" style="background-image: url(../static/avatars/003m.jpg)"></span>
    1264. 

  1264.                               </div>
    1265. 

  1265.                               <div>
    1266. 

  1266.                                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    1267. 

  1267.                               </div>
    1268. 

  1268.                             </div>
    1269. 

  1269.                           </div>
    1270. 

  1270.                         </div>
    1271. 

  1271.                       </div>
    1272. 

  1272.                       <div class="example-code">
    1273. 

  1273.                         <figure class="highlight">
    1274. 

  1274.                           <pre><code class="language-html" data-lang="html"><span class="nt">&lt;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">&gt;</span>
    1275. 

  1275.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
    1276. 

  1276.     <span class="nt">&lt;div&gt;</span>
    1277. 

  1277.       <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar float-start me-3"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
    1278. 

  1278.     <span class="nt">&lt;/div&gt;</span>
    1279. 

  1279.     <span class="nt">&lt;div&gt;</span>
    1280. 

  1280.       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    1281. 

  1281.     <span class="nt">&lt;/div&gt;</span>
    1282. 

  1282.   <span class="nt">&lt;/div&gt;</span>
    1283. 

  1283. <span class="nt">&lt;/div&gt;</span>
    1284. 

  1284. <span class="nt">&lt;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">&gt;</span>
    1285. 

  1285.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
    1286. 

  1286.     <span class="nt">&lt;div&gt;</span>
    1287. 

  1287.       <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar float-start me-3"</span><span class="nt">&gt;</span>JL<span class="nt">&lt;/span&gt;</span>
    1288. 

  1288.     <span class="nt">&lt;/div&gt;</span>
    1289. 

  1289.     <span class="nt">&lt;div&gt;</span>
    1290. 

  1290.       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    1291. 

  1291.     <span class="nt">&lt;/div&gt;</span>
    1292. 

  1292.   <span class="nt">&lt;/div&gt;</span>
    1293. 

  1293. <span class="nt">&lt;/div&gt;</span>
    1294. 

  1294. <span class="nt">&lt;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">&gt;</span>
    1295. 

  1295.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
    1296. 

  1296.     <span class="nt">&lt;div&gt;</span>
    1297. 

  1297.       <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar float-start me-3"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
    1298. 

  1298.     <span class="nt">&lt;/div&gt;</span>
    1299. 

  1299.     <span class="nt">&lt;div&gt;</span>
    1300. 

  1300.       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    1301. 

  1301.     <span class="nt">&lt;/div&gt;</span>
    1302. 

  1302.   <span class="nt">&lt;/div&gt;</span>
    1303. 

  1303. <span class="nt">&lt;/div&gt;</span>
    1304. 

  1304. <span class="nt">&lt;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">&gt;</span>
    1305. 

  1305.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
    1306. 

  1306.     <span class="nt">&lt;div&gt;</span>
    1307. 

  1307.       <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar float-start me-3"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
    1308. 

  1308.     <span class="nt">&lt;/div&gt;</span>
    1309. 

  1309.     <span class="nt">&lt;div&gt;</span>
    1310. 

  1310.       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    1311. 

  1311.     <span class="nt">&lt;/div&gt;</span>
    1312. 

  1312.   <span class="nt">&lt;/div&gt;</span>
    1313. 

  1313. <span class="nt">&lt;/div&gt;</span></code></pre>
    1314. 

  1314.                         </figure>
    1315. 

  1315.                       </div>
    1316. 

  1316.                       <h2 id="alert-with-buttons">Alert with buttons</h2>
    1317. 

  1317.                       <p>Add primary and secondary buttons to your alert modals if you want users to take a particular action based on the information included in the modal message.</p>
    1318. 

  1318.                       <div class="example no_toc_section">
    1319. 

  1319.                         <div class="example-content">
    1320. 

  1320.                           <div class="alert alert-success alert-dismissible" role="alert">
    1321. 

  1321.                             <h3 class="mb-1">Some Title</h3>
    1322. 

  1322.                             <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
    1323. 

  1323.                             <div class="btn-list">
    1324. 

  1324.                               <a href="javascript:void(0)" class="btn btn-success">Okay</a>
    1325. 

  1325.                               <a href="javascript:void(0)" class="btn">Cancel</a>
    1326. 

  1326.                             </div>
    1327. 

  1327.                             <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
    1328. 

  1328.                           </div>
    1329. 

  1329.                           <div class="alert alert-info alert-dismissible" role="alert">
    1330. 

  1330.                             <h3 class="mb-1">Some Title</h3>
    1331. 

  1331.                             <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
    1332. 

  1332.                             <div class="btn-list">
    1333. 

  1333.                               <a href="javascript:void(0)" class="btn btn-info">Okay</a>
    1334. 

  1334.                               <a href="javascript:void(0)" class="btn">Cancel</a>
    1335. 

  1335.                             </div>
    1336. 

  1336.                             <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
    1337. 

  1337.                           </div>
    1338. 

  1338.                           <div class="alert alert-warning alert-dismissible" role="alert">
    1339. 

  1339.                             <h3 class="mb-1">Some Title</h3>
    1340. 

  1340.                             <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
    1341. 

  1341.                             <div class="btn-list">
    1342. 

  1342.                               <a href="javascript:void(0)" class="btn btn-warning">Okay</a>
    1343. 

  1343.                               <a href="javascript:void(0)" class="btn">Cancel</a>
    1344. 

  1344.                             </div>
    1345. 

  1345.                             <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
    1346. 

  1346.                           </div>
    1347. 

  1347.                           <div class="alert alert-danger alert-dismissible" role="alert">
    1348. 

  1348.                             <h3 class="mb-1">Some Title</h3>
    1349. 

  1349.                             <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
    1350. 

  1350.                             <div class="btn-list">
    1351. 

  1351.                               <a href="javascript:void(0)" class="btn btn-danger">Okay</a>
    1352. 

  1352.                               <a href="javascript:void(0)" class="btn">Cancel</a>
    1353. 

  1353.                             </div>
    1354. 

  1354.                             <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
    1355. 

  1355.                           </div>
    1356. 

  1356.                         </div>
    1357. 

  1357.                       </div>
    1358. 

  1358.                       <div class="example-code">
    1359. 

  1359.                         <figure class="highlight">
    1360. 

  1360.                           <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
    1361. 

  1361.   <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"mb-1"</span><span class="nt">&gt;</span>Some Title<span class="nt">&lt;/h3&gt;</span>
    1362. 

  1362.   <span class="nt">&lt;p&gt;</span>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.<span class="nt">&lt;/p&gt;</span>
    1363. 

  1363.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
    1364. 

  1364.     <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">&gt;</span>Okay<span class="nt">&lt;/a&gt;</span>
    1365. 

  1365.     <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/a&gt;</span>
    1366. 

  1366.   <span class="nt">&lt;/div&gt;</span>
    1367. 

  1367.   <span class="nt">&lt;a</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">&gt;&lt;/a&gt;</span>
    1368. 

  1368. <span class="nt">&lt;/div&gt;</span>
    1369. 

  1369. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-info alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
    1370. 

  1370.   <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"mb-1"</span><span class="nt">&gt;</span>Some Title<span class="nt">&lt;/h3&gt;</span>
    1371. 

  1371.   <span class="nt">&lt;p&gt;</span>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.<span class="nt">&lt;/p&gt;</span>
    1372. 

  1372.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
    1373. 

  1373.     <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-info"</span><span class="nt">&gt;</span>Okay<span class="nt">&lt;/a&gt;</span>
    1374. 

  1374.     <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/a&gt;</span>
    1375. 

  1375.   <span class="nt">&lt;/div&gt;</span>
    1376. 

  1376.   <span class="nt">&lt;a</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">&gt;&lt;/a&gt;</span>
    1377. 

  1377. <span class="nt">&lt;/div&gt;</span>
    1378. 

  1378. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
    1379. 

  1379.   <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"mb-1"</span><span class="nt">&gt;</span>Some Title<span class="nt">&lt;/h3&gt;</span>
    1380. 

  1380.   <span class="nt">&lt;p&gt;</span>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.<span class="nt">&lt;/p&gt;</span>
    1381. 

  1381.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
    1382. 

  1382.     <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">&gt;</span>Okay<span class="nt">&lt;/a&gt;</span>
    1383. 

  1383.     <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/a&gt;</span>
    1384. 

  1384.   <span class="nt">&lt;/div&gt;</span>
    1385. 

  1385.   <span class="nt">&lt;a</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">&gt;&lt;/a&gt;</span>
    1386. 

  1386. <span class="nt">&lt;/div&gt;</span>
    1387. 

  1387. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
    1388. 

  1388.   <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"mb-1"</span><span class="nt">&gt;</span>Some Title<span class="nt">&lt;/h3&gt;</span>
    1389. 

  1389.   <span class="nt">&lt;p&gt;</span>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.<span class="nt">&lt;/p&gt;</span>
    1390. 

  1390.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
    1391. 

  1391.     <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">&gt;</span>Okay<span class="nt">&lt;/a&gt;</span>
    1392. 

  1392.     <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/a&gt;</span>
    1393. 

  1393.   <span class="nt">&lt;/div&gt;</span>
    1394. 

  1394.   <span class="nt">&lt;a</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">&gt;&lt;/a&gt;</span>
    1395. 

  1395. <span class="nt">&lt;/div&gt;</span></code></pre>
    1396. 

  1396.                         </figure>
    1397. 

  1397.                       </div>
    1398. 

  1398.                       <h2 id="important-alerts">Important alerts</h2>
    1399. 

  1399.                       <p>If you want your alert to be really eye-catching, you can add a class <code class="language-plaintext highlighter-rouge">alert-important</code>.</p>
    1400. 

  1400.                       <div class="example no_toc_section">
    1401. 

  1401.                         <div class="example-content">
    1402. 

  1402.                           <div class="alert alert-important alert-success alert-dismissible" role="alert">
    1403. 

  1403.                             <div class="d-flex">
    1404. 

  1404.                               <div>
    1405. 

  1405.                                 <!-- Download SVG icon from http://tabler-icons.io/i/check -->
    1406. 

  1406.                                 <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M5 12l5 5l10 -10" /></svg>
    1407. 

  1407.                               </div>
    1408. 

  1408.                               <div>
    1409. 

  1409.                                 Your account has been saved!
    1410. 

  1410.                               </div>
    1411. 

  1411.                             </div>
    1412. 

  1412.                             <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
    1413. 

  1413.                           </div>
    1414. 

  1414.                           <div class="alert alert-important alert-info alert-dismissible" role="alert">
    1415. 

  1415.                             <div class="d-flex">
    1416. 

  1416.                               <div>
    1417. 

  1417.                                 <!-- Download SVG icon from http://tabler-icons.io/i/info-circle -->
    1418. 

  1418.                                 <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /><line x1="12" y1="8" x2="12.01" y2="8" /><polyline points="11 12 12 12 12 16 13 16" /></svg>
    1419. 

  1419.                               </div>
    1420. 

  1420.                               <div>
    1421. 

  1421.                                 Here is something that you might like to know.
    1422. 

  1422.                               </div>
    1423. 

  1423.                             </div>
    1424. 

  1424.                             <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
    1425. 

  1425.                           </div>
    1426. 

  1426.                           <div class="alert alert-important alert-warning alert-dismissible" role="alert">
    1427. 

  1427.                             <div class="d-flex">
    1428. 

  1428.                               <div>
    1429. 

  1429.                                 <!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle -->
    1430. 

  1430.                                 <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 9v2m0 4v.01" /><path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" /></svg>
    1431. 

  1431.                               </div>
    1432. 

  1432.                               <div>
    1433. 

  1433.                                 Sorry! There was a problem with your request.
    1434. 

  1434.                               </div>
    1435. 

  1435.                             </div>
    1436. 

  1436.                             <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
    1437. 

  1437.                           </div>
    1438. 

  1438.                           <div class="alert alert-important alert-danger alert-dismissible" role="alert">
    1439. 

  1439.                             <div class="d-flex">
    1440. 

  1440.                               <div>
    1441. 

  1441.                                 <!-- Download SVG icon from http://tabler-icons.io/i/alert-circle -->
    1442. 

  1442.                                 <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" /></svg>
    1443. 

  1443.                               </div>
    1444. 

  1444.                               <div>
    1445. 

  1445.                                 Your account has been deleted and can't be restored.
    1446. 

  1446.                               </div>
    1447. 

  1447.                             </div>
    1448. 

  1448.                             <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
    1449. 

  1449.                           </div>
    1450. 

  1450.                         </div>
    1451. 

  1451.                       </div>
    1452. 

  1452.                       <div class="example-code">
    1453. 

  1453.                         <figure class="highlight">
    1454. 

  1454.                           <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-important alert-success alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
    1455. 

  1455.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
    1456. 

  1456.     <span class="nt">&lt;div&gt;</span>
    1457. 

  1457.       <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/check --&gt;</span>
    1458. 

  1458.       <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon alert-icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M5 12l5 5l10 -10"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1459. 

  1459.     <span class="nt">&lt;/div&gt;</span>
    1460. 

  1460.     <span class="nt">&lt;div&gt;</span>
    1461. 

  1461.       Your account has been saved!
    1462. 

  1462.     <span class="nt">&lt;/div&gt;</span>
    1463. 

  1463.   <span class="nt">&lt;/div&gt;</span>
    1464. 

  1464.   <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn-close btn-close-white"</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">&gt;&lt;/a&gt;</span>
    1465. 

  1465. <span class="nt">&lt;/div&gt;</span>
    1466. 

  1466. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-important alert-info alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
    1467. 

  1467.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
    1468. 

  1468.     <span class="nt">&lt;div&gt;</span>
    1469. 

  1469.       <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/info-circle --&gt;</span>
    1470. 

  1470.       <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon alert-icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"12"</span> <span class="na">cy=</span><span class="s">"12"</span> <span class="na">r=</span><span class="s">"9"</span> <span class="nt">/&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"8"</span> <span class="na">x2=</span><span class="s">"12.01"</span> <span class="na">y2=</span><span class="s">"8"</span> <span class="nt">/&gt;&lt;polyline</span> <span class="na">points=</span><span class="s">"11 12 12 12 12 16 13 16"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1471. 

  1471.     <span class="nt">&lt;/div&gt;</span>
    1472. 

  1472.     <span class="nt">&lt;div&gt;</span>
    1473. 

  1473.       Here is something that you might like to know.
    1474. 

  1474.     <span class="nt">&lt;/div&gt;</span>
    1475. 

  1475.   <span class="nt">&lt;/div&gt;</span>
    1476. 

  1476.   <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn-close btn-close-white"</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">&gt;&lt;/a&gt;</span>
    1477. 

  1477. <span class="nt">&lt;/div&gt;</span>
    1478. 

  1478. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-important alert-warning alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
    1479. 

  1479.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
    1480. 

  1480.     <span class="nt">&lt;div&gt;</span>
    1481. 

  1481.       <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle --&gt;</span>
    1482. 

  1482.       <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon alert-icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M12 9v2m0 4v.01"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1483. 

  1483.     <span class="nt">&lt;/div&gt;</span>
    1484. 

  1484.     <span class="nt">&lt;div&gt;</span>
    1485. 

  1485.       Sorry! There was a problem with your request.
    1486. 

  1486.     <span class="nt">&lt;/div&gt;</span>
    1487. 

  1487.   <span class="nt">&lt;/div&gt;</span>
    1488. 

  1488.   <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn-close btn-close-white"</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">&gt;&lt;/a&gt;</span>
    1489. 

  1489. <span class="nt">&lt;/div&gt;</span>
    1490. 

  1490. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-important alert-danger alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
    1491. 

  1491.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
    1492. 

  1492.     <span class="nt">&lt;div&gt;</span>
    1493. 

  1493.       <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/alert-circle --&gt;</span>
    1494. 

  1494.       <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon alert-icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;circle</span> <span class="na">cx=</span><span class="s">"12"</span> <span class="na">cy=</span><span class="s">"12"</span> <span class="na">r=</span><span class="s">"9"</span> <span class="nt">/&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"8"</span> <span class="na">x2=</span><span class="s">"12"</span> <span class="na">y2=</span><span class="s">"12"</span> <span class="nt">/&gt;&lt;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"16"</span> <span class="na">x2=</span><span class="s">"12.01"</span> <span class="na">y2=</span><span class="s">"16"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1495. 

  1495.     <span class="nt">&lt;/div&gt;</span>
    1496. 

  1496.     <span class="nt">&lt;div&gt;</span>
    1497. 

  1497.       Your account has been deleted and can't be restored.
    1498. 

  1498.     <span class="nt">&lt;/div&gt;</span>
    1499. 

  1499.   <span class="nt">&lt;/div&gt;</span>
    1500. 

  1500.   <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn-close btn-close-white"</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">&gt;&lt;/a&gt;</span>
    1501. 

  1501. <span class="nt">&lt;/div&gt;</span></code></pre>
    1502. 

  1502.                         </figure>
    1503. 

  1503.                       </div>
    1504. 

  1504.                     </div>
    1505. 

  1505.                   </div>
    1506. 

  1506.                 </div>
    1507. 

  1507.               </div>
    1508. 

  1508.             </div>
    1509. 

  1509.           </div>
    1510. 

  1510.         </div>
    1511. 

  1511.         <footer class="footer footer-transparent d-print-none">
    1512. 

  1512.           <div class="container-xl">
    1513. 

  1513.             <div class="row text-center align-items-center flex-row-reverse">
    1514. 

  1514.               <div class="col-lg-auto ms-lg-auto">
    1515. 

  1515.                 <ul class="list-inline list-inline-dots mb-0">
    1516. 

  1516.                   <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
    1517. 

  1517.                   <li class="list-inline-item"><a href="../license.html" class="link-secondary">License</a></li>
    1518. 

  1518.                   <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
    1519. 

  1519.                   <li class="list-inline-item">
    1520. 

  1520.                     <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
    1521. 

  1521.                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
    1522. 

  1522.                       <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
    1523. 

  1523.                       Sponsor
    1524. 

  1524.                     </a>
    1525. 

  1525.                   </li>
    1526. 

  1526.                 </ul>
    1527. 

  1527.               </div>
    1528. 

  1528.               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
    1529. 

  1529.                 <ul class="list-inline list-inline-dots mb-0">
    1530. 

  1530.                   <li class="list-inline-item">
    1531. 

  1531.                     Copyright &copy; 2022
    1532. 

  1532.                     <a href=".." class="link-secondary">Tabler</a>.
    1533. 

  1533.                     All rights reserved.
    1534. 

  1534.                   </li>
    1535. 

  1535.                   <li class="list-inline-item">
    1536. 

  1536.                     <a href="../changelog.html" class="link-secondary" rel="noopener">
    1537. 

  1537.                       v1.0.0-beta14
    1538. 

  1538.                     </a>
    1539. 

  1539.                   </li>
    1540. 

  1540.                 </ul>
    1541. 

  1541.               </div>
    1542. 

  1542.             </div>
    1543. 

  1543.           </div>
    1544. 

  1544.         </footer>
    1545. 

  1545.       </div>
    1546. 

  1546.     </div>
    1547. 

  1547.     <!-- Libs JS -->
    1548. 

  1548.     <!-- Tabler Core -->
    1549. 

  1549.     <script src="../dist/js/tabler.min.js?1666304673" defer></script>
    1550. 

  1550.     <script src="../dist/js/demo.min.js?1666304673" defer></script>
    1551. 

  1551.   </body>
    1552. 

  1552. </html>
    1553.