Bootstrap 5

Bootstrap 5 Empty State

An Empty State component is a UI pattern used to fill screen areas that contain no data yet — such as empty lists, zero search results, or freshly created accounts. In Bootstrap 5, it's typically built using a combination of utility classes like `d-flex`, `flex-column`, `align-items-center`, `text-muted`, and optionally a card wrapper. Use it to guide users toward a productive next action rather than leaving them staring at a blank space.

Primary Class

.empty-state

Common Use Cases

→A project management dashboard where a new user has no tasks yet — prompt them to create their first task with a direct CTA button
→A search results page that returns zero matches — display the query back to the user and suggest broadening filters or checking spelling
→An inbox or notifications panel with no unread messages — reassure the user everything is clear and link to compose or settings
→An e-commerce order history page for a brand new customer — show an illustration and a 'Start Shopping' button to drive conversion

Variants & Classes

Variant	Description	Classes
Empty State Default	Standard empty state with Bootstrap's default styling.	`empty-state`
Empty State Responsive	Responsive variant that adapts to different screen sizes.	`empty-state empty-state-responsive`

Code Example

<div class="d-flex flex-column align-items-center justify-content-center text-center py-5 px-3" style="min-height: 320px;">
  <div class="mb-3">
    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="text-muted" viewBox="0 0 16 16">
      <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.854 3.646a.5.5 0 1 0-.708.708L7.293 8l-2.147 2.146a.5.5 0 0 0 .708.708L8 8.707l2.146 2.147a.5.5 0 0 0 .708-.708L8.707 8l2.147-2.146a.5.5 0 0 0-.708-.708L8 7.293 5.854 5.646z"/>
    </svg>
  </div>
  <h5 class="fw-semibold mb-2">No orders yet</h5>
  <p class="text-muted mb-4" style="max-width: 360px;">You haven't placed any orders. Browse our catalogue and find something you'll love.</p>
  <a href="/shop" class="btn btn-primary">Start Shopping</a>
</div>

Live Examples

Basic Empty State

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated empty state with custom colours
✓Empty State with interactive states
✓Responsive empty state for all screen sizes

Best Practices

Always include exactly one primary CTA

An empty state without an action is a dead end. Use a single `btn btn-primary` that leads the user to the most logical next step — never present two equally-weighted buttons, which creates decision paralysis.

Cap the description width for readability

Add an inline `style="max-width: 360px;"` or use Bootstrap's `col-md-6 mx-auto` on your paragraph — long lines in a centred block are harder to read and make the layout feel unpolished.

Use context-specific copy, not 'No data found'

Generic messages erode trust. Write copy that names the specific resource ('No invoices yet', 'Your watchlist is empty') and explains briefly why the state exists or how to resolve it.

Prefer inline SVGs or Bootstrap Icons over third-party images

Inline SVGs inherit `currentColor`, so you can tint the illustration with `text-muted`, `text-primary`, or any custom colour class without extra CSS or loading an additional asset.

FAQ

Should an Empty State always live inside a card?

Not necessarily. Use a card (`card` + `card-body`) when the empty state appears within a discrete content panel, such as a widget or table replacement — it gives the area a defined boundary. For full-page empty states (like a zero-results search page), skip the card and let the component breathe inside the page's main container. The key rule is that the empty state should occupy the same visual footprint as the content it replaces.

How do I change the icon and button colour to match my brand?

Bootstrap 5's colour utilities map directly to CSS custom properties. Override `--bs-primary` in your root stylesheet to retheme the button automatically. For the icon colour, swap `text-muted` for `text-primary` or a custom class like `text-brand` where you define `color: #your-hex`. If you're using Bootstrap Icons, size is controlled via the `font-size` utility — e.g. `fs-1` gives you a 2.5rem icon without touching the SVG.

How does Canvas Builder handle Empty State components?

When you describe an empty state in Canvas Builder — for example, 'empty orders page with a shop CTA' — it generates a fully structured Bootstrap 5 block using your project's brand colours as the primary button colour and icon tint. The output includes responsive utility classes so the component centres correctly on both mobile and desktop without extra media queries. You can regenerate with different copy or icon styles by updating your prompt.