Bootstrap Empty State Placeholder — Free HTML CSS JS Snippet

An empty state is the screen most product teams forget to design on purpose, so this snippet treats it as a first-class, reusable block rather than an afterthought: a centered inline SVG icon (a simple outlined cart/box drawn with path elements and stroke rather than a raster image, so it scales crisply and inherits currentColor from the surrounding text-secondary class), a bold heading, a muted one-line message, and a primary Bootstrap btn btn-primary call-to-action, all centered inside a real Bootstrap card. Using an inline SVG instead of an <img> means the icon needs zero extra network requests and can be recolored purely through CSS currentColor inheritance, which matters because empty states often need to match a theme's muted-secondary palette rather than a fixed icon color.

The demo itself is built to prove the component actually works both ways, not just render once: a "Toggle demo state" button and the CTA button (#besCta) inside the empty state both call a single setEmpty(isEmpty) function that toggles Bootstrap's own d-none utility class on the #besEmpty and #besPopulated blocks in lockstep, so exactly one is ever visible, and also relabels the toggle button itself to describe the action it will perform next rather than the state it is currently in. A currentlyEmpty boolean tracks state outside the DOM so both entry points (the manual toggle and the CTA click) can flip it consistently without reading the current visibility from the DOM each time.

The non-obvious detail worth calling out is that the CTA button living *inside* the empty state is wired to the same state-changing function as the external toggle button, rather than having its own separate logic — in a real cart or list this is exactly the button a user clicks to leave the empty state, so testing it needs to produce the same populated view as the demo toggle, not a different one. Keeping both entry points calling one shared function also means a future change to what "populated" looks like — say, adding a badge count — only needs to happen in one place.

Because the whole component is two sibling blocks toggled by one boolean, it maps directly onto conditional rendering in any component framework: an isEmpty state variable controlling which JSX/template block renders, with the underlying SVG, heading, and button markup unchanged.

The populated view reuses Bootstrap's own list-group-flush and d-flex justify-content-between utilities to align each item's name on the left and its price on the right without any custom flexbox rules of its own, which keeps the "after" state visually consistent with the rest of a typical Bootstrap-built page rather than looking like a bolted-on demo table.