Documentation

Browse source code
Introduction Alerts Autosize Avatars Badges Breadcrumb Buttons Cards Carousel Colors Countup Cursors Charts Divider Empty states Flags Form elements Form helpers Form input mask Layout Progress Payments Range slider Ribbons New Spinners Steps Tables Tabs Timelines Toasts Tooltips Typography

Empty states

Empty states/blanks are commonly used as placeholders for first time use, empty data or error screens.

Default markup

No results found

Try adjusting your search or filter to find what you're looking for.

Search again 
<div class="empty">
   <div class="empty-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
   </div>
   <p class="empty-title h3">No results found</p>
   <p class="empty-subtitle text-muted">
      Try adjusting your search or filter to find what you're looking for.
   </p>
   <div class="empty-action">
      <a href="./." class="btn btn-primary">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
         Search again
      </a>
   </div>
</div>

Empty state with illustration

No results found

Try adjusting your search or filter to find what you're looking for.

Search again 
<div class="empty">
   <div class="empty-icon">
      <img src="./static/illustrations/undraw_quitting_time_dm8t.svg" class="h-8 mb-4" alt="">
   </div>
   <p class="empty-title h3">No results found</p>
   <p class="empty-subtitle text-muted">
      Try adjusting your search or filter to find what you're looking for.
   </p>
   <div class="empty-action">
      <a href="./." class="btn btn-primary">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
         Search again
      </a>
   </div>
</div>