Empty states tell users what's missing and what to do next. These 4 patterns cover no-data, no results, onboarding and error states — all built with Bootstrap 5 utilities.
Key Pattern
<div class="text-center p-5">
<div class="mb-3" style="font-size:3rem;">📦</div>
<h6 class="fw-bold mb-2">Nothing Here Yet</h6>
<p class="text-muted small mb-4">Description of what's missing and why.</p>
<a href="#" class="btn btn-primary">Primary Action</a>
</div>
1. Basic Bootstrap 5 Empty State
Standard empty state with illustration, heading, description and action button.
2. Bootstrap 5 Search No Results
Empty state shown when a search returns no matches — with clear and try-again options.
3. Bootstrap 5 First-Time Onboarding Empty State
Welcoming empty state for new users with steps to get started.
4. Bootstrap 5 Error Empty States
Error and failed states — 404, connection error and permission denied.
Frequently Asked Questions
An empty state is the UI shown when there's no content to display — a new user's dashboard, search with no results, or an error state. Good empty states include an icon or illustration, a brief explanation, and a clear action the user can take next.
Use a card with text-center and generous padding (p-4 or p-5). Add an emoji or SVG icon, a heading, descriptive text and an action button. No custom CSS needed beyond Bootstrap's utilities.
Add a tbody row with a single td spanning all columns: <tr><td colspan='5'><div class='text-center py-5'>Your empty state content</div></td></tr>. Show or hide it with JavaScript based on whether the table has data rows.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.