Skip to content

Coming Soon

Launch and under-construction pages.

3 component(s)

Bootstrap Coming Soon Page โ€“ Bootstrap 5 coming soon preview

Bootstrap Coming Soon Page

Bootstrap 5 coming soon page with a live countdown from a data attribute, an email notify form with validation and social links in a centered card.

What is a coming soon page?

A coming soon page is a placeholder shown while a website, product or feature is not yet launched. It tells visitors that something is on the way, often with a short description, a launch date or countdown and an email signup so interested people can be notified. Under-construction pages follow the same idea for a site that is being rebuilt. A good coming soon page template collects early interest instead of losing it.

When to use a coming soon page

  • Before a launch, to claim the domain, start building an email list and let search engines discover the site.
  • During a rebrand or rebuild, when the old site is gone and the new one is not ready.
  • For a single upcoming product or event page that will later turn into a full landing page.

Best practices

  • Say what is coming and for whom in one sentence; a logo alone gives visitors no reason to sign up.
  • Add one primary action, usually an email signup, and explain what subscribers will receive.
  • Use a countdown only for a real date, and handle the moment it reaches zero.
  • Link to social profiles or a contact address so people can still reach you.
  • Keep the page lightweight; background videos and large images slow down first impressions.

Accessibility

The signup field needs a visible label or a properly associated label, plus clear success and error messages announced with role="status" or aria-live. Countdown digits should not be announced every second; provide a static text date as well. Check contrast when text sits on photos or gradients.

Framework versions

Each coming soon template includes a live preview, code tabs, a copy button and a download. Bootstrap 6 versions use the new alpha with theme-* colour roles, Bootstrap 5 versions use the grid and form controls, and Tailwind CSS and pure CSS versions stay minimal. Choose your stack with the framework filter, copy the files and connect the form to your mailing list provider.