Documentation

Browse source code
On this page

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 icon code -->
  </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 icon code -->
      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="..." 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 icon code -->
      Search again
    </a>
  </div>
</div>