Home Explore Help
Sign In
SMusatov
/
tabler
mirror of https://github.com/tabler/tabler.git
1
0
Fork 0
Files
Tree: 4b3d7f84a1
Branches Tags
tabler
/
demo
/
docs
/
tabs.html

tabs.html 119 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464 
  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>Tabs - 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">Tabs</h1>
    920. 

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

  921.                             <a href="https://getbootstrap.com/docs/5.0/components/navs/" 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">Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organization and make it easy for users to navigate.</p>
    929. 

  929.                       </div>
    930. 

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

  931.                       <p>Use tabs to let users access different sections within one context quickly and with ease. In the default design, the current tab is highlighted, which makes the interface clear and user-friendly.</p>
    932. 

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

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

  934.                           <div class="example-column example-column-1">
    935. 

  935.                             <div class="card">
    936. 

  936.                               <div class="card-header">
    937. 

  937.                                 <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
    938. 

  938.                                   <li class="nav-item">
    939. 

  939.                                     <a href="#tabs-home-ex1" class="nav-link active" data-bs-toggle="tab">Home</a>
    940. 

  940.                                   </li>
    941. 

  941.                                   <li class="nav-item">
    942. 

  942.                                     <a href="#tabs-profile-ex1" class="nav-link" data-bs-toggle="tab">Profile</a>
    943. 

  943.                                   </li>
    944. 

  944.                                 </ul>
    945. 

  945.                               </div>
    946. 

  946.                               <div class="card-body">
    947. 

  947.                                 <div class="tab-content">
    948. 

  948.                                   <div class="tab-pane active show" id="tabs-home-ex1">
    949. 

  949.                                     <h4>Home tab</h4>
    950. 

  950.                                     <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
    951. 

  951.                                   </div>
    952. 

  952.                                   <div class="tab-pane" id="tabs-profile-ex1">
    953. 

  953.                                     <h4>Profile tab</h4>
    954. 

  954.                                     <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
    955. 

  955.                                   </div>
    956. 

  956.                                 </div>
    957. 

  957.                               </div>
    958. 

  958.                             </div>
    959. 

  959.                           </div>
    960. 

  960.                         </div>
    961. 

  961.                       </div>
    962. 

  962.                       <div class="example-code">
    963. 

  963.                         <figure class="highlight">
    964. 

  964.                           <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    965. 

  965.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
    966. 

  966.     <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs card-header-tabs"</span> <span class="na">data-bs-toggle=</span><span class="s">"tabs"</span><span class="nt">&gt;</span>
    967. 

  967.       <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    968. 

  968.         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-home-ex1"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;</span>
    969. 

  969.       <span class="nt">&lt;/li&gt;</span>
    970. 

  970.       <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    971. 

  971.         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-profile-ex1"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Profile<span class="nt">&lt;/a&gt;</span>
    972. 

  972.       <span class="nt">&lt;/li&gt;</span>
    973. 

  973.     <span class="nt">&lt;/ul&gt;</span>
    974. 

  974.   <span class="nt">&lt;/div&gt;</span>
    975. 

  975.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    976. 

  976.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">&gt;</span>
    977. 

  977.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane active show"</span> <span class="na">id=</span><span class="s">"tabs-home-ex1"</span><span class="nt">&gt;</span>
    978. 

  978.         <span class="nt">&lt;h4&gt;</span>Home tab<span class="nt">&lt;/h4&gt;</span>
    979. 

  979.         <span class="nt">&lt;div&gt;</span>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh<span class="nt">&lt;/div&gt;</span>
    980. 

  980.       <span class="nt">&lt;/div&gt;</span>
    981. 

  981.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"tabs-profile-ex1"</span><span class="nt">&gt;</span>
    982. 

  982.         <span class="nt">&lt;h4&gt;</span>Profile tab<span class="nt">&lt;/h4&gt;</span>
    983. 

  983.         <span class="nt">&lt;div&gt;</span>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed<span class="nt">&lt;/div&gt;</span>
    984. 

  984.       <span class="nt">&lt;/div&gt;</span>
    985. 

  985.     <span class="nt">&lt;/div&gt;</span>
    986. 

  986.   <span class="nt">&lt;/div&gt;</span>
    987. 

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

  988.                         </figure>
    989. 

  989.                       </div>
    990. 

  990.                       <h2 id="tabs-with-icons">Tabs with icons</h2>
    991. 

  991.                       <p>Add icons to your tab labels, if you want to use a visual element and make the tab content easier to identify.</p>
    992. 

  992.                       <div class="example no_toc_section example-bg">
    993. 

  993.                         <div class="example-content">
    994. 

  994.                           <div class="example-column example-column-1">
    995. 

  995.                             <div class="card">
    996. 

  996.                               <div class="card-header">
    997. 

  997.                                 <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
    998. 

  998.                                   <li class="nav-item">
    999. 

  999.                                     <a href="#tabs-home-ex2" class="nav-link active" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
    1000. 

  1000.                                       <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" 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>
    1001. 

  1001.                                       Home</a>
    1002. 

  1002.                                   </li>
    1003. 

  1003.                                   <li class="nav-item">
    1004. 

  1004.                                     <a href="#tabs-profile-ex2" class="nav-link" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/user -->
    1005. 

  1005.                                       <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" 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="7" r="4" /><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /></svg>
    1006. 

  1006.                                       Profile</a>
    1007. 

  1007.                                   </li>
    1008. 

  1008.                                   <li class="nav-item ms-auto">
    1009. 

  1009.                                     <a href="#tabs-settings-ex2" class="nav-link" title="Settings" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/settings -->
    1010. 

  1010.                                       <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.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
    1011. 

  1011.                                     </a>
    1012. 

  1012.                                   </li>
    1013. 

  1013.                                 </ul>
    1014. 

  1014.                               </div>
    1015. 

  1015.                               <div class="card-body">
    1016. 

  1016.                                 <div class="tab-content">
    1017. 

  1017.                                   <div class="tab-pane active show" id="tabs-home-ex2">
    1018. 

  1018.                                     <h4>Home tab</h4>
    1019. 

  1019.                                     <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
    1020. 

  1020.                                   </div>
    1021. 

  1021.                                   <div class="tab-pane" id="tabs-profile-ex2">
    1022. 

  1022.                                     <h4>Profile tab</h4>
    1023. 

  1023.                                     <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
    1024. 

  1024.                                   </div>
    1025. 

  1025.                                   <div class="tab-pane" id="tabs-settings-ex2">
    1026. 

  1026.                                     <h4>Settings tab</h4>
    1027. 

  1027.                                     <div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
    1028. 

  1028.                                   </div>
    1029. 

  1029.                                 </div>
    1030. 

  1030.                               </div>
    1031. 

  1031.                             </div>
    1032. 

  1032.                           </div>
    1033. 

  1033.                         </div>
    1034. 

  1034.                       </div>
    1035. 

  1035.                       <div class="example-code">
    1036. 

  1036.                         <figure class="highlight">
    1037. 

  1037.                           <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    1038. 

  1038.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
    1039. 

  1039.     <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs card-header-tabs"</span> <span class="na">data-bs-toggle=</span><span class="s">"tabs"</span><span class="nt">&gt;</span>
    1040. 

  1040.       <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    1041. 

  1041.         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-home-ex2"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/home --&gt;</span>
    1042. 

  1042.           <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 me-2"</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;polyline</span> <span class="na">points=</span><span class="s">"5 12 3 12 12 3 21 12 19 12"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1043. 

  1043.           Home<span class="nt">&lt;/a&gt;</span>
    1044. 

  1044.       <span class="nt">&lt;/li&gt;</span>
    1045. 

  1045.       <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    1046. 

  1046.         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-profile-ex2"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/user --&gt;</span>
    1047. 

  1047.           <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 me-2"</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">"7"</span> <span class="na">r=</span><span class="s">"4"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1048. 

  1048.           Profile<span class="nt">&lt;/a&gt;</span>
    1049. 

  1049.       <span class="nt">&lt;/li&gt;</span>
    1050. 

  1050.       <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item ms-auto"</span><span class="nt">&gt;</span>
    1051. 

  1051.         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-settings-ex2"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">title=</span><span class="s">"Settings"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/settings --&gt;</span>
    1052. 

  1052.           <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"</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">"M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"</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">"3"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1053. 

  1053.         <span class="nt">&lt;/a&gt;</span>
    1054. 

  1054.       <span class="nt">&lt;/li&gt;</span>
    1055. 

  1055.     <span class="nt">&lt;/ul&gt;</span>
    1056. 

  1056.   <span class="nt">&lt;/div&gt;</span>
    1057. 

  1057.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    1058. 

  1058.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">&gt;</span>
    1059. 

  1059.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane active show"</span> <span class="na">id=</span><span class="s">"tabs-home-ex2"</span><span class="nt">&gt;</span>
    1060. 

  1060.         <span class="nt">&lt;h4&gt;</span>Home tab<span class="nt">&lt;/h4&gt;</span>
    1061. 

  1061.         <span class="nt">&lt;div&gt;</span>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh<span class="nt">&lt;/div&gt;</span>
    1062. 

  1062.       <span class="nt">&lt;/div&gt;</span>
    1063. 

  1063.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"tabs-profile-ex2"</span><span class="nt">&gt;</span>
    1064. 

  1064.         <span class="nt">&lt;h4&gt;</span>Profile tab<span class="nt">&lt;/h4&gt;</span>
    1065. 

  1065.         <span class="nt">&lt;div&gt;</span>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed<span class="nt">&lt;/div&gt;</span>
    1066. 

  1066.       <span class="nt">&lt;/div&gt;</span>
    1067. 

  1067.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"tabs-settings-ex2"</span><span class="nt">&gt;</span>
    1068. 

  1068.         <span class="nt">&lt;h4&gt;</span>Settings tab<span class="nt">&lt;/h4&gt;</span>
    1069. 

  1069.         <span class="nt">&lt;div&gt;</span>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus<span class="nt">&lt;/div&gt;</span>
    1070. 

  1070.       <span class="nt">&lt;/div&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;/div&gt;</span></code></pre>
    1074. 

  1074.                         </figure>
    1075. 

  1075.                       </div>
    1076. 

  1076.                       <h2 id="tabs-only-with-icons">Tabs only with icons</h2>
    1077. 

  1077.                       <p>Use tabs without label names to save space and make the tab content easy to recognize for international users.</p>
    1078. 

  1078.                       <div class="example no_toc_section example-bg">
    1079. 

  1079.                         <div class="example-content">
    1080. 

  1080.                           <div class="example-column example-column-1">
    1081. 

  1081.                             <div class="card">
    1082. 

  1082.                               <div class="card-header">
    1083. 

  1083.                                 <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
    1084. 

  1084.                                   <li class="nav-item">
    1085. 

  1085.                                     <a href="#tabs-home-ex3" class="nav-link active" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
    1086. 

  1086.                                       <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>
    1087. 

  1087.                                     </a>
    1088. 

  1088.                                   </li>
    1089. 

  1089.                                   <li class="nav-item">
    1090. 

  1090.                                     <a href="#tabs-profile-ex3" class="nav-link" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/user -->
    1091. 

  1091.                                       <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="7" r="4" /><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /></svg>
    1092. 

  1092.                                     </a>
    1093. 

  1093.                                   </li>
    1094. 

  1094.                                   <li class="nav-item ms-auto">
    1095. 

  1095.                                     <a href="#tabs-settings-ex3" class="nav-link" title="Settings" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/settings -->
    1096. 

  1096.                                       <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.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
    1097. 

  1097.                                     </a>
    1098. 

  1098.                                   </li>
    1099. 

  1099.                                 </ul>
    1100. 

  1100.                               </div>
    1101. 

  1101.                               <div class="card-body">
    1102. 

  1102.                                 <div class="tab-content">
    1103. 

  1103.                                   <div class="tab-pane active show" id="tabs-home-ex3">
    1104. 

  1104.                                     <h4>Home tab</h4>
    1105. 

  1105.                                     <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
    1106. 

  1106.                                   </div>
    1107. 

  1107.                                   <div class="tab-pane" id="tabs-profile-ex3">
    1108. 

  1108.                                     <h4>Profile tab</h4>
    1109. 

  1109.                                     <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
    1110. 

  1110.                                   </div>
    1111. 

  1111.                                   <div class="tab-pane" id="tabs-settings-ex3">
    1112. 

  1112.                                     <h4>Settings tab</h4>
    1113. 

  1113.                                     <div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
    1114. 

  1114.                                   </div>
    1115. 

  1115.                                 </div>
    1116. 

  1116.                               </div>
    1117. 

  1117.                             </div>
    1118. 

  1118.                           </div>
    1119. 

  1119.                         </div>
    1120. 

  1120.                       </div>
    1121. 

  1121.                       <div class="example-code">
    1122. 

  1122.                         <figure class="highlight">
    1123. 

  1123.                           <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    1124. 

  1124.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
    1125. 

  1125.     <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs card-header-tabs"</span> <span class="na">data-bs-toggle=</span><span class="s">"tabs"</span><span class="nt">&gt;</span>
    1126. 

  1126.       <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    1127. 

  1127.         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-home-ex3"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/home --&gt;</span>
    1128. 

  1128.           <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 "</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;polyline</span> <span class="na">points=</span><span class="s">"5 12 3 12 12 3 21 12 19 12"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1129. 

  1129.         <span class="nt">&lt;/a&gt;</span>
    1130. 

  1130.       <span class="nt">&lt;/li&gt;</span>
    1131. 

  1131.       <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    1132. 

  1132.         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-profile-ex3"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/user --&gt;</span>
    1133. 

  1133.           <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 "</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">"7"</span> <span class="na">r=</span><span class="s">"4"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1134. 

  1134.         <span class="nt">&lt;/a&gt;</span>
    1135. 

  1135.       <span class="nt">&lt;/li&gt;</span>
    1136. 

  1136.       <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item ms-auto"</span><span class="nt">&gt;</span>
    1137. 

  1137.         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-settings-ex3"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">title=</span><span class="s">"Settings"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/settings --&gt;</span>
    1138. 

  1138.           <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"</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">"M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"</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">"3"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1139. 

  1139.         <span class="nt">&lt;/a&gt;</span>
    1140. 

  1140.       <span class="nt">&lt;/li&gt;</span>
    1141. 

  1141.     <span class="nt">&lt;/ul&gt;</span>
    1142. 

  1142.   <span class="nt">&lt;/div&gt;</span>
    1143. 

  1143.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    1144. 

  1144.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">&gt;</span>
    1145. 

  1145.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane active show"</span> <span class="na">id=</span><span class="s">"tabs-home-ex3"</span><span class="nt">&gt;</span>
    1146. 

  1146.         <span class="nt">&lt;h4&gt;</span>Home tab<span class="nt">&lt;/h4&gt;</span>
    1147. 

  1147.         <span class="nt">&lt;div&gt;</span>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh<span class="nt">&lt;/div&gt;</span>
    1148. 

  1148.       <span class="nt">&lt;/div&gt;</span>
    1149. 

  1149.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"tabs-profile-ex3"</span><span class="nt">&gt;</span>
    1150. 

  1150.         <span class="nt">&lt;h4&gt;</span>Profile tab<span class="nt">&lt;/h4&gt;</span>
    1151. 

  1151.         <span class="nt">&lt;div&gt;</span>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed<span class="nt">&lt;/div&gt;</span>
    1152. 

  1152.       <span class="nt">&lt;/div&gt;</span>
    1153. 

  1153.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"tabs-settings-ex3"</span><span class="nt">&gt;</span>
    1154. 

  1154.         <span class="nt">&lt;h4&gt;</span>Settings tab<span class="nt">&lt;/h4&gt;</span>
    1155. 

  1155.         <span class="nt">&lt;div&gt;</span>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus<span class="nt">&lt;/div&gt;</span>
    1156. 

  1156.       <span class="nt">&lt;/div&gt;</span>
    1157. 

  1157.     <span class="nt">&lt;/div&gt;</span>
    1158. 

  1158.   <span class="nt">&lt;/div&gt;</span>
    1159. 

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

  1160.                         </figure>
    1161. 

  1161.                       </div>
    1162. 

  1162.                       <h2 id="tabs-with-dropdown">Tabs with dropdown</h2>
    1163. 

  1163.                       <p>Make one or more of your tabs into a dropdown to add more options within one element.</p>
    1164. 

  1164.                       <div class="example no_toc_section example-bg">
    1165. 

  1165.                         <div class="example-content">
    1166. 

  1166.                           <div class="example-column example-column-1">
    1167. 

  1167.                             <div class="card">
    1168. 

  1168.                               <div class="card-header">
    1169. 

  1169.                                 <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
    1170. 

  1170.                                   <li class="nav-item">
    1171. 

  1171.                                     <a href="#tabs-home-ex4" class="nav-link active" data-bs-toggle="tab">Home</a>
    1172. 

  1172.                                   </li>
    1173. 

  1173.                                   <li class="nav-item">
    1174. 

  1174.                                     <a href="#tabs-profile-ex4" class="nav-link" data-bs-toggle="tab">Profile</a>
    1175. 

  1175.                                   </li>
    1176. 

  1176.                                   <li class="nav-item dropdown">
    1177. 

  1177.                                     <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    1178. 

  1178.                                     <div class="dropdown-menu">
    1179. 

  1179.                                       <a class="dropdown-item" href="javascript:void(0)">
    1180. 

  1180.                                         Action
    1181. 

  1181.                                       </a>
    1182. 

  1182.                                       <a class="dropdown-item" href="javascript:void(0)">
    1183. 

  1183.                                         Another action
    1184. 

  1184.                                       </a>
    1185. 

  1185.                                     </div>
    1186. 

  1186.                                   </li>
    1187. 

  1187.                                 </ul>
    1188. 

  1188.                               </div>
    1189. 

  1189.                               <div class="card-body">
    1190. 

  1190.                                 <div class="tab-content">
    1191. 

  1191.                                   <div class="tab-pane active show" id="tabs-home-ex4">
    1192. 

  1192.                                     <h4>Home tab</h4>
    1193. 

  1193.                                     <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
    1194. 

  1194.                                   </div>
    1195. 

  1195.                                   <div class="tab-pane" id="tabs-profile-ex4">
    1196. 

  1196.                                     <h4>Profile tab</h4>
    1197. 

  1197.                                     <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
    1198. 

  1198.                                   </div>
    1199. 

  1199.                                 </div>
    1200. 

  1200.                               </div>
    1201. 

  1201.                             </div>
    1202. 

  1202.                           </div>
    1203. 

  1203.                         </div>
    1204. 

  1204.                       </div>
    1205. 

  1205.                       <div class="example-code">
    1206. 

  1206.                         <figure class="highlight">
    1207. 

  1207.                           <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    1208. 

  1208.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
    1209. 

  1209.     <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs card-header-tabs"</span> <span class="na">data-bs-toggle=</span><span class="s">"tabs"</span><span class="nt">&gt;</span>
    1210. 

  1210.       <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    1211. 

  1211.         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-home-ex4"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;</span>
    1212. 

  1212.       <span class="nt">&lt;/li&gt;</span>
    1213. 

  1213.       <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    1214. 

  1214.         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-profile-ex4"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Profile<span class="nt">&lt;/a&gt;</span>
    1215. 

  1215.       <span class="nt">&lt;/li&gt;</span>
    1216. 

  1216.       <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item dropdown"</span><span class="nt">&gt;</span>
    1217. 

  1217.         <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link dropdown-toggle"</span> <span class="na">data-bs-toggle=</span><span class="s">"dropdown"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>Dropdown<span class="nt">&lt;/a&gt;</span>
    1218. 

  1218.         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
    1219. 

  1219.           <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
    1220. 

  1220.             Action
    1221. 

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

  1222.           <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
    1223. 

  1223.             Another action
    1224. 

  1224.           <span class="nt">&lt;/a&gt;</span>
    1225. 

  1225.         <span class="nt">&lt;/div&gt;</span>
    1226. 

  1226.       <span class="nt">&lt;/li&gt;</span>
    1227. 

  1227.     <span class="nt">&lt;/ul&gt;</span>
    1228. 

  1228.   <span class="nt">&lt;/div&gt;</span>
    1229. 

  1229.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    1230. 

  1230.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">&gt;</span>
    1231. 

  1231.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane active show"</span> <span class="na">id=</span><span class="s">"tabs-home-ex4"</span><span class="nt">&gt;</span>
    1232. 

  1232.         <span class="nt">&lt;h4&gt;</span>Home tab<span class="nt">&lt;/h4&gt;</span>
    1233. 

  1233.         <span class="nt">&lt;div&gt;</span>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh<span class="nt">&lt;/div&gt;</span>
    1234. 

  1234.       <span class="nt">&lt;/div&gt;</span>
    1235. 

  1235.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"tabs-profile-ex4"</span><span class="nt">&gt;</span>
    1236. 

  1236.         <span class="nt">&lt;h4&gt;</span>Profile tab<span class="nt">&lt;/h4&gt;</span>
    1237. 

  1237.         <span class="nt">&lt;div&gt;</span>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed<span class="nt">&lt;/div&gt;</span>
    1238. 

  1238.       <span class="nt">&lt;/div&gt;</span>
    1239. 

  1239.     <span class="nt">&lt;/div&gt;</span>
    1240. 

  1240.   <span class="nt">&lt;/div&gt;</span>
    1241. 

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

  1242.                         </figure>
    1243. 

  1243.                       </div>
    1244. 

  1244.                       <h2 id="full-width-tabs">Full-width tabs</h2>
    1245. 

  1245.                       <p>Add the <code class="language-plaintext highlighter-rouge">nav-fill</code> class to make the tabs take up the full space of the parent element.</p>
    1246. 

  1246.                       <div class="example no_toc_section example-bg">
    1247. 

  1247.                         <div class="example-content">
    1248. 

  1248.                           <div class="example-column example-column-1">
    1249. 

  1249.                             <div class="card">
    1250. 

  1250.                               <div class="card-header">
    1251. 

  1251.                                 <ul class="nav nav-tabs card-header-tabs nav-fill" data-bs-toggle="tabs">
    1252. 

  1252.                                   <li class="nav-item">
    1253. 

  1253.                                     <a href="#tabs-home-ex5" class="nav-link active" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
    1254. 

  1254.                                       <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>
    1255. 

  1255.                                     </a>
    1256. 

  1256.                                   </li>
    1257. 

  1257.                                   <li class="nav-item">
    1258. 

  1258.                                     <a href="#tabs-profile-ex5" class="nav-link" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/user -->
    1259. 

  1259.                                       <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="7" r="4" /><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /></svg>
    1260. 

  1260.                                     </a>
    1261. 

  1261.                                   </li>
    1262. 

  1262.                                   <li class="nav-item">
    1263. 

  1263.                                     <a href="#tabs-activity-ex5" class="nav-link" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/activity -->
    1264. 

  1264.                                       <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="M3 12h4l3 8l4 -16l3 8h4" /></svg>
    1265. 

  1265.                                     </a>
    1266. 

  1266.                                   </li>
    1267. 

  1267.                                 </ul>
    1268. 

  1268.                               </div>
    1269. 

  1269.                               <div class="card-body">
    1270. 

  1270.                                 <div class="tab-content">
    1271. 

  1271.                                   <div class="tab-pane active show" id="tabs-home-ex5">
    1272. 

  1272.                                     <h4>Home tab</h4>
    1273. 

  1273.                                     <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
    1274. 

  1274.                                   </div>
    1275. 

  1275.                                   <div class="tab-pane" id="tabs-profile-ex5">
    1276. 

  1276.                                     <h4>Profile tab</h4>
    1277. 

  1277.                                     <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
    1278. 

  1278.                                   </div>
    1279. 

  1279.                                   <div class="tab-pane" id="tabs-activity-ex5">
    1280. 

  1280.                                     <h4>Activity tab</h4>
    1281. 

  1281.                                     <div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
    1282. 

  1282.                                   </div>
    1283. 

  1283.                                 </div>
    1284. 

  1284.                               </div>
    1285. 

  1285.                             </div>
    1286. 

  1286.                           </div>
    1287. 

  1287.                         </div>
    1288. 

  1288.                       </div>
    1289. 

  1289.                       <div class="example-code">
    1290. 

  1290.                         <figure class="highlight">
    1291. 

  1291.                           <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    1292. 

  1292.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
    1293. 

  1293.     <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs card-header-tabs nav-fill"</span> <span class="na">data-bs-toggle=</span><span class="s">"tabs"</span><span class="nt">&gt;</span>
    1294. 

  1294.       <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    1295. 

  1295.         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-home-ex5"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/home --&gt;</span>
    1296. 

  1296.           <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 "</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;polyline</span> <span class="na">points=</span><span class="s">"5 12 3 12 12 3 21 12 19 12"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1297. 

  1297.         <span class="nt">&lt;/a&gt;</span>
    1298. 

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

  1299.       <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    1300. 

  1300.         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-profile-ex5"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/user --&gt;</span>
    1301. 

  1301.           <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 "</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">"7"</span> <span class="na">r=</span><span class="s">"4"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1302. 

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

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

  1304.       <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    1305. 

  1305.         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-activity-ex5"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/activity --&gt;</span>
    1306. 

  1306.           <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 "</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">"M3 12h4l3 8l4 -16l3 8h4"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1307. 

  1307.         <span class="nt">&lt;/a&gt;</span>
    1308. 

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

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

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

  1311.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    1312. 

  1312.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">&gt;</span>
    1313. 

  1313.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane active show"</span> <span class="na">id=</span><span class="s">"tabs-home-ex5"</span><span class="nt">&gt;</span>
    1314. 

  1314.         <span class="nt">&lt;h4&gt;</span>Home tab<span class="nt">&lt;/h4&gt;</span>
    1315. 

  1315.         <span class="nt">&lt;div&gt;</span>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh<span class="nt">&lt;/div&gt;</span>
    1316. 

  1316.       <span class="nt">&lt;/div&gt;</span>
    1317. 

  1317.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"tabs-profile-ex5"</span><span class="nt">&gt;</span>
    1318. 

  1318.         <span class="nt">&lt;h4&gt;</span>Profile tab<span class="nt">&lt;/h4&gt;</span>
    1319. 

  1319.         <span class="nt">&lt;div&gt;</span>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed<span class="nt">&lt;/div&gt;</span>
    1320. 

  1320.       <span class="nt">&lt;/div&gt;</span>
    1321. 

  1321.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"tabs-activity-ex5"</span><span class="nt">&gt;</span>
    1322. 

  1322.         <span class="nt">&lt;h4&gt;</span>Activity tab<span class="nt">&lt;/h4&gt;</span>
    1323. 

  1323.         <span class="nt">&lt;div&gt;</span>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus<span class="nt">&lt;/div&gt;</span>
    1324. 

  1324.       <span class="nt">&lt;/div&gt;</span>
    1325. 

  1325.     <span class="nt">&lt;/div&gt;</span>
    1326. 

  1326.   <span class="nt">&lt;/div&gt;</span>
    1327. 

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

  1328.                         </figure>
    1329. 

  1329.                       </div>
    1330. 

  1330.                       <h2 id="alternate-style">Alternate style</h2>
    1331. 

  1331.                       <p>Use the <code class="language-plaintext highlighter-rouge">nav-tabs-alt</code> class to make the labels display in capital letters.</p>
    1332. 

  1332.                       <div class="example no_toc_section example-bg">
    1333. 

  1333.                         <div class="example-content">
    1334. 

  1334.                           <div class="example-column example-column-1">
    1335. 

  1335.                             <div class="card">
    1336. 

  1336.                               <div class="card-header">
    1337. 

  1337.                                 <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
    1338. 

  1338.                                   <li class="nav-item">
    1339. 

  1339.                                     <a href="#tabs-home-ex6" class="nav-link active" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
    1340. 

  1340.                                       <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" 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>
    1341. 

  1341.                                       Home</a>
    1342. 

  1342.                                   </li>
    1343. 

  1343.                                   <li class="nav-item">
    1344. 

  1344.                                     <a href="#tabs-profile-ex6" class="nav-link" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/user -->
    1345. 

  1345.                                       <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" 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="7" r="4" /><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /></svg>
    1346. 

  1346.                                       Profile</a>
    1347. 

  1347.                                   </li>
    1348. 

  1348.                                   <li class="nav-item ms-auto">
    1349. 

  1349.                                     <a href="#tabs-settings-ex6" class="nav-link" title="Settings" data-bs-toggle="tab"><!-- Download SVG icon from http://tabler-icons.io/i/settings -->
    1350. 

  1350.                                       <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.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
    1351. 

  1351.                                     </a>
    1352. 

  1352.                                   </li>
    1353. 

  1353.                                 </ul>
    1354. 

  1354.                               </div>
    1355. 

  1355.                               <div class="card-body">
    1356. 

  1356.                                 <div class="tab-content">
    1357. 

  1357.                                   <div class="tab-pane active show" id="tabs-home-ex6">
    1358. 

  1358.                                     <h4>Home tab</h4>
    1359. 

  1359.                                     <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
    1360. 

  1360.                                   </div>
    1361. 

  1361.                                   <div class="tab-pane" id="tabs-profile-ex6">
    1362. 

  1362.                                     <h4>Profile tab</h4>
    1363. 

  1363.                                     <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
    1364. 

  1364.                                   </div>
    1365. 

  1365.                                   <div class="tab-pane" id="tabs-settings-ex6">
    1366. 

  1366.                                     <h4>Settings tab</h4>
    1367. 

  1367.                                     <div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
    1368. 

  1368.                                   </div>
    1369. 

  1369.                                 </div>
    1370. 

  1370.                               </div>
    1371. 

  1371.                             </div>
    1372. 

  1372.                           </div>
    1373. 

  1373.                         </div>
    1374. 

  1374.                       </div>
    1375. 

  1375.                       <div class="example-code">
    1376. 

  1376.                         <figure class="highlight">
    1377. 

  1377.                           <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    1378. 

  1378.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
    1379. 

  1379.     <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs card-header-tabs"</span> <span class="na">data-bs-toggle=</span><span class="s">"tabs"</span><span class="nt">&gt;</span>
    1380. 

  1380.       <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    1381. 

  1381.         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-home-ex6"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/home --&gt;</span>
    1382. 

  1382.           <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 me-2"</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;polyline</span> <span class="na">points=</span><span class="s">"5 12 3 12 12 3 21 12 19 12"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1383. 

  1383.           Home<span class="nt">&lt;/a&gt;</span>
    1384. 

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

  1385.       <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
    1386. 

  1386.         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-profile-ex6"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/user --&gt;</span>
    1387. 

  1387.           <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 me-2"</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">"7"</span> <span class="na">r=</span><span class="s">"4"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1388. 

  1388.           Profile<span class="nt">&lt;/a&gt;</span>
    1389. 

  1389.       <span class="nt">&lt;/li&gt;</span>
    1390. 

  1390.       <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item ms-auto"</span><span class="nt">&gt;</span>
    1391. 

  1391.         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-settings-ex6"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">title=</span><span class="s">"Settings"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/settings --&gt;</span>
    1392. 

  1392.           <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"</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">"M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"</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">"3"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1393. 

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

  1394.       <span class="nt">&lt;/li&gt;</span>
    1395. 

  1395.     <span class="nt">&lt;/ul&gt;</span>
    1396. 

  1396.   <span class="nt">&lt;/div&gt;</span>
    1397. 

  1397.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    1398. 

  1398.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">&gt;</span>
    1399. 

  1399.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane active show"</span> <span class="na">id=</span><span class="s">"tabs-home-ex6"</span><span class="nt">&gt;</span>
    1400. 

  1400.         <span class="nt">&lt;h4&gt;</span>Home tab<span class="nt">&lt;/h4&gt;</span>
    1401. 

  1401.         <span class="nt">&lt;div&gt;</span>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh<span class="nt">&lt;/div&gt;</span>
    1402. 

  1402.       <span class="nt">&lt;/div&gt;</span>
    1403. 

  1403.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"tabs-profile-ex6"</span><span class="nt">&gt;</span>
    1404. 

  1404.         <span class="nt">&lt;h4&gt;</span>Profile tab<span class="nt">&lt;/h4&gt;</span>
    1405. 

  1405.         <span class="nt">&lt;div&gt;</span>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed<span class="nt">&lt;/div&gt;</span>
    1406. 

  1406.       <span class="nt">&lt;/div&gt;</span>
    1407. 

  1407.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"tabs-settings-ex6"</span><span class="nt">&gt;</span>
    1408. 

  1408.         <span class="nt">&lt;h4&gt;</span>Settings tab<span class="nt">&lt;/h4&gt;</span>
    1409. 

  1409.         <span class="nt">&lt;div&gt;</span>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus<span class="nt">&lt;/div&gt;</span>
    1410. 

  1410.       <span class="nt">&lt;/div&gt;</span>
    1411. 

  1411.     <span class="nt">&lt;/div&gt;</span>
    1412. 

  1412.   <span class="nt">&lt;/div&gt;</span>
    1413. 

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

  1414.                         </figure>
    1415. 

  1415.                       </div>
    1416. 

  1416.                     </div>
    1417. 

  1417.                   </div>
    1418. 

  1418.                 </div>
    1419. 

  1419.               </div>
    1420. 

  1420.             </div>
    1421. 

  1421.           </div>
    1422. 

  1422.         </div>
    1423. 

  1423.         <footer class="footer footer-transparent d-print-none">
    1424. 

  1424.           <div class="container-xl">
    1425. 

  1425.             <div class="row text-center align-items-center flex-row-reverse">
    1426. 

  1426.               <div class="col-lg-auto ms-lg-auto">
    1427. 

  1427.                 <ul class="list-inline list-inline-dots mb-0">
    1428. 

  1428.                   <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
    1429. 

  1429.                   <li class="list-inline-item"><a href="../license.html" class="link-secondary">License</a></li>
    1430. 

  1430.                   <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
    1431. 

  1431.                   <li class="list-inline-item">
    1432. 

  1432.                     <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
    1433. 

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

  1434.                       <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>
    1435. 

  1435.                       Sponsor
    1436. 

  1436.                     </a>
    1437. 

  1437.                   </li>
    1438. 

  1438.                 </ul>
    1439. 

  1439.               </div>
    1440. 

  1440.               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
    1441. 

  1441.                 <ul class="list-inline list-inline-dots mb-0">
    1442. 

  1442.                   <li class="list-inline-item">
    1443. 

  1443.                     Copyright &copy; 2022
    1444. 

  1444.                     <a href=".." class="link-secondary">Tabler</a>.
    1445. 

  1445.                     All rights reserved.
    1446. 

  1446.                   </li>
    1447. 

  1447.                   <li class="list-inline-item">
    1448. 

  1448.                     <a href="../changelog.html" class="link-secondary" rel="noopener">
    1449. 

  1449.                       v1.0.0-beta14
    1450. 

  1450.                     </a>
    1451. 

  1451.                   </li>
    1452. 

  1452.                 </ul>
    1453. 

  1453.               </div>
    1454. 

  1454.             </div>
    1455. 

  1455.           </div>
    1456. 

  1456.         </footer>
    1457. 

  1457.       </div>
    1458. 

  1458.     </div>
    1459. 

  1459.     <!-- Libs JS -->
    1460. 

  1460.     <!-- Tabler Core -->
    1461. 

  1461.     <script src="../dist/js/tabler.min.js?1666304673" defer></script>
    1462. 

  1462.     <script src="../dist/js/demo.min.js?1666304673" defer></script>
    1463. 

  1463.   </body>
    1464. 

  1464. </html>
    1465.